ext4下拉樹選項框comboboxtree(支援非同步載入子節點)
阿新 • • 發佈:2019-02-12
ext版本:4
簡介:支援多選、單選、非同步載入子節點(當然一下子拼接好全部節點的json也是絕對沒問題的),(已測試通過)瀏覽器相容ie8、ie11、谷歌、FF。
轉載請說明出處:http://blog.csdn.net/seedingly/article/details/19168721
最終的js程式碼:
Ext.define("Ext.ux.comboboxtree", { extend : "Ext.form.field.Picker", alias: ['widget.comboboxtree'], requires : ["Ext.tree.Panel"], store:{}, treePanel: {}, config: { maxPickerWidth: 200, maxPickerHeight: 200, minPickerHeight: 100 }, initComponent : function() { var self = this; Ext.apply(self, { fieldLabel : self.fieldLabel, labelWidth : self.labelWidth }); self.callParent(); this.treePanel = Ext.create('Ext.tree.Panel',{ width: self.maxPickerWidth, height:self.maxPickerHeight, autoScroll : true, floating : true, focusOnToFront : false, shadow : false, useArrows : true, store : this.store, rootVisible : false, listeners:{ 'itemclick' : function(view,record,item,index,e,eOpts){ self.setRawValue(record.get('id'));// 真值 self.setValue(record.get('id'));// 顯示值 self.collapse();//self.picker.hide(); } } }); // this.treePanel.on('itemclick', function (view, record) { // self.setRawValue(record.get('id'));// 真值 // self.setValue(record.get('id'));// 顯示值 // self.collapse();//self.picker.hide(); // }); this.treePanel.on("beforeload", function(ds, opration, opt) { opration.params.comboTreetext = opration.node.data.text; opration.params.comboTreeid = opration.node.data.id; }); }, createPicker : function() { var self = this; self.picker = this.treePanel; self.picker.on({ checkchange : function() { var records = self.picker.getView().getChecked(), names = [], values = []; Ext.Array.each(records, function(rec) { values.push(rec.get('id')); names.push(rec.get('id'));//rec.get('text') }); self.setRawValue(values.join(';'));// 真值 self.setValue(names.join(';'));// 顯示值 self.picker.hide(); //[目前單選,該批次程式碼、treePanel的itemclick事件去掉則多選] Ext.Array.each(records, function(record) {//[目前單選,該批次程式碼、treePanel的itemclick事件去掉則多選] record.set('checked', false); //[目前單選,該批次程式碼、treePanel的itemclick事件去掉則多選] }); //[目前單選,該批次程式碼、treePanel的itemclick事件去掉則多選] }, beforerender : function(){self.store.load();} //[每次開啟該下拉框是,重新載入store,刪掉則不會重新載入!] }); 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); } } } });
呼叫示例(form表單內呼叫):
{ xtype: 'comboboxtree', name: 'comboboxtree', fieldLabel: '下拉樹示例',id:'comboboxtree',anchor:'100%', maxPickerHeight:160, store: Ext.create('Ext.data.TreeStore', { root: { text:'全國', id:'-1', //icon:fullpath+'/icons/home_page_icon/home.gif', expanded : false }, proxy: { type: 'ajax', url: fullpath+'/systemextend/UserZoneAction!getAllUserZoneTree.do' } }) }
其中,url請求後臺,返回的json如下(java程式碼,無論是非同步載入整個樹還是載入子節點,返回的都要注意按照下面的json格式哦):
StringBuffer jsons = new StringBuffer("["); jsons.append("{ text: '全國' ,id:'-1' ,checked: false ,leaf: false ,expanded: true ,children: [{ text: '111' ,id:'EXAMLIB0000111' ,checked: false ,leaf: true},{ text: '222' ,id:'EXAMLIB0000222' ,checked: false ,leaf: true},{ text: '333' ,id:'EXAMLIB0000333' ,checked: false ,leaf: true},{ text: '444' ,id:'EXAMLIB0000444' ,checked: false ,leaf: true},{ text: '555' ,id:'EXAMLIB0000555' ,checked: false ,leaf: true},{ text: '666' ,id:'EXAMLIB0000666' ,checked: false ,leaf: true},{ text: '777' ,id:'EXAMLIB0000777' ,checked: false ,leaf: true},{ text: '888' ,id:'EXAMLIB0000888' ,checked: false ,leaf: true},{ text: '999' ,id:'EXAMLIB0000999' ,checked: false ,leaf: true}]}"); jsons.append("]");
圖示如下(圖示是個親測示例,效果還可以嘛,最後應用到了三級可非同步載入子節點的區域下拉樹選項框):
注意事項:若出現“Uncaught TypeError: Cannot read property 'internalId' of undefined”的錯誤,請檢查返回的json的id值!使用前建議結合瀏覽器的除錯工具測試哦。
心得:ext4重寫控制元件,可以歸納為重寫extjs類吧。這方面加強學習,設計起來就能夠得心應手了。該下拉樹用到picker,define了該類的createPicker屬性(第38行),“self.picker = this.tree;”這句程式碼定義了該控制元件的選項框,請重點關注!小頂一下。