Extjs下拉多选框

来源:互联网 发布:nosql 大数据 编辑:程序博客网 时间:2024/06/08 08:30
var stateCombo = new Ext.form.ComboBox({   
        store : new Ext.data.SimpleStore({
fields : ["value", "text"],
data : [['0','有效'],['1','无效']]
}),   
        displayField:'text',   //store也可以动态的去加载,大家自己改一下就OK
        valueField:'value', 
        mode : 'local',
        id : 'stateList',
        typeAhead: true,  
        width : 150,
        fieldLabel : '状态',
        mode: 'local',   
        tpl:'<tpl for="."><div class="x-combo-list-item"><span><input type="checkbox" {[values.check?"checked":""]} value="{[values.text]}" /></span><span >{text}</span></div></tpl>',   
        triggerAction: 'all',   
        emptyText:'请选择',   
        selectOnFocus:true,   
        onSelect : function(record, index){   
            if(this.fireEvent('beforeselect', this, record, index) != false){   
                record.set('check',!record.get('check'));   
               var str=[];//页面显示的值   
                var strvalue=[];//传入后台的值   
                this.store.each(function(rc){ 
                    if(rc.get('check')){   
                        str.push(rc.get('text'));   
                        strvalue.push(rc.get('value'));   
                    }   
                });   
               this.setValue(str.join());   
                this.value=strvalue.join();//赋值
                this.fireEvent('select', this, record, index);   
            }
        },
        listeners:{
        expand : function(value){//监听下拉事件
        this.store.each(function(rc){
        if(value.value==rc.get('value')){
        rc.set('check',true);//选中
        }
                });
        }
        }
    });