ソースコード_extjs を使用したカスタマイズされた ExtJS コントロールのドロップダウン ツリーとドロップダウン テーブル

はじめに

公式の Ext サンプルにはドロップダウン リスト コントロールしかありませんが、実際のビジネスではドロップダウン リストだけではニーズを満たすことができません。 -down テーブルは非常に一般的なコントロールですが、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,
スコープ: 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){
/*
* 単一選択を行っている場合、
* ここで選択された要素をクリックしても、選択変更イベントは発生しません。
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 = [レコード.データ]; setRawValue(me.getDisplayValue());
}
}
; >

ドロップダウン ツリーのコードは非常に単純で、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、
列 : [{
text : '#ID'、
dataIndex : 'id'
}、{
text : '名前' ,
dataIndex : 'name'
},{
text : '説明' ,
dataIndex : 'desc'
}],
selModel: {
モード: me.multiSelect ? 'SIMPLE' : 'SINGLE'
}、
floating: true、
hidden: true、
width : 300、
columnLines : 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 = ピッカー;
},

onItemClick: function(picker, Record){
/*
*単一選択を行っているため、選択した要素を
* クリックしても選択変更イベントは発生しません。ここで検出してください。
*/
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 は空の値
* で呼び出され、変更イベントが 2 回発生します。
*/
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);
}
}
}


});


下拉表クラスも Ext.form.field.ComboBox から継承されており、createPicker メソッドを再書き込みしています。了Ext的运行机制，一切都会so easy

控件效果




实例下ダウンロード

例のソースは myeclipse で、すぐに実行できる、ext のベース ファイルが追加されていない js および css ファイルが例に含まれています。