extjs

comboBox+checkBox：

 

Ext.onReady(function(){ 
    var store= new Ext.data.SimpleStore({
         fields:['industryName','industryValue'],
         data:[['标杆,,'1'],['标杆,'2'],['标杆3',3],['标杆4',4]]
     });
    
    var comboas = new Ext.form.ComboBox({
        id:'comboaa', 
        store: store,  
        fieldLabel: '标杆了',
        displayField:'industryName',  
        valueField:'industryValue',  
        typeAhead: true,  
        mode: 'local',  
        //tpl:'<tpl for="."><div ><span><input type="checkbox" οnclick="myclick(this)" value="{state}" /></span><span class="x-combo-list-item">{state}</span></div></tpl>',  
        tpl:'<tpl for="."><div class="x-combo-list-item"><span><input type="checkbox" {[values.check?"checked":""]}  value="{[values.industryName]}" /></span><span >{industryName}</span></div></tpl>',  
        triggerAction: 'all',  
        emptyText:'select...',  
        selectOnFocus:true,  
        //applyTo: 'local-states',  
        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('industryName'));  
                        strvalue.push(rc.get('industryValue'));  
                    }  
                });  
                this.setValue(str.join());  
                this.value=strvalue.join();  
                //this.collapse();  
                this.fireEvent('select', this, record, index);  
            }  
        }  
    }); 
 
   var sp = new Ext.form.FormPanel({
           //renderTo: Ext.getBody(),
           id:'asa',
     labelAlign:'right',
     buttonAlign:'right',
     border:true,  //True表示为显示出面板body元素的边框，false则隐藏(缺省为true).
     frame:true,
     title:'查询条件',
     autoHeight:true,
     collapsible:true, //面板是可收缩的
      items:[{
        layout:'column',
     bodyStyle: 'width:100%',
        items:[{
          columnWidth:.5,
          layout:'form',
          items:[comboas]
        },{
              columnWidth:.5,
              layout:'form',
              items:[{}]
        }]
      }]
   
    });  
        
      comboas.render(Ext.getBody());
     
   });