Question

我有一个数据存储区和一个网格。我试图声明一个名为FullName的新列，它将组合两个数据索引。花了一些时间研究这个问题后，我知道它可以是渲染器（网格级），也可以是数据存储区中的自定义列（映射？）。

有人可以提供实现此类列的代码示例吗？

// XML
<person>
    <first_name>John</first_name>
    <last_name>Smith</last_name>
</person> 

// Store
Ext.create('Ext.data.Store', {
    autoLoad: true,
    storeId: 'TestStore',
    fields: ['first_name', 'last_name'],
    data: parsed_xml_object,
    proxy: {
        type: 'memory',
        reader: {
            type: 'xml',
            record: 'person'
        }
    }
});

// Grid
TestGrid = Ext.create('Ext.grid.Panel', {
    title: 'Test',
    store: Ext.data.StoreManager.lookup('TestStore'),
    columns: [
        { header: 'First Name', dataIndex: 'first_name' },
        { header: 'Last Name Name', dataIndex: 'last_name' },
     ],
    height: 200,
    autowidth: true
});

Answer 1

使用自定义渲染器：

{
   header: "Name",
   dataIndex: 'last_name',
   renderer: function(value, element, record) {
       return record.data['last_name'] + ', ' + record.data['first_name'];
   }
}

Answer 2

你可以使用templeteColumn作为一个Column定义类，它通过使用已配置的XTemplate处理Model的数据来呈现值

http://docs.sencha.com/ext-js/4-0/#/api/Ext.grid.column.Template

Extjs 4 - 组合两个网格列

2 个答案: