1

ExtJs 編集可能グリッドを含む HTML ページがあります。編集は正常に機能していますが、編集された行の Id フィールド値を取得したいのですが、わかりません...編集された行の Id、名前、および電子メール フィールド値を値の別の配列に入力したいです...

Ext.onReady(function() {
Ext.create('Ext.data.Store', {
    storeId:'myArray',
    fields:['id','name', 'email'],
    data:{'items':[
        {"id":"1", "name":"Lisa", "email":"lisa@ArrayData.com"},
        {"id":"2", "name":"Bart", "email":"bart@ArrayData.com"},
        {"id":"3", "name":"Homer", "email":"home@ArrayData.com"},
        {"id":"4", "name":"Marge", "email":"marge@ArrayData.com"}
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

Ext.create('Ext.grid.Panel', {
    title: 'ArrayData',
    store: Ext.data.StoreManager.lookup('myArray'),
    columns: [
        {header: 'Id',  dataIndex: 'id'},
        {header: 'Name',  dataIndex: 'name', editor: 'textfield'},
        {header: 'Email', dataIndex: 'email', flex:1,
            editor: {
                xtype: 'textfield',
                allowBlank: false
            }
        }
    ],
    selType: 'cellmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1,
            listeners : {
            scope: this,
            edit: function (theEditor, e, eOpts)
        {
            console.log();
        }
    }
        })
    ],
    height: 200,
    width: 500,
    renderTo: Ext.getBody()
});
});
# #

@Hariharan と @Dipti の貴重な助けに感謝します...作業コードは-

Ext.create('Ext.data.Store', {
    storeId:'myArray',
    fields:['id','name', 'email'],
    data:{'items':[
        {"id":"1", "name":"Lisa", "email":"lisa@ArrayData.com"},
        {"id":"2", "name":"Bart", "email":"bart@ArrayData.com"},
        {"id":"3", "name":"Homer", "email":"home@ArrayData.com"},
        {"id":"4", "name":"Marge", "email":"marge@ArrayData.com"}
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

var array_edited=Ext.create('Ext.data.Store', {
    storeId:'myArray_edited',
    fields:['id','name', 'email'],
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

Ext.create('Ext.grid.Panel', {
    title: 'ArrayData',
    store: Ext.data.StoreManager.lookup('myArray'),
    columns: [
        {header: 'Id',  dataIndex: 'id'},
        {header: 'Name',  dataIndex: 'name', editor: 'textfield'},
        {header: 'Email', dataIndex: 'email', flex:1,
            editor: {
                xtype: 'textfield',
                allowBlank: false
            }
        }
    ],
    selType: 'cellmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1,
            listeners : {
            scope: this,
            edit: function(editor, e) {
                    array_edited.add({
                    id: e.record.get('id'),
                    name: e.record.get('name'),
                    email: e.record.get('email')
                    });
                }
    }
        })
    ],
    height: 200,
    width: 500,
    renderTo: Ext.getBody()
});

Ext.create('Ext.grid.Panel', {
    title: 'ArrayDataEdited',
    store: Ext.data.StoreManager.lookup('myArray_edited'),
    columns: [
        {header: 'Id',  dataIndex: 'id'},
        {header: 'Name',  dataIndex: 'name'},
        {header: 'Email', dataIndex: 'email', flex:1
        }
    ],
    selType: 'cellmodel',

    height: 200,
    width: 500,
    renderTo: Ext.getBody()
});
4

2 に答える 2

1

以下の回答を参照してください。お役に立てば幸いです。

plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1,
            listeners : {
                edit : function(editor, e) {
                    alert("Edited id value : " + e.record.get('id'));
                }
            }
        })
    ],
于 2013-11-06T07:09:16.970 に答える
0

これを確認すると、3 つの列を持つ gridPanel があり、sm を使用して編集可能な値を選択できます。保存後、fnctChange 関数を呼び出して新しい値を使用できます。これがあなたを助けることを願っています。

var gridPanel = new Ext.grid.GridPanel({

    region : 'west',
    width : 360,
    height : 250,
    trackMouseOver : false,
    disableSelection : true,
    autoscroll : true,
    loadMask : true,
    margins : '3 3 3 0',
    sm : sm,
    viewConfig : {
        forceFit : true
    },
    store : store,
    // grid columns
    columns : [ sm, {
        id : 'columnNames',
        header : "<b>Select the column names to be displayed</b>",
        dataIndex : 'columnNames',
        renderer : renderColumnNames,
        width : 360,
        sortable : true
    }, { id : 'col1ID',
        header : "",
        dataIndex : 'Col1',
        hidden : true,
        sortable : true
    }, {
        id : 'col2ID',
        header : "",
        dataIndex : 'Col2',
        hidden : true,
        sortable : true
    }]
});
var settingPanelMsg = "&nbsp;&nbsp;<b>Change save</b><br></br>"
var settingPanel = new Ext.Panel({
    region : 'center',
    width : 390,
    height : 250,
    margins : '3 0 3 3',
    collapsible : true,
    html : settingPanelMsg
})

winSetting = new Ext.Window({
    title : 'Customize Your chnage',
    layout : 'border',
    closable : false,
    height : 300,
    width : 730,

    items : [ gridPanel, settingPanel ],
    buttons : [ {
        text : 'Close',
        handler : function(e, target, panel) {
            winLibSetting.close();
        }
    }, {
        text : 'Save',
        handler : function() {
            if (fnctChange() == true) {
                winLibSetting.close();
            }
        }
    } ]
});

winLibSetting.show();

関数 fnctChange() {

var L1 = sm.getSelections();

for (i = 0; i < L1.length; i++) {

var col1value = L1[i].data.col1ID;

    if (L1[i].data.col2ID == true) {
        var colName= L1[i].data.columnNames;
  Ext.MessageBox.alert(' ',
            'colName :'+colName);
    }
}

return true;

}

于 2013-11-06T07:00:14.813 に答える