Ext JS4百强应用: combobox+tree下拉树 支持单选多选级联选择 --第7强
2013-06-20 11:16
453 查看
本下拉树支持带复选框和不带复选框的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()
});
});
[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
}]
}]
效果图.
不带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] viewplaincopy
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] viewplaincopy
[{
"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] viewplaincopy
[{
"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
}]
}]
相关文章推荐
- EXTjS4下拉树 支持单选多选级联选择 comboxtree
- 支持单选,多选,还可以限制选择的数量的android流式布局
- EXT2.0 checkbox树的扩展(支持单选,级联多选,只选叶子等)
- eXtjs4下拉树支持单选复选级联选择 [复制链接]
- EXT2.0 checkbox树的扩展(支持单选,级联多选,只选叶子等)
- 关于VS2005中GridView的自定义分页,单选、多选、排序、自增列的简单应用(转载的)
- 各种对话框的实现(文字对话框,选择对话框,弹出输入对话框,单选,多选对话框,自定义对话框)
- 实例:GridView实现CheckBox的多选或单选,并根据所选择的行进行数据操作
- 关于VS2005中GridView的自定义分页,单选、多选、排序、自增列的简单应用
- 实现多功能的表格的各行选择变色(点击、单选、多选)
- 弹出文件选择对话框(支持多选)
- GridView中自定义分页、单选、多选、排序、自增列的简单应用
- 关于VS2005中GridView的自定义分页,单选、多选、排序、自增列的简单应用
- 关于GridView中自定义分页、单选、多选、排序、自增列的简单应用(转,非常的棒)
- Android通过WebView选择文件上传(支持直接调起相机等应用)
- Webform之Repeater中的单选和多选的应用以及前段JS的实现
- 关于GridView中自定义分页、单选、多选的简单应用
- ExtJS入门教程08,grid单选、多选,显示选择框列
- flex菜单同步选择单选“综合应用”
- JQuery下拉框插件(selectbox),支持多选和单选