自定义ExtJS控件之下拉树和下拉表格附源码

自定义ExtJS控件之下拉树和下拉表格附源码_extjs

WBOY

发布： 2016-05-16 17:19:55

原创

1215 人浏览过

简介

在Ext官方的例子中只有下拉列表控件，但是在实际业务中只有下拉列表无法满足需求的，像下拉树和下拉表格都是很常见的控件，对于刚使用Ext的人来说，自定义一个控件好难，其实多读官方的源码有些事情就不会那么难了。下面是下拉树的代码：

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

multiSelect : true, 

createPicker : function(){ 
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 
}); 
//注册事件用于选择用户选择的值 
me.mon(picker, { 
itemclick: me.onItemClick, 
refresh: me.onListRefresh, 
scope: me 
}); 

me.mon(picker.getSelectionModel(), { 
beforeselect: me.onBeforeSelect, 
beforedeselect: me.onBeforeDeselect, 
selectionchange: me.onListSelectionChange, 
scope: 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, 
selection = me.picker.getSelectionModel().getSelection(), 
valueField = me.valueField; 

if (!me.multiSelect && selection.length) { 
if (record.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？'简单'：'单'
}，
浮动：true，
隐藏：true，
宽度：300，
列行：true，
 focusOnToFront: false 
}); 
me.mon(picker, { 
itemclick: me.onItemClick, 
刷新: me.onListRefresh, 
范围: me 
}); 🎜>
me.mon(picker.getSelectionModel(), { 
选择前: me.onBeforeSelect, 
取消选择前: me.onBeforeDeselect, 
selectionchange: me.onListSelectionChange, 
范围: me 
}); 
this.picker; 
返回选择器; 
}, 

onItemClick: function(picker, record){ 
/* 
* If我们正在进行单选，当 
* 单击所选元素时，选择更改事件不会触发。在这里检测一下。 
*/ 
var me = this, 
selection = me.picker.getSelectionModel().getSelection(), 
valueField = me.valueField; 

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

matchFieldWidth : false, 

onListSelectionChange: function(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.fireEvent('select', me, selectedRecords); 
} 
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); 
} 
} 
} 


}）； 

 