eXtjs4下拉树支持单选复选级联选择 [复制链接]
效果图.
-
不带checked的json数据格式只支持单选
-
带jchecked的json数据的单选
-
带checked的json数据的多选,可支持级联操作,级联分为级联父节点,级联子节点,两者都级联
封装基类代码:comboxtree.js
[html]view plaincopy
-
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);
-
}
-
}
-
}
-
});
调用方法[html]view plaincopy
-
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格式的数据
一,不带复选框的数据
[html] view plaincopy
[{
"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
}]
}]
二.带复选框的数据
[html] view plaincopy
[{
"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
}]
}]
本文转自yunlielai51CTO博客,原文链接:http://blog.51cto.com/4925054/1281319,如需转载请自行联系原作者