如何创建可编辑网格面板

Question

我创建了一个网格。 我只是想知道如何使其可编辑，尽管我在这里可以找到许多示例，但由于不熟悉它所以无法理解它。 您能简单地告诉我吗？

Answer 1

您可以在网格中使用cell或行rowedit功能。 以下示例显示了您如何做。

单元格编辑样本

// Cell Edit example
Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
        /**
         * here is the important part
         * you should define each or single column 'editor' property
         * then specify the 'plugins' that you want to use, here is 'CellEditing'
         * as you might guess, all definitions appear in the grid definition
         */             
    columns: [
        {header: 'Name',  dataIndex: 'name', editor: 'textfield'},
        {header: 'Email', dataIndex: 'email', flex:1,
            editor: {
                xtype: 'textfield',
                allowBlank: false
            }
        },
        {header: 'Phone', dataIndex: 'phone'}
    ],
    selType: 'cellmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

行编辑样本

// Row Edit Sample
// the difference with cell edit, just showing an editor screen to change something
Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data: [
        {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
        {"name":"Bart", "email":"bart@simpsons.com", "phone":"555-222-1234"},
        {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},
        {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}
    ]
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
        /**
         * Same aspect
         * you should define 'editor' property
         * if you don't define editor property for a colum, 
         * you can't change anyhthing for that column
         */
    columns: [
        {header: 'Name',  dataIndex: 'name', editor: 'textfield'},
        {header: 'Email', dataIndex: 'email', flex:1,
            editor: {
                xtype: 'textfield',
                allowBlank: false
            }
        },
        {header: 'Phone', dataIndex: 'phone'}
    ],
    selType: 'rowmodel',
        // here is the plugin definition
    plugins: [
        Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToEdit: 1
        })
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});