> 웹 프론트엔드 > JS 튜토리얼 > extjs_extjs의 그리드에 포함된 동적 콤보박스 적용

extjs_extjs의 그리드에 포함된 동적 콤보박스 적용

WBOY
풀어 주다: 2016-05-16 18:12:39
원래의
1549명이 탐색했습니다.

콤보박스 데이터 가져오기

코드 복사 코드는 다음과 같습니다.

comboDS = new Ext.data.JsonStore ({
url : 'test.do',
fields : [{
name : 'id'
}, {
name : 'display'
}]
});

콤보박스 정의
콤보박스에 id가 있어야 하며, id를 기준으로 콤보박스 값을 얻어야 합니다.
코드 복사 코드는 다음과 같습니다.

var 콤보Box = new Ext.form.ComboBox ({
id: "cb", //
typeAhead: true,
readOnly: true,
allowBlank: false,
autoScroll: true,
selectOnFocus: true,
emptyText : '선택하세요...',
store : 콤보DS,
forceSelection : true,
triggerAction : 'all',
displayField : 'display',
valueField : 'id'
});

그리드 정의:
코드 복사 코드는 다음과 같습니다. 다음과 같습니다:

ds = new Ext.data.Store({
baseparams : {
start : 0,
limit : RowCount
},
proxy : new Ext.data .HttpProxy({
url :'test2.do'
}),
reader : new Ext.data.JsonReader({
root : 'data',
totalProperty : 'totalCount'
}, [{
name : "bh"
}, {
name : "test"
}])
}); var cm = new Ext .grid.ColumnModel([new Ext.grid.RowNumberer(), {
header : "Number",
dataIndex : "bh"
}, {
header : " Test",
dataIndex : "test",
renderer : renderer,
editor : 콤보박스
}]);
grid = new Ext.grid.EditorGridPanel({
title : 'Test',
ds : ds,
cm : cm,
clicksToEdit : 1,
viewConfig : {
forceFit : true
},
bbar : new Ext. PagingToolbar({
pageSize : RowCount,
store : ds,
displayInfo : true,
displayMsg : '기록 {0}~{1}, 총 {2}개 표시',
emptyMsg : "No Record"
})
})

cm 렌더러 기능
이 방법은 콤보박스가 수정되어 id로 표시되는 문제를 해결하기 위한 것입니다

코드 복사 코드는 다음과 같습니다.
function renderer(value, p, r) {
var index =omboDS.find(Ext .getCmp('cb').valueField, value);
var Record =omboDS.getAt(index);
var displayText = ""; == null) {
displayText = value;
} else {
displayText = Record.data.display; // 레코드
에 설정된 데이터의 표시 필드 값을 가져옵니다. >
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿