javascript - 如何在ExtJs中获取行标题功能？

Question

我想渲染如下所示的内容:

+-----------------+------------+---------------+
|                 |  Column 1  |    Column 2   |
+------------------------------+---------------+
|  Row Header 1   |    ...     |               |
+------------------------------+---------------+
|  Row Header 2   |            |               |
+------------------------------+---------------+
|  Row Header 3   |            |               |
+----------------------------------------------+

我了解实现列标题的方法，也有很多可用的文档。例如http://docs.sencha.com/extjs/4.2.3/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#grouped-header-grid

但是我找不到有行标题的那个。如何实现它并呈现与行和列属性相对应的数据(例如 Jason 文件中的数据)？

Answer 1

因此，您的网格将包含三列:

columns:[{
    dataIndex:'rowHeader'
},{
    text:'Column 1',
    dataIndex:'column1'
},{
    text:'Column 2',
    dataIndex:'column2'
}]

并从模型 fields:['rowHeader','column1','column2'] 的商店加载数据

如果是 JSON 存储，则期望服务器以以下格式将数据提交给他

{success:true,data:[
    {rowHeader:'RowHeader 1',column1:'',column2:''},
    {rowHeader:'RowHeader 2',column1:'',column2:''},
    {rowHeader:'RowHeader 3',column1:'',column2:''}
]}

如果您想显示其他格式的数据，例如稀疏矩阵常用的格式:

{rowHeader:'RowHeader 1',columnHeader:'ColumnHeader 1',value:''},
{rowHeader:'RowHeader 2',columnHeader:'ColumnHeader 1',value:''},
{rowHeader:'RowHeader 3',columnHeader:'ColumnHeader 1',value:''},
{rowHeader:'RowHeader 1',columnHeader:'ColumnHeader 2',value:''},
{rowHeader:'RowHeader 2',columnHeader:'ColumnHeader 2',value:''},
{rowHeader:'RowHeader 3',columnHeader:'ColumnHeader 2',value:''},
{rowHeader:'RowHeader 1',columnHeader:'ColumnHeader 3',value:''},
{rowHeader:'RowHeader 2',columnHeader:'ColumnHeader 3',value:''},
{rowHeader:'RowHeader 3',columnHeader:'ColumnHeader 3',value:''}

您必须手动将数据转换为上述格式，因为 ExtJS 网格无法处理任何每行没有一条记录的格式。

如果您想知道如何使 RowHeader 单元格看起来像标题:

基本上，它归结为在列上定义一个 tdCls，也可能定义一个渲染器。您可能想查看 api 文档 http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.column.Column-cfg-tdCls并在http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.column.Column-cfg-renderer

然后，有《如何设置 ExtJS 网格单元样式》指南，网址为 http://skirtlesden.com/articles/styling-extjs-grid-cells