您的位置:首页 > Web前端 > JavaScript

Ext JS4百强应用: combobox+tree下拉树 支持单选多选级联选择 --第7强

2013-06-20 11:16 453 查看
本下拉树支持带复选框和不带复选框的JSON数据的,带复选框的下拉树也实现了单选功能,只需配置一下即可!

效果图.

不带checked的json数据格式只支持单选



带jchecked的json数据的单选



带checked的json数据的多选,可支持级联操作,级联分为级联父节点,级联子节点,两者都级联




封装基类代码

:ComboboxTree.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

}]

}]
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐