ホームページ > ウェブフロントエンド > 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 comboBox = new Ext.form.ComboBox ({
id : "cb", //
typeAhead : true,
readOnly : true,
allowBlank : false,
autoScroll : true,
selectOnFocus : true,
emptyText : '選択してください...'、
store : comboDS、
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 : "テスト",
dataIndex : "テスト",
renderer : レンダラー,
editor : comboBox
}]);
grid = new Ext.grid.EditorGridPanel({
title : 'テスト'、
ds : ds、
cm : cm、
clicksToEdit : 1、
viewConfig : {
forceFit : true
}、
bbar : new Ext. PagingToolbar({
pageSize : RowCount,
store : ds,
displayInfo : true,
displayMsg : 'レコード {0} ~ {1}、合計 {2} 件を表示',
emptyMsg : "レコードがありません"
})
});


cm レンダラ関数
このメソッドは、コンボボックスが変更されて ID
として表示される問題を解決します。

コードをコピーします コードは次のとおりです。
function renderer(value, p, r) {
var インデックス = comboDS.find(Ext .getCmp('cb').valueField, value);
var レコード = comboDS.getAt(index);
var displayText = ""; == null) {
displayText = value;
} else {
displayText = record.data.display; // レコード
の表示フィールドの値を取得します。 >
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート