<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>text8</title> <link type="text/css" href="" > <script type="text/javascript" src=""></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></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 type="text/css" href="" > <script type="text/javascript" src=""></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>
效果：
