Extjs의 ComboBoxTree로 구현된 드롭다운 상자 트리 효과(자체 작성)_extjs

최근 참여한 프로젝트에서 ComboBoxTree의 효과를 구현해야 하는데 먼저 효과를 살펴보겠습니다...

Extjs에는 그런 효과가 없어서 작성하게 되었습니다. 직접 보고 인터넷에서 보시고 다른 분들의 정보를 보고 제가 직접 정리해서 수정했습니다.

코드를 복사하세요 코드는 다음과 같습니다.

Ext.ux.TreeCombo = Ext.extend(Ext.form.ComboBox, {
생성자: 함수(cfg) {
cfg = cfg || {};
Ext.ux.TreeCombo.superclass.constructor.call(this, Ext.apply({
maxHeight: 300,
editable: false,
mode : 'local',
triggerAction: 'all',
rootVisible: false,
selectMode: 'all'
}, cfg))
},
store: new Ext .data.SimpleStore({
fields: [],
data: [[]]
}),
// 트리 노드를 확장해도 드롭다운 상자가 닫히지 않도록 onViewClick을 다시 작성합니다.
onViewClick: 함수(doFocus) {
var index = this .view.getSelectedIndexes()[0], s = this.store, r = s.getAt(index)
if (r) {
this.onSelect(r, index);
}
if (doFocus !== false) {
this.el.focus()
}
},
tree: null,
// 숨겨진 값
hiddenValue: null,
getHiddenValue: function () {
return this.hiddenValue;
},
getValue: function () { //적용성을 높였습니다.
return this.hiddenValue;
},
setHiddenValue: function(code, dispText) {
this.setValue(code); .form.ComboBox.superclass.setValue.call(this, dispText);
this.hiddenValue = code;
},
initComponent: function () {
var _this = this; var tplRandomId = 'deptcombo_' Math.floor(Math.random() * 1000 ) this.tplId
this.tpl = "

"
this.tree = new Ext.tree.TreePanel({
border: false,
enableDD: false,
enableDrag: false,
rootVisible: _this.rootVisible || false,
autoScroll: true,
trackMouseOver: true,
height: _this.maxHeight,
lines: true,
singleExpand: true,
root: new Ext.tree.AsyncTreeNode({
id: _this.rootId,
text: _this.rootText,
iconCls: 'ico-root',
expanded: true,
leaf: false,
border: false,
draggable: false,
SingleClickExpand: false,
hide: true
}),
loader: new Ext.tree.TreeLoader({
nodeParameter : 'ID',
requestMethod: 'GET',
dataUrl: _this.url
})
})
this.tree.on('click', function (node) {
if ((_this.selectMode == 'leaf' && node .leaf == true) || _this.selectMode == 'all') {
if (_this.fireEvent('beforeselect', _this, node)) {
_this.fireEvent('select', _this, node);
}
}
})
this.on('select', function(obj, node) ) {
var dispText = node.text;
var code = node.id;
obj.setHiddenValue(code, dispText)
obj.collapse()
}; 🎜>this.on('expand', function () {
this.tree.render(tplRandomId);
})
Ext.ux.TreeCombo.superclass.initComponent.call(this);
}
})
Ext.reg(" treecombo", Ext.ux.TreeCombo)


그런 다음 Extjs 클래스 라이브러리를 추가하세요

코드 복사 코드는 다음과 같습니다.

그 중 login.js의 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다

/* 파일 생성일: 2013년 5월 27일 */
Ext.onReady(function () {
var _window = new Ext.Window({
title: "Query Condition" ,
renderTo: Ext.getBody(),
frame: true,
plain: true,
buttonAlign: "center",
closeAction: "hide",
maximized: true ,
닫을 수 있음: true,
bodyStyle: "padding:20px",
너비: 350,
높이: 300,
레이아웃: "form",
lableWidth: 110,
기본값: { xtype: "textfield", 너비: 180 },
items: [
{
fieldLabel: "Case Number",
anchor: "100%"
},
{
xtype: "datefield",
fieldLabel: "사고 시간",
anchor: "100%"
},
{
fieldLabel: "reporter",
anchor: "100%"
},
{
fieldLabel: "보고된 단위 또는 개인",
anchor: "100%"
},
{
xtype: "treecombo",
fieldLabel: "사건이 발생한 곳",
anchor: "100%",
url: "http://localhost:1502/treeData.ashx"/ //
},
{
xtype: "treecombo",
fieldLabel: "케이스 유형",
anchor: " 100%",
url: "http://localhost:1502/window/ajwflx.ashx"
},
{
xtype: "treecombo",
fieldLabel: " 특성 케이스",
앵커: "100%",
url: "http://localhost:1502/window/ajwfxz.ashx"
}
],
버튼: [{ text: "OK" }, { text: "Cancel", handler: function () { _window.hide() } }]
})
_window.show()
})

treedata.ashxd 내용은

코드 복사 코드는 다음과 같습니다

string strTreeNode = "["
"{'id':150100,'leaf':false,expanded:false,'text':'후허하오터 토지자원국','children':[ "
"{'id':150101,'leaf':true,'children':null,'text':'지방 토지자원국'},"
"{'id':150102, ' leaf':true,'children':null,'text':'Xincheng District Land and Resources Bureau'},"
"{'id':150103,'leaf':true,'children':null, 'text':'후이민구 토지자원국'},"
"{'id':150104,'leaf':true,'children':null,'text':'위취안구 토지자원국' },"
"{'id':150105,'leaf':true,'children':null,'text':'사이한 지구 토지자원국'},"
"{'id': 150121,'leaf':true,'children':null,'text':'Tumut Left Banner 토지 자원국'},"
"{'id':150122,'leaf':true,'children' :null, 'text':'토케투오 카운티 토지자원국'},"
"{'id':150123,'leaf':true,'children':null,'text':'헬링거 카운티 토지자원 Bureau'},"
"{'id':150124,'leaf':true,'children':null,'text':'Qingshuihe County Land and Resources Bureau'},"
"{' id ':150125,'leaf':true,'children':null,'text':'우촨현 토지자원국'}"
"]},"
"{'id':150200,' leaf':false,expanded:false,'text':'바오터우시 토지자원국','children':["
"{'id':150201,'leaf':true,'children':null , 'text':'시 지구 토지자원국'},"
"{'id':150202,'leaf':true,'children':null,'text':'동허 지구 토지자원국 '} ,"
"{'id':150203,'leaf':true,'children':null,'text':'쿤둘룬 지구 토지자원국'},"
"{'id' : 150204,'leaf':true,'children':null,'text':'Qingshan District Land and Resources Bureau'},"
"{'id':150205,'leaf':true,'children' :null ,'text':'시과이 지구 토지자원국'},"
"{'id':150206,'leaf':true,'children':null,'text':'바이윈 광산 지구 토지 and Resources Bureau' },"
"{'id':150207,'leaf':true,'children':null,'text':'Jiuyuan District Land and Resources Bureau'},"
"{ 'id': 150221,'leaf':true,'children':null,'text':'Tumut Right Banner 토지 자원국'},"
"{'id':150222,'leaf':true ,'children':null,'text':'구양현 토지자원국'},"
"{'id':150223,'leaf':true,'children':null,'text':' Darkhan Maoming Anlian United Banner Land and Resources Bureau'}"
"]},"
"{'id':150300,'leaf':false,expanded:false,'text':'우하이 도시 토지 및 자원국' ,'children':["
"{'id':150301,'leaf':true,'children':null,'text':'지방 토지자원국'},"
"{' id':150302,'leaf':true,'children':null,'text':'Haibo Bay District Land and Resources Bureau'},"
"{'id':150303,'leaf ':true, 'children':null,'text':'하이난구 토지자원국'},"
"{'id':150304,'leaf':true,'children':null,'text ':'오다구 토지자원국'}"
"]},"
"{'id':150400,'leaf':false,expanded:false,'text':'츠펑시 토지 및 자원국','어린이':["
"{'id':150401,'leaf':true,'children':null,'text':'지방 토지자원국'},"
"{'id': 150402,'leaf':true,'children':null,'text':'홍산구 토지자원국'},"
"{'id':150403,'leaf' :true,'children':null ,'text':'Yuanbaoshan District Land and Resources Bureau'},"
"{'id':150404,'leaf':true,'children':null,'text' :'송산구 토지자원국'} ,"
"{'id':150421,'leaf':true,'children':null,'text':'Aruhorqin Banner Land and Resources Bureau'},"
"{'id': 150422,'leaf':true,'children':null,'text':'바레인 좌익 배너 토지 및 자원국'},"
"{'id':150423, 'leaf':true,'children': null,'text':'바레인 우익 토지자원국'},"
"{'id':150424,'leaf':true,'children':null ,'text':'린시현 토지자원국'},"
"{'id':150425,'leaf':true,'children':null,'text':'Keshiketeng Banner 토지자원국 '},"
"{ 'id':150426,'leaf':true,'children':null,'text':'Wengniute Banner 토지 자원국'},"
"{'id' :150428,'leaf':true ,'children':null,'text':'Haraqin Banner 토지 자원국'},"
"{'id':150429,'leaf':true,'children' :null,'text': '닝청 현 토지자원국'},"
"{'id':150430,'leaf':true,'children':null,'text':'Aohan Banner Land and 자원국'}"
"]},"
"{'id':150500,'leaf':false,expanded:false,'text':'퉁랴오시 토지자원국','children ':["
"{ 'id':150501,'leaf':true,'children':null,'text':'지방 토지자원국'},"
"{'id' :150502,'leaf':true,' children':null,'text':'Horqin District Land and Resources Bureau'},"
"{'id':150521,'leaf':true,'children' :null,'text':'Horqin 좌익 센터 배너 토지 및 자원국'},"
"{'id':150522,'leaf':true,'children':null,'text':'Horqin 좌익 허우 배너 토지 및 자원국'},"
"{'id':150523,'leaf':true,'children':null,'text':'Kailu County Land and Resources Bureau'}, "
"{'id':150524,'leaf': true,'children':null,'text':'Kulun Banner Land and Resources Bureau'},"
"{'id':150525, 'leaf':true,'children':null,'text':' Naiman Banner 토지자원국'},"
"{'id':150526,'leaf':true,'children':null, 'text':'Zalut Banner 토지 및 자원국'},"
" {'id':150581,'leaf':true,'children':null,'text':'Holingol City Land and Resources Bureau' }"
"]},"
"{'id ':150600,'leaf':false,expanded:false,'text':'오르도스 토지자원국','children':["
"{'id':150602,'leaf':true,' children':null,'text':'동성구 토지자원국'},"
"{'id':150621,'leaf ':true,'children':null,'text':'Dala 특별 배너 토지 자원국'},"
"{'id':150622,'leaf':true,'children':null,' text':'중가르 배너 토지자원국'},"
"{'id':150623,'leaf':true,'children':null,'text':'Otok Qian Banner 토지 자원국'},"
"{'id' : 150624,'leaf':true,'children':null,'text':'Otuoke Banner 토지 자원국'},"
"{'id':150625,'leaf':true,'children ': null,'text':'항진 배너 토지자원국'},"
"{'id':150626,'leaf':true,'children':null,'text':'우센 배너 토지자원국 '},"
"{'id':150627,'leaf':true,'children':null,'text':'에진홀로 배너 토지자원국'}"
"] },"
"{'id':150700,'leaf':false,expanded:false,'text':'후룬베이얼시 토지자원국','children':["
"{'id' :150701, 'leaf':true,'children':null,'text':'지방 토지자원국'},"
"{'id':150702,'leaf':true,'children': null, 'text':'하일라얼 지구 토지자원국'},"
"{'id':150721,'leaf':true,'children':null,'text':'Arong Banner 토지자원국' } ,"
"{'id':150722,'leaf':true,'children':null,'text':'모리다와 다우르 자치 배너 토지 자원국'},"
"{ 'id ':150723,'leaf':true,'children':null,'text':'오로켄 자치 깃발 토지 자원국'},"
"{'id':150724,'leaf':true, ' children':null,'text':'Ewenki 자치 깃발 토지 자원국'},"
"{'id':150725,'leaf':true,'children':null,'text':' Chen Barhu 배너 토지 및 자원국'},"
"{'id':150726,'leaf':true,'children':null,'text':'New Barhu Left Banner 토지 및 자원국'}, "
"{'id':150727,'leaf':true,'children':null,'text':'New Barhu Right Banner Land and Resources Bureau'},"
"{'id': 150781 ,'leaf':true,'children':null,'text':'Manzhouli 토지자원국'},"
"{'id':150782,'leaf':true,'children':null , 'text':'야케시시 토지자원국'},"
"{'id':150783,'leaf':true,'children':null,'text':'잘란툰시 토지자원자원국 '},"
"{'id':150784,'leaf':true,'children':null,'text':'에르군 시 토지자원국'},"
" {'id' :150785,'leaf':true,'children':null,'text':'겐허시 토지자원국'}"
"]},"
"{'id': 150800,'leaf ':false,expanded:false,'text':'Bayannur City Land and Resources Bureau','children':["
"{'id':150801,'leaf':true,' children':null, 'text':'시 지구 토지 자원국'},"
"{'id':150802,'leaf':true,'children':null,'text':'린허 지구 토지 자원 자원국 '},"
"{'id':150821,'leaf':true,'children':null,'text':'Wuyuan County Land and Resources Bureau'},"
"{' id' :150822,'leaf':true,'children':null,'text':'Dengkou 현 토지자원국'},"
"{'id':150823,'leaf':true,' children' :null,'text':'Urad Front Banner 토지 자원국'},"
"{'id':150824,'leaf':true,'children':null,'text':'Urad Tezhong Banner 토지자원국'},"
"{'id':150825,'leaf':true,'children':null,'text':'Uradhou Banner 토지자원국'},"
" {'id':150826,'leaf':true,'children':null,'text':'Hangjinhouqi 토지자원국'}"
"]},"
"{'id' :150900 ,'leaf':false,expanded:false,'text':'울란카브시 토지자원국','children':["
"{'id':150901,'leaf':true ,'children' :null,'text':'시 지구 토지자원국'},"
"{'id':150902,'leaf':true,'children':null,'text':'set Ning District Land and Resources Bureau'},"
"{'id':150921,'leaf':true,'children':null,'text':'Zhuozi County Land and Resources Bureau'},"
"{ 'id':150922,'leaf':true,'children':null,'text':'Huade County Land and Resources Bureau'},"
"{'id':150923,'leaf': true, 'children':null,'text':'Shangdu County Land and Resources Bureau'},"
"{'id':150924,'leaf':true,'children':null,'text':' Xinghe 현 토지자원국'},"
"{'id':150925,'leaf':true,'children':null,'text':'량청 현 토지자원국'},"
"{'id':150926,'leaf':true,'children':null,'text':'Chahar Right Front Banner 토지 자원국'},"
"{'id':150927, 'leaf ':true,'children':null,'text':'Chahar Right Middle Banner 토지 자원국'},"
"{'id':150928,'leaf':true,'children' :null, 'text':'차하르 오른쪽 배너 토지 및 자원국'},"
"{'id':150929,'leaf':true,'children':null,'text':'Siziwang Banner Bureau of Land and Resources'},"
"{'id':150981,'leaf':true,'children':null,'text':'Fengzhen 시 토지자원국'}"
"]} ,"
"{'id':152200,'leaf':false,expanded:false,'text':'싱안연맹 토지자원국','children':["
"{' id': 152201,'leaf':true,'children':null,'text':'Ulanhot Land and Resources Bureau'},"
"{'id':152202,'leaf':true,'children ':null ,'text':'Aershan City Land and Resources Bureau'},"
"{'id':152221,'leaf':true,'children':null,'text':'Horqin Right Front 배너 토지 및 자원국'},"
"{'id':152222,'leaf':true,'children':null,'text':'Horqin Right Wing Middle Banner Land and Resources Bureau'},"
"{' id':152223,'leaf':true,'children':null,'text':'Zhalaite Banner Land and Resources Bureau'},"
"{'id':152224,' leaf':true, 'children':null,'text':'투취안현 토지자원국'}"
"]},"
"{'id':152500,'leaf':false, 확장됨:false,' 텍스트':'시링골 연맹 토지자원국','어린이':["
"{'id':152501,'leaf':true,'children':null,'text': '이렌하오터시 토지자원국'},"
"{'id':152502,'leaf':true,'children':null,'text':'시린하오터시 토지자원국'},"
"{'id': 152522,'leaf':true,'children':null,'text':'아바가 배너 토지자원국'},"
"{'id':152523,'leaf ':true,'children' :null,'text':'Sunit Left Banner 토지 및 자원국'},"
"{'id':152524,'leaf':true,'children':null,'text':'Sunit Right Banner Land and Resources Bureau'},"
"{'id' : 152525,'leaf':true,'children':null,'text':'East Ujimqin Banner Land and Resources Bureau'},"
"{'id':152526,'leaf':true, 'children' :null,'text':'서우짐친 배너 토지 및 자원국'},"
"{'id':152527,'leaf':true,'children':null,'text' :'타이푸시 배너 랜드 and Resources Bureau'},"
"{'id':152528,'leaf':true,'children':null,'text':'Xianhuang Banner Land and Resources Bureau'},"
"{ 'id':152529,'leaf':true,'children':null,'text':'Zhengxiangbaiqi 토지자원국'},"
"{'id':152530,'leaf': true,' children':null,'text':'Zhenglan Banner Land and Resources Bureau'},"
"{'id':152531,'leaf':true,'children':null,'text': 'Duolun County 토지자원국'}"
"]},"
"{'id':152900,'leaf':false,expanded:false,'text':'알샤연맹 토지자원국 ', 'children':["
"{'id':152921,'leaf':true,'children':null,'text':'Alxa Left Banner Land and Resources Bureau'},"
"{ 'id':152922,'leaf':true,'children':null,'text':'Alxa 우익 토지자원국'},"
"{'id':152923,'leaf' : true,'children':null,'text':'Ejina Banner 토지 자원국'}"
"]}"
"]";
context.Response.Write(strTreeNode);

이렇게 하면 위에서 설명한 효과가 달성됩니다...