Ext学习，使用Grid控件

好的，我可以为您讲解一下使用 Ext 中的 Grid 控件。

Grid 是一个非常常用的控件，它可以展示表格数据。在使用 Grid 之前，我们需要先引入 Ext 的 Grid 组件，可以通过以下代码进行引入：

Ext.require(['Ext.grid.*']);

接着，我们可以定义一个 Ext.grid.Panel 对象，即一个 Grid 面板。以下是一个简单的 Grid 面板的定义示例：

Ext.create('Ext.grid.Panel', {
    title: 'My Grid Panel',
    store: myStore,
    columns: [
        { text: 'Name',  dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone' }
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

在上述代码中，我们定义了一个 Grid 面板，它包含了一个标题、一个数据源（即 store）、三列数据（name、email 和 phone）以及一个高度和宽度。在最后，我们将这个 Grid 面板渲染到页面中。

其中，store 是 Grid 的数据源，我们需要先定义一个 store 对象。以下是一个简单的 store 对象的定义示例：

var myStore = Ext.create('Ext.data.Store', {
    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: 'homer@simpsons.com', phone: '555-222-1244' },
        { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
    ]
});

在上述代码中，我们定义了一个包含 name、email 和 phone 三个字段的数据源。我们通过 data 属性来设置数据，可以看到，我们在这里直接将数据写在代码中。在实际中，我们通常是从后台获取数据，然后将数据赋值给 store 对象。

以上就是使用 Ext 中的 Grid 控件的基本步骤。希望能对您有所帮助。