Extjs实现下拉菜单效果

时间：2021-05-28

本文实例为大家分享了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){ 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有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章