Ext Js を使用してアプリケーションを開発していますが、問題があります。RowEditing プラグインを使用して行を編集しています。また、ユーザーはグリッドに列と行を動的に追加できます。ただし、ユーザーが行を編集すると、以下に示すように、データ型列である最初の列のみが編集を受け入れて表示し、残りは編集を受け入れますがデータを表示しません。
編集前:
編集後、更新ボタンをクリックします。
ご覧のとおり、残りの列のデータは表示されません。
私のコードを以下に示します。
var store = Ext.getStore('StoreTemp');
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
var contador = 1;
var contadorLinhas = 0;
Ext.define('Grid', {
extend : 'Ext.grid.Panel',
title: 'Grid',
store: 'StoreTemp',
columns: [
{
xtype: 'rownumberer',
},{
header : "Data Type",
dataIndex : 'nome',
flex : 1,
editor:'textfield'
}],
dockedItems : [ {
xtype : 'toolbar',
items : [ {
xtype: 'button',
tooltip: 'Click here to set data type on axis Y',
id : 'buttonTipoDado',
icon : Webapp.icon('edit.png'),
iconAlign : 'top',
handler : function() {
var gridView = Ext.ComponentQuery.query('gridpanel')[1];
Ext.Msg.prompt('Alert', 'Insert data type on axis Y', function(
btn, text) {
if (btn == 'ok') {
gridView.getView().getHeaderAtIndex(1).setText(text);
var botao = Ext.getCmp('buttonTipoDado');
botao.setDisabled(true);
} else {
Ext.Msg.alert('Alert', 'Insert a type!');
}
gridView.getView().refresh();
});
}
}, {
xtype: 'button',
icon : Webapp.icon('add1.png'),
iconAlign : 'top',
handler : function() {
var gridView = Ext.ComponentQuery.query('gridpanel')[1];
grid = gridView.headerCt;
if(grid.getGridColumns().length >= 1){
var column = Ext.create('Ext.grid.column.Column', {dataIndex: 'column', text : contador, editor: {xtype: 'textfield', flex: 0.5, editable: true}});
grid.insert(gridView.columns.length, column);
gridView.getView().refresh();
var botao = Ext.getCmp('buttonRemoverColuna');
botao.setDisabled(false);
}
contador++;
}
}, {
xtype: 'button',
icon : Webapp.icon('cancel.png'),
iconAlign : 'top',
id : 'buttonRemoverColuna',
handler : function() {
var gridView = Ext.ComponentQuery.query('gridpanel')[1];
gridView = gridView.headerCt;
var botao = Ext.getCmp('buttonRemoverColuna');
console.log(gridView.getGridColumns().length);
if(gridView.getGridColumns().length == 2){
console.log(gridView.getGridColumns().length);
botao.setDisabled(true);
contador = 1;
}
else{
gridView = gridView.remove(gridView.getGridColumns().length - 1);
}
}
}, {
xtype: 'button',
icon : Webapp.icon('add1.png'),
iconAlign : 'top',
handler: function(){
var gridView = Ext.ComponentQuery.query('gridpanel')[1];
store.insert(contadorLinhas, new Ext.create('model'));
rowEditing.startEdit(0, 0);
contadorLinhas++;
gridView.getView().refresh();
if(contadorLinhas > 0){
botao = Ext.getCmp('buttonRemoverLinha'),
botao.setDisabled(false);
}
}
}, {
xtype: 'button',
icon : Webapp.icon('cancel.png'),
iconAlign : 'top',
id: 'buttonRemoverLinha',
handler: function(botao){
store.removeAt(contadorLinhas - 1);
contadorLinhas--;
if(contadorLinhas == 0){
botao.setDisabled(true);
}
}
}]
} ],
plugins : [ rowEditing ]
});
Ext.define('model', {
extend : 'Ext.data.Model',
fields : [ {
name : 'id',
type : 'long'
}, {
name : 'nome',
type : 'string'
}, {
name : 'column',
type : 'array'
} ]
});
誰でも私に洞察を提供できますか?? ありがとう。