Extjs实现下拉菜单效果

本文实例为大家分享了Extjs实现下拉树效果，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text8</title>

  <link rel="stylesheet" type="text/css" href="../../../ext-4.2.1/resources/css/ext-all.css" >
  <script type="text/javascript" src="../../../ext-4.2.1/bootstrap.js"></script>

</head>
<body>
  <script>
       Ext.define('TreeComboBox',{
          extend : 'Ext.form.field.ComboBox',
          store : {
            fields:[],
            data:[[]]
          },
          width:300,
          editable : false,
          allowBlank:false,
          multiSelect : true,
          listConfig : {
            resizable:false,
            minWidth:150,
            maxWidth:250,
          },
          _idValue : null,
          _txtValue : null,
          callback : Ext.emptyFn,
          treeObj : null,
          initComponent : function(){
              this.treeObj=new Ext.tree.Panel({
                border : false,
                autoScroll : true,
                rootVisible: false,
                renderTo:this.treeRenderId,
                root: {
                  text: 'root',draggable: false,expanded: true,
                    children:[
                      {
                      text:'一级节点',expanded: true, checked:false ,
                        children:[
                          { text:'二级节点1',leaf:true,checked:false},
                          { text:'二级节点2',leaf:true,checked:false}
                          ]
                        } ,
                        {
                      text:'一级节点',expanded: true, checked:false ,
                        children:[
                          { text:'二级节点1',leaf:true,checked:false},
                          { text:'二级节点2',leaf:true,checked:false}
                          ]
                        }
                   ]
                 } ,
               listeners:{
                 checkchange:function(node,state){
                   if(node.hasChildNodes()){
                     for(var i=0;i<node.childNodes.length;i++){
                       node.childNodes[i].set('checked',state);
                       }
                     }
                   }
                 }
              });    

              this.treeRenderId = Ext.id();
              this.tpl = "<tpl><div id='"+this.treeRenderId+"'></div></tpl>";
              this.callParent(arguments);
              this.on({
                  'expand' : function(){
                    if(!this.treeObj.rendered&&this.treeObj&&!this.readOnly){
                        Ext.defer(function(){
                            this.treeObj.render(this.treeRenderId);
                        },100,this);
                    }
                }
            }); 

              this.treeObj.on('itemclick',function(view,rec){
                /* var roonodes = this.treeObj.getRootNode().childNodes;  //获取主节点
                 var childnodes = node.childNodes; //获取zi节点
                 if (roonodes.getView().getSelectionCount()==1) {
                  for(var i=0;i<childnodes.length;i++){
                    this.setValue(this._txtValue = rec.get('text'));
                  }
                 }*/
                  if(rec){
                    //node.getUI().checkbox.indeterminate = true; //半选中状态
                    this.setValue(this._txtValue = rec.get('text'));
                    //this.collapse();//关闭tree
                  }
              },this);
          },
      }); 

    //实例化下拉树
    var xltree1=new TreeComboBox({
      fieldLabel : '下拉树1',
      name:'xltree1111',
      allowBlank:true
    });
    var xltree2=new TreeComboBox({
      fieldLabel : '下拉树2',
      name:'xltree2222',
      allowBlank:true
    }); 

    Ext.create('Ext.form.Panel', {
      renderTo: Ext.getBody(),
      width: 500,
      bodyPadding: 10,
      title: 'TreeComboBox',
      items: [xltree1, xltree2]
    });
  </script>
</body>
</html>

问题：当选中复选框时候，如何使全部选中的条目添加显示到combobox中？

效果：

下面是另一个：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tabpanel</title>

  <link rel="stylesheet" type="text/css" href="../../../ext-4.2.1/resources/css/ext-all.css" >
  <script type="text/javascript" src="../../../ext-4.2.1/bootstrap.js"></script>

</head>
<body>
  <script>
        Ext.onReady(function(){
            Ext.create('Ext.window.Window',{
                id: 'docaddId',
                title: 'Preferences',
                buttonAlign: 'center',
                width:500,
                layout:'fit',
                //height:400,
                resizable:false,

                items:
                    Ext.create('Ext.tab.Panel', {
                      //renderTo: Ext.getBody(),

                      items: [{
                        title: 'A',

                        items:[

                        //Process and associated workstation下拉选框
                        {

                  xtype:'container',
                  fieldLabel:'Workstation',

                  items:[{
                      xtype:"combobox",
                      name : 'Process and associated workstation',
                  fieldLabel : 'Workstation',
                  id:'aaa',
                  layout:'fit',
                  width:480,
                  editable : false,
                  allowBlank : false,
                  multiSelect : true,
                  store : {
                  fields : ['workstationId', 'workstationName'],
                  data : [
                    {'workstationId':'0',workstationName:'workstation01'},
                    {'workstationId':'1',workstationName:'workstation02'},
                    {'workstationId':'2',workstationName:'workstation03'},
                    {'workstationId':'3',workstationName:'workstation04'}
                  ]
                  },
                  listConfig : {
                  itemTpl : Ext.create('Ext.XTemplate','<input type=checkbox>{[values.workstationName]}'),
                  onItemSelect : function(record) {
                    var node = this.getNode(record);
                    if (node) {
                    Ext.fly(node).addCls(this.selectedItemCls);
                    var checkboxs = node.getElementsByTagName("input");
                    if (checkboxs != null)
                      var checkbox = checkboxs[0];
                    checkbox.checked = true;
                    }
                  },
                  listeners : {
                    itemclick : function(view, record, item, index, e, eOpts) {
                    var isSelected = view.isSelected(item);
                    var checkboxs = item.getElementsByTagName("input");
                    if (checkboxs != null) {
                      var checkbox = checkboxs[0];
                      if (!isSelected) {
                      checkbox.checked = true;
                      } else {
                      checkbox.checked = false;
                      }
                    }
                    }
                  }
                  },
                  queryMode : 'remote',
                  displayField : 'workstationName',
                  valueField : 'workstationIda',
                  }
                  ]

                        }]
                      }, {
                        title: 'B'
                      }, {
                        title: 'C'
                      }, {
                        title: 'D'
                      }]
                    })
            }).show();

        });
  </script>
</body>
</html>

效果：

以上就是本文的全部内容，希望对大家学习javascript有所帮助。