EXTjS4下拉树 支持单选多选级联选择 comboxtree

初学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); // ""->tl
isAbove = 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

}]
}]

二.带复选框的数据

[{
"text": "To Do",
"cls": "folder",
"expanded": true,
"children": [{
"text": "Go jogging",
"leaf": true,
"checked": true
},{
"text": "Take a nap",
"leaf": true,
"checked": false
},{
"text": "Climb Everest",
"leaf": true,
"checked": false
}]
},{
"text": "Grocery List",
"cls": "folder",
"children": [{
"text": "Bananas",
"leaf": true,
"checked": false
},{
"text": "Milk",
"leaf": true,
"checked": false
},{
"text": "Cereal",
"leaf": true,
"checked": false
},{
"text": "Energy foods",
"cls": "folder",
"children": [{
"text": "Coffee",
"leaf": true,
"checked": false
},{
"text": "Red Bull",
"leaf": true,
"checked": false
}]
}]
},{
"text": "Remodel Project",
"cls": "folder",
"children": [{
"text": "Finish the budget",
"leaf": true,
"checked": false
},{
"text": "Call contractors",
"leaf": true,
"checked": false
},{
"text": "Choose design",
"leaf": true,
"checked": false
}]
}]

如果有帮助记得支持一下哦,可能也有不完善的地方欢迎改进!