自訂ExtJS控制項之下拉樹和下拉表格附原始碼_extjs

簡介

在Ext官方的例子中只有下拉列表控件，但是在實際業務中只有下拉列表無法滿足需求的，像下拉樹和下拉表格都是很常見的控件，對於剛使用Ext的人來說，自訂一個控制項好難，其實多讀官方的原始碼有些事情就不會那麼難了。下面是下拉樹的程式碼：

複製程式碼 程式碼如下:

Ext.define(' ComboTreeBox',{
extend : 'Ext.form.field.ComboBox',

multiSelect : true,

createPicker : function(){
var me = this var me = this
//建立樹控制
var picker = Ext.create('Ext.tree.Panel', {
store: me.store,
rootVisible: false,
selModel: {
mode: me.multiSelect ? 'SIMPLE' : 'SINGLE'
},
floating: true,
hidden: true,
focusOnToFront: false
hidden: true,
focusOnToFront: false
})
); >//註冊事件用於選擇使用者選擇的值
me.mon(picker, {
itemclick: me.onItemClick,
refresh: me.onListRefresh,
scope: me
} );

me.mon(picker.getSelectionModel(), {
beforeselect: me.onBeforeSelect,
beforedeselect: me.onBeforeDeselect,
selectionchange: scocm.St. : me
});
this.picker = picker;
return picker;
},

onItemClick: function(picker, record){
/*
/* * If we're doing single selection, the selection change events won't fire when
* clicking on the selected element. Detect it here.
*/
var me = this. = me.picker.getSelectionModel().getSelection(),
valueField = me.valueField;

if (!me.multiSelect && selection.length) {
if (!me.multiSelect && selection.length) {
if (!me.get(valueField. ) === selection[0].get(valueField)) {
// Make sure we also update the display value if it's only partial
me.displayTplData = [record.data];
me. setRawValue(me.getDisplayValue());
me.collapse();
}
}
}
});

下拉樹的程式碼很簡單，只要整合Ext.form.field.ComboBox類，然後重寫createPicker方法就可以了，同理下拉表格也是如此，以下是下拉表格的程式碼：

複製程式碼

程式碼如下:

Ext.define('ComboGridBox',{
extend : 'Ext.form.field.ComboBox',

multiSelect : true,

createPicker : function( ){
var me = this

var picker = Ext.create('Ext.grid.Panel', {
title : '下拉表格',
store: me.store ,
框架：true，
可調整大小：true，
列：[{
文字：'#ID'，
dataIndex：'id'
}，{
文字: '名稱' ,
dataIndex : '名稱'
},{
text : '描述' ,
dataIndex : 'desc'
}],
selModel: {
模式：me.multiSelect？ 🎜> focusOnToFront: false
});
me.mon(picker, {
itemclick: me.onItemClick,
刷新: me.onListRefresh,
範圍: me ; 🎜>
me.mon(picker。範圍: me
});
this.picker;
返回選擇器;
},

onItemClick: function(picker, record){
/*
* If我們正在進行單選，當
* 點擊所選元素時，選擇更改事件不會觸發。 = me.picker.getSelectionModel().getSelection(),
valueField = me.valueField;

if (!me.multiSelect && Selection.length) {
if (record.get(valueField.get(valueField. ) === Selection[0].get(valueField)) {
// 確保如果顯示值只是部分內容，我們也會更新
me.displayTplData = [record.data];
me. setRawValue(me.getDisplayValue());
me.collapse();
}
}
},

matchFieldWidth : false,

matchFieldWidth : false,
(list, selectedRecords) {
var me = this,
isMulti = me.multiSelect,
hasRecords = selectedRecords.length > > 0;
// 僅當未從setValue 選擇時才對選擇做出反應
// 展開（忽略其他地方觸發的對選擇模型的更改）
if (!me.ignoreSelection && me. isExpanded) {
if (!isMulti) {
Ext .defer(me.collapse, 1, me);
}
/*
* 僅當我們處於多選模式或有
* 一個選擇時才在此處設定值。否則 setValue 將使用空值
* 調用，這將導致更改事件觸發兩次。
*/
if (isMulti || hasRecords) {
me.setValue(selectedRecords, false);
}
if (hasRecords) { }
me.inputEl.focus();
}
console.log(me.getValue());
},

doAutoSelect: function() {
var me = this,
picker = me.picker,
lastSelected, itemNode;
if (picker && me.autoSelect && me.store.getCount() > 0 ) {
// 反白最後選定的項目並將其捲動至視圖
lastSelected = picker.getSelectionModel().lastSelected ;
itemNode = picker.view.getNode(lastSelected || 0);
if (itemNode) {
picker.view.highlightItem(itemNode);
picker.view.el.scrollChildIntoView(itemNode, false);
}
}
}
}
) >

}）；


下拉表格也繼承了Ext.form.field.ComboBox這個類，重寫了createPicker方法。

開發下拉樹和下拉表格看起來很容易，只需研究透了Ext的運行機制一切，都會so easy


控制效果


 

實例下載


實例中的資源為myeclipse，專案導入即可運行，自己新增ext的js和css文件，實例中沒有ext的基礎檔。

下載位址