ExtJS は初めてです。
同じページに 2 つのグリッドがあります。最初のグリッドには 3 つの列があります。2番目に1つだけ。問題は、2 番目がレンダリングされると、最初のグリッドのプロパティが上書きされることです。
たとえば、最初のグリッドで行を編集しようとすると、2 番目のグリッドから行の幅が取得されます。
var $booleanArray = [
[「拒否」、「拒否」]、
[「許可」、「許可」]
];
var myPageSize = 10;
Ext.Loader.setConfig({ 有効: true });
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
「Ext.state.*」
]);
Ext.onReady(関数 () {
Ext.define('CharacteristicModel', {
拡張: 'Ext.data.Model',
フィールド: [ {name: 'name'}, {name: 'value'}, {name: 'order'} ],
検証: [
{
タイプ：「長さ」、
フィールド名'、
分: 1
}
]
});
var 特性ストア = 新しい Ext.data.Store({
プロキシー ： {
モデル：「CharacteristicModel」、
タイプ：「残り」、
API: {
読み取り: admin_path + '/getCharacteristics/1/',
作成: admin_path + '/saveCharacteristics/1/',
更新: admin_path + '/saveCharacteristics/1/',
破棄: admin_path + '/destroyCharacteristic/1/'
}、
読者 ： {
タイプ：「json」、
ルート：「データ」、
合計プロパティ: 'total_count'
}、
ライター: {
タイプ: 'json',
ルート: 'データ'
}、
バッファリング: true
}、
リスナー: {
読み取り: 関数 (応答) {
}、
ロード：関数（ストア）{
}、
書き込み: 関数 (格納、操作) {
store.load();
}
}、
pageSize : myPageSize,
autoLoad : { 開始: 0, 制限: myPageSize },
オートシンク: 真
});
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
var 特性Grid = 新しい Ext.grid.GridPanel({
id : 'characteristicsGrid',
renderTo : 'characteristics_grid_div_1',
store : 特性ストア、
幅：480、
ステートフル : 真、
stateId : 'characteristicsGrid',
title : 'グリッド "1"',
iconCls : 'アイコンユーザー',
リスナー: {
itemdblclick: 関数 (dv、行、項目、インデックス、e) {
dv.refresh();
dv.getGridColumns()[0].setEditor({
無効: 真、
編集可能: false
});
if (row.data.id == 6 || row.data.id == 7) {
dv.getGridColumns()[1].setEditor({
xtype : 'コンボ',
store : new Ext.data.ArrayStore({
フィールド: ['abbr', 'action'],
データ: $booleanArray
})、
displayField : 'アクション',
valueField : 'abbr',
モード：「ローカル」、
typeAhead : false,
トリガーアクション: 'すべて',
lazyRender : 真、
emptyText : 'アクションを選択'
});
}
そうでなければ (row.data.id == 8 || row.data.id == 11) {
dv.getGridColumns()[1].setEditor({
無効: 真、
編集可能: false
});
}
そうしないと {
dv.getGridColumns()[1].setEditor({
xtype: 'テキストフィールド'
});
}
}
}、
列: [
{
id : '名前',
text : 'アカウントの特徴',
ソート可能 : false,
幅：340、
固定: 真、
dataIndex: '名前'
}、
{
id : '値',
テキスト: '値',
ソート可能 : false,
dataIndex: '値',
幅：70、
固定: 真、
編集者 ： {
xtype: 'テキストフィールド'
}、
renderer : 関数 (値、フィールド) {
if (field.record.data.id == 6 || field.record.data.id == 7) {
if ($booleanArray[0][0] != 値) {
値 = $booleanArray[1][1];
}
そうしないと {
値 = $booleanArray[0][1];
}
}
戻り値;
}
}、
{
id : '注文',
text : '注文',
ソート可能 : false,
dataIndex: '注文',
幅：70、
固定: 真、
編集者 ： {
xtype: 'テキストフィールド'
}、
renderer : 関数 (値、フィールド) {
戻り値;
}
}
]、
bbar : Ext.create('Ext.PagingToolbar', {
store : 特性ストア、
表示情報: 真、
pageSize : myPageSize,
displayMsg : '{0} - {1} と {2} を表示',
emptyMsg: "0 行"
})、
DockedItems: [
{
xtype: 'ツールバー',
項目: [
{
テキスト : '追加',
iconCls: 'アイコン追加',
ハンドラ: 関数 () {
var grid_colums = rowEditing.cmp.getSelectionModel().view.getGridColumns();
grid_colums[0].setEditor({
xtype : 'コンボ',
store : new Ext.data.ArrayStore({
フィールド: ['id', 'name'],
データ: $characteristics
})、
displayField : '名前',
値フィールド: 'ID',
モード：「ローカル」、
typeAhead : false,
トリガーアクション: 'すべて',
lazyRender : 真、
emptyText : 'アクションを選択'
});
grid_colums[1].setEditor({
xtype: 'テキストフィールド'
});
// 空のレコード
//characteristicsStore.autoSync = false;
特性ストア.挿入(0, 新しいCharacteristicModel());
行編集.startEdit(0, 0);
//characteristicsStore.autoSync = true;
}
}、
'-',
{
itemId : '削除',
text : '削除',
iconCls : 'アイコン削除',
無効: 真、
ハンドラ : 関数 () {
var 選択 = 特性Grid.getView().getSelectionModel().getSelection()[0];
if (選択) {
特性Store.remove（選択）;
}
}
}
]
}
]、
プラグイン: [rowEditing]
});
attributesGrid.getSelectionModel().on('selectionchange', function (selModel, selections) {
特性グリッド.ダウン('#delete').setDisabled(selections.length === 0);
});
});
Ext.onReady(関数 () {
Ext.define('AdvantagesModel', {
拡張: 'Ext.data.Model',
田畑： [
{名前: '名前'}
]
});
// 状態プロバイダーをセットアップします。すべての状態情報は Cookie に保存されます
//Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
var benefitsStore = new Ext.data.Store({
idProperty: '利点モデル',
プロキシー ： {
モデル：「アドバンテージモデル」、
タイプ：「残り」、
API: {
読み取り: admin_path + '/getAdvantages/1/',
作成: admin_path + '/saveAdvantages/1/',
破棄: admin_path + '/destroyAdvantages/1/'
}、
読者 ： {
タイプ：「json」、
ルート：「データ」、
totalProperty: 'totalCount'
}、
ライター: {
タイプ: 'json',
ルート: 'データ'
}、
バッファリング: true
}、
リスナー: {
読み取り: 関数 (応答) {
}、
ロード：関数（ストア）{
}、
書き込み: 関数 (格納、操作) {
store.load();
}
}、
pageSize : myPageSize,
autoLoad : { 開始: 0, 制限: myPageSize },
オートシンク: 真
});
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
var benefitsGrid = new Ext.grid.GridPanel({
id : 'advantagesGrid',
renderTo : 'advantages_grid_div_1',
ストア：アドバンテージストア、
幅 : 482,
高さ : 355,
ステートフル : 真、
stateId : 'advantagesGrid',
タイトル : 'グリッド 2',
iconCls : 'アイコンユーザー',
リスナー: {
beforeedit: function (dv, row, item) {
//advantagesGrid.getView().refresh();
if (row.record.raw)
{
false を返します。
}
}
}、
列: [
{
id : '名前',
テキスト：「利点」、
ソート可能 : false,
dataIndex: '名前',
幅 : 480
}
]、
bbar : Ext.create('Ext.PagingToolbar', {
ストア：アドバンテージストア、
表示情報: 真、
pageSize : myPageSize,
displayMsg : '{0} - {1} と {2} を表示',
emptyMsg: "0 行"
})、
DockedItems: [
{
xtype: 'ツールバー',
項目: [
{
テキスト : '追加',
iconCls: 'アイコン追加',
ハンドラ: 関数 () {
var grid_colums = rowEditing.cmp.getSelectionModel().view.getGridColumns();
grid_colums[0].setEditor({
xtype : 'コンボ',
store : new Ext.data.ArrayStore({
フィールド: ['id', 'name'],
データ: $advantages
})、
displayField : '名前',
値フィールド: 'ID',
モード：「ローカル」、
typeAhead : false,
トリガーアクション: 'すべて',
lazyRender : 真、
emptyText : 'アクションを選択'
});
// 空のレコード
benefitsStore.autoSync = false;
アドバンテージストア.挿入(0, 新しいアドバンテージモデル());
行編集.startEdit(0, 0);
benefitsStore.autoSync = true;
}
}、
'-',
{
itemId : '削除',
text : '削除',
iconCls : 'アイコン削除',
無効: 真、
ハンドラ : 関数 () {
var selection = benefitsGrid.getView().getSelectionModel().getSelection()[0];
if (選択) {
利点Store.remove（選択）;
}
}
}
]
}
]、
プラグイン: [rowEditing]
});
benefitsGrid.getSelectionModel().on('selectionchange', function (selModel, selections) {
アドバンテージ Grid.down('#delete').setDisabled(selections.length === 0);
});
});