ExtJS4 表格的嵌套 rowExpander应用

    { id: 1, name: 'John Doe', email: '[e-mail]', phone: '1234567890', address: '123 Main St' },
    { id: 2, name: 'Jane Smith', email: '[e-mail]', phone: '0987654321', address: '456 Elm St' }
]

});

### 步骤 4: 创建表格
现在，我们可以创建一个表格来展示我们的数据，并使用 rowExpander 组件来嵌套展示更多的信息。以下是一个示例的表格定义：

```javascript
var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    columns: [
        { header: 'ID', dataIndex: 'id' },
        { header: 'Name', dataIndex: 'name' },
        { header: 'Email', dataIndex: 'email' },
        { header: 'Phone', dataIndex: 'phone' },
        { header: 'Address', dataIndex: 'address' }
    ],
    plugins: [{
        ptype: 'rowexpander',
        rowBodyTpl: new Ext.XTemplate(
            '<p><b>Email:</b> {email}</p>',
            '<p><b>Phone:</b> {phone}</p>',
            '<p><b>Address:</b> {address}</p>'
        )
    }],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

步骤 5: 运行应用

最后，我们需要将表格渲染到页面上。可以通过调用 renderTo 方法将表格渲染到指定的容器中。

grid.render(Ext.getBody());

示例说明

示例 1: 基本用法

在这个示例中，我们创建了一个简单的表格，并使用 rowExpander 组件展示了每个用户的邮箱、电话和地址信息。

示例 2: 自定义模板

在这个示例中，我们使用自定义的模板来展示用户的信息。通过使用 Ext.XTemplate，我们可以自由地定义展示的内容和样式。

var grid = Ext.create('Ext.grid.Panel', {
    // ...
    plugins: [{
        ptype: 'rowexpander',
        rowBodyTpl: new Ext.XTemplate(
            '<div class=\"user-info\">',
            '<p><b>Email:</b> {email}</p>',
            '<p><b>Phone:</b> {phone}</p>',
            '<p><b>Address:</b> {address}</p>',
            '</div>'
        )
    }],
    // ...
});

在上述示例中，我们使用了一个自定义的 CSS 类名 \"user-info\" 来设置展示内容的样式。

结论

通过使用 ExtJS4 的 rowExpander 组件，我们可以轻松地在表格中嵌套展示更多的信息。本攻略提供了详细的步骤和示例说明，希望能帮助你成功应用 rowExpander 组件。