2

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'
} ]
});

誰でも私に洞察を提供できますか?? ありがとう。

4

0 に答える 0