Extjs下拉框 Combobox

今天做了一个下拉框,截取了一部分,想记录一下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出下拉列表的值。



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值