G4Studio平台下基于ExtJS的下拉复选组件实现案例

来源：互联网发布：软件行业分析编辑：程序博客网时间：2024/06/06 02:47

描述

实现一个下拉复选功能的组件。本例采用Combox组件和Tree组件结合实现。

实现代码

var zcxdRoot = new Ext.tree.AsyncTreeNode({text : '政策向导',expanded : true,id : '06'});var zcxdTree = new Ext.tree.TreePanel({loader : new Ext.tree.TreeLoader({baseAttrs : {},dataUrl : 'policy.do?reqCode=queryZcxd'}),root : zcxdRoot,autoScroll : true,animate : false,useArrows : false,border : false});zcxdTree.on('checkchange', function(node) {if (!node.isLeaf())return false;});var comboxAb005 = new Ext.form.ComboBox({name : 'ab005',store : new Ext.data.SimpleStore({fields : [],data : [[]]}),editable : false,value : ' ',fieldLabel : '政策向导',anchor : '100%',mode : 'local',triggerAction : 'all',maxHeight : 200,// 下拉框的显示模板,addDeptTreeDiv作为显示下拉树的容器tpl : "<tpl for='.'><div style='height:200px'><div id='ab005TreeDiv'></div></div></tpl>",allowBlank : false,onSelect : Ext.emptyFn});comboxAb005.on('expand', function() {// 将UI树挂到treeDiv容器zcxdTree.render('ab005TreeDiv');// addDeptTree.root.expand(); //只是第一次下拉会加载数据zcxdTree.root.reload(); // 每次下拉都会加载数据});comboxAb005.on('collapse', function() {var checkedNodes = zcxdTree.getChecked();if (Ext.isEmpty(checkedNodes)) {Ext.Msg.alert('提示', '请选择政策向导分类...');return;}var strID = '';var strText = '';Ext.each(checkedNodes, function(node) {strID = strID + node.attributes.id + ',';strText = strText + node.attributes.text + ',';});comboxAb005.setValue(strText);});

实现效果截图

===============开源平台分享==============

= G4Studio：JavaEE行业应用二次快速开发平台

= 项目主页： http://g4studio-share.g4it.org

= 在线演示： http://g4studio-demo.g4it.org

======================================