初学EXTjS,代码参照了很多帖,忙活了一天,代码写的比较简单,容易看懂.
本下拉树支持带复选框和不带复选框的JSON数据的,带复选框的下拉树也实现了单选功能,只需配置一下即可!
效果图.
不带checked的json数据格式只支持单选
带jchecked的json数据的单选
带checked的json数据的多选,可支持级联操作,级联分为级联父节点,级联子节点,两者都级联
封装基类代码
:comboxtree.js
Ext.define("Ext.ux.comboboxtree", {extend: "Ext.form.field.Picker",requires: ["Ext.tree.Panel"],initComponent: function() {var self = this;Ext.apply(self, {fieldLabel: self.fieldLabel,labelWidth: self.labelWidth});self.callParent();},createPicker: function() {var self = this;var store = Ext.create(‘Ext.data.TreeStore’, {proxy: {type: ‘ajax’,url: self.storeUrl},sorters: [{property: ‘leaf’,direction: ‘ASC’},{property: ‘text’,direction: ‘ASC’}],root: {id: self.rootId,text: self.rootText},nodeParameter: self.treeNodeParameter});self.picker = new Ext.tree.Panel({height: 300,autoScroll: true,floating: true,focusOnToFront: false,shadow: true,ownerCt: this.ownerCt,useArrows: true,store: store,rootVisible: false});self.picker.on({checkchange: function(record, checked) {var checkModel = self.checkModel;if (checkModel == ‘double’) {var root = self.picker.getRootNode();root.cascadeBy(function(node) {if (node.get(‘text’) != record.get(‘text’)) {node.set(‘checked’, false);}});if (record.get(‘leaf’) && checked) {self.setRawValue(record.get(‘id’)); // 隐藏值self.setValue(record.get(‘text’)); // 显示值} else {record.set(‘checked’, false);self.setRawValue(”); // 隐藏值self.setValue(”); // 显示值}} else {var cascade = self.cascade;if (checked == true) {if (cascade == ‘both’ || cascade == ‘child’ || cascade == ‘parent’) {if (cascade == ‘child’ || cascade == ‘both’) {if (!record.get("leaf") && checked) record.cascadeBy(function(record) {record.set(‘checked’, true);});}if (cascade == ‘parent’ || cascade == ‘both’) {pNode = record.parentNode;for (; pNode != null; pNode = pNode.parentNode) {pNode.set("checked", true);}}}} else if (checked == false) {if (cascade == ‘both’ || cascade == ‘child’ || cascade == ‘parent’) {if (cascade == ‘child’ || cascade == ‘both’) {if (!record.get("leaf") && !checked) record.cascadeBy(function(record) {record.set(‘checked’, false);});}}}var records = self.picker.getView().getChecked(),names = [],values = [];Ext.Array.each(records,function(rec) {names.push(rec.get(‘text’));values.push(rec.get(‘id’));});self.setRawValue(values.join(‘;’)); // 隐藏值self.setValue(names.join(‘;’)); // 显示值}},itemclick: function(tree, record, item, index, e, options) {var checkModel = self.checkModel;if (checkModel == ‘single’) {if (record.get(‘leaf’)) {self.setRawValue(record.get(‘id’)); // 隐藏值self.setValue(record.get(‘text’)); // 显示值} else {self.setRawValue(”); // 隐藏值self.setValue(”); // 显示值}}}});return self.picker;},alignPicker: function() {var me = this,picker, isAbove, aboveSfx = ‘-above’;if (this.isExpanded) {picker = me.getPicker();if (me.matchFieldWidth) {picker.setWidth(me.bodyEl.getWidth());}if (picker.isFloating()) {picker.alignTo(me.inputEl, "", me.pickerOffset); // ""->tlisAbove = picker.el.getY() < me.inputEl.getY();me.bodyEl[isAbove ? ‘addCls’: ‘removeCls’](me.openCls + aboveSfx);picker.el[isAbove ? ‘addCls’: ‘removeCls’](picker.baseCls + aboveSfx);}}}});调用方法Ext.onReady(function() {var com = Ext.create("Ext.ux.comboboxtree", {id : ‘name’,name : ‘name’,hiddenName : ‘hiddenName’,storeUrl : ‘data/tree2.json’,cascade : ‘child’,//级联方式:1.child子级联;2.parent,父级联,3,both全部级联checkModel:’single’,//当json数据为不带checked的数据时只配置为single,带checked配置为double为单选,不配置为多选width : 270,fieldLabel : ‘单位树’,labelWidth : 60,rootId : ‘1’,rootText : ‘DRP’,treeNodeParameter : ”,renderTo : Ext.getBody()});});两种json格式的数据一,不带复选框的数据[{"text": "To Do","cls": "folder","expanded": true,"children": [{"text": "Go jogging","leaf": true},{"text": "Take a nap","leaf": true},{"text": "Climb Everest","leaf": true}]},{"text": "Grocery List","cls": "folder","children": [{"text": "Bananas","leaf": true},{"text": "Milk","leaf": true},{"text": "Cereal","leaf": true},{"text": "Energy foods","cls": "folder","children": [{"text": "Coffee","leaf": true},{"text": "Red Bull","leaf": true}]}]},{"text": "Remodel Project","cls": "folder","children": [{"text": "Finish the budget","leaf": true},{"text": "Call contractors","leaf": true},{"text": "Choose design","leaf": true}]}]
二.带复选框的数据切忌贪婪，恨不得一次玩遍所有传说中的好景点，
