EXTjS 4 드 롭 다운 트 리 지원
이 드 롭 다운 트 리 는 체크 상자 와 체크 상자 가 없 는 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 형식의 데이터
1. 체크 상자 가 없 는 데이터
[{
"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
}]
}]2. 복선 상자 가 있 는 데이터
[{
"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
}]
}]도움 이 된다 면 응원 해 주세요. 불완전한 부분도 있 을 수 있 습 니 다. 개선 을 환영 합 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
