소스 code_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,
scope: me
} );

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

onItemClick: function( 선택기, 기록){
/*
* 단일 선택을 수행하는 경우
* 선택한 요소를 클릭하면
*/ 선택 변경 이벤트가 실행되지 않습니다.
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()
}
}


드롭다운 트리의 코드는 매우 간단합니다. 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 : 'name称' ,
dataIndex : 'name'
},{
text : '描述' ,
dataIndex : 'desc'
}],
selModel: {
mode: 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;
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 = [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);
}
}
}


});

下拉表格也是继承了Ext.form.field.ComboBox这个类，开发下拉树和下拉表格看起来 so easy ，只要研究透了Ext的运行机机机机机机切机 매우 쉽습니다


控件效果
 


实例下载
myeclipse项目, 导入即可运行,自己添加ext的jshwacss文件,实例中没有ext的基础文件。

다운로드