Ext Grid实例简易可编辑表格的多种实现方式

在Ext框架中，Grid对象是一个强大的工具。以下是几种常见的实现方式：

1. 使用JSON数据源的可编辑Grid：

var grid = Ext.create('Ext.grid.Panel', {
    store: {
        fields: ['name', 'email'],
        data: [
            { name: 'John', email: 'john@example.com' },
            { name: 'Jane', email: 'jane@example.com' }
        ]
    },
    columns: [
        { text: 'Name', dataIndex: 'name', editor: 'textfield' },
        { text: 'Email', dataIndex: 'email', editor: 'textfield' }
    ],
    plugins: [Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1 })]
});

1. 使用数组数据源的可编辑Grid：

var grid = Ext.create('Ext.grid.Panel', {
    store: {
        fields: ['id', 'product'],
        data: [
            [1, 'Book'],
            [2, 'Pen']
        ]
    },
    columns: [
        { text: 'ID', dataIndex: 'id' },
        { text: 'Product', dataIndex: 'product', editor: 'textfield' }
    ],
    plugins: [Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1 })]
});

1. 从JSP动态获取数据的Grid：

var store = Ext.create('Ext.data.Store', {
    fields: ['id', 'product'],
    proxy: {
        type: 'ajax',
        url: 'data.jsp',
        reader: {
            type: 'json',
            rootProperty: 'items'
        }
    },
    autoLoad: true
});
var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    columns: [
        { text: 'ID', dataIndex: 'id' },
        { text: 'Product', dataIndex: 'product' }
    ]
});

这些Grid对象的实现方式展示了如何使用不同的数据源，简化了复杂表格的操作与编辑。