今天做了一个下拉框,截取了一部分,想记录一下extjs下拉框的各种配置项属性
store部分:
var statusStore = Ext.create('Ext.data.Store', {
fields : ['id', 'name'],
data : [{"id":"1", "name":"待审核"}
,{"id":"2_0", "name":"已审核"} //已审核未确认
,{"id":"3", "name":"已作废"}
,{"id":"4_0", "name":"已确认"}] //已审核已确认
});
然后是下拉框部分(标红部分是重要部分)
{
xtype : "combo"
,fieldLabel: '单据状态'
,id : "status"
,store : statusStore //数据来源
,displayField : "name" //展示值
,valueField : "id"
,value : window.Chainsroutine_supplierquire == '1' ? '1' : '2_0'
,labelWidth: 60
,width : 140
,typeAhead : true //自动选择第一项匹配的内容,配合typeAheadDelay可以设置延时的时间
,fuzzySelect : true
,queryMode: 'local' //取本地数据
,multiSelect : true //支持多选
,forceSelection : true //失去焦点时,选择第一个值
,hidden : false //是否隐藏
}
说明部分查看了网上的资料
说明:
(1)var combostore = new Ext.data.ArrayStore():创建一个新的数组数据源。
(2)fields: ['id', 'name']:数据源包含两列,列名分别为'id','name'。
(3)data: [{"id":"1", "name":"待审核"}, ,{"id":"2_0", "name":"已审核"}]:数据源对应的数据,例:id:1,name:状态。
(4)var combobox = new Ext.form.ComboBox():创建一个新的下拉列表。
(5)store: combostore:数据源为上面创建的数据源,这个属性是combobox的必需属性。
(6)displayField: 'name',valueField: 'id':combobox对应数据源的显示列与值列,这两个属性也是必须的。
(7)mode: 'local':指定数据源为本地数据源,如果是本地创建的数据源,该属性也是必须的,如果数据源来自于服务器,
设置为'remote'表示数据源来自于服务器,关于服务器交互后面我们会讲解。
(8)triggerAction: 'all':请设置为”all”,否则默认 为”query”的情况下,你选择某个值后,再此下拉时,只出现匹配选项,
如果设为all的话,每次下拉均显示全部选项。
(9)editable: false:默认情况下,combobox的内容是可以编辑的,该属性设置为false,
使下拉列表只能选择不能编辑。
(10)combobox.on('select', function () {alert(combobox.getValue());}):选择时alert出下拉列表的值。