主要自定义js文件
/** * 下拉树 */ Ext.define('TeaComboTreeBox', { extend: 'Ext.form.field.ComboBox', multiSelect: false, //控制单选,多选 fieldLabel: '责 任 班 组', emptyText: '--请选择班组--', displayField: 'text', valueField: 'text', createPicker: function () { var me = this; var store = Ext.create('Ext.data.TreeStore', { proxy: { type: 'ajax', url: 'getFirstBm.action' }, folderSort: false, autoLoad:true }); store.load(); var picker = Ext.create('Ext.tree.Panel', { store: store, listeners: {/* afteritemexpand:function(node,index,item,eOpts){ node.removeAll(); console.log(node.raw.code); Ext.Ajax.request({ url:'getSecondData.action', params:{ code:node.raw.code }, success:function(responce){ console.log(responce.responseText); node.appendChild(eval("("+responce.responseText+")")); } }) } */}, rootVisible: false, selModel: { mode: me.multiSelect ? 'SIMPLE' : 'SINGLE' }, floating: true, hidden: true, focusOnToFront: false }); me.mon(picker, { itemclick: me.onItemClick, refresh: me.onListRefresh, scope: me }); me.mon(picker.getSelectionModel(), { beforeselect: me.onBeforeSelect, beforedeselect: me.onBeforeDeselect, selectionchange: me.onListSelectionChange, scope: me }); this.picker = picker; return picker; } });在其他js中调用自定义动态树代码
var combotree = Ext.create('TeaComboTreeBox', { multiSelect: true,//可实现多选 labelWidth: 70, id: 'wz_zrbz', anchor: '96%' });后台：在service层代码
@Override public List<Map<String, Object>> getFirstBm() { List<Map<String, Object>> list = wzdjDao.getFirstBm(); getNextLevels(list); return list; } //递归调用查找所有孩子 private void getNextLevels(List<Map<String, Object>> tempList) { for (Map<String, Object> map : tempList) { if (map.get("leaf").equals("false")) { List<Map<String, Object>> nextData = wzdjDao.getSecondData((String)map.get("code")); getNextLevels(nextData); map.put("children",nextData); } } }首先，先获取父层数据
List<Map<String, Object>> list = wzdjDao.getFirstBm(); 然后，根据递归将孩子数据得到传到前台。 效果图如下