如何在 ExtJs 中获得行标题功能？答案

【问题标题】：How to get the Row Headers functionality in ExtJs?如何在 ExtJs 中获得行标题功能？
【发布时间】：2014-11-20 03:24:48
【问题描述】：

我想渲染如下图所示的内容：

+-----------------+------------+---------------+
|                 |  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 文件？

【问题讨论】：

标签： javascript json extjs matrix extjs4

【解决方案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，也可能是一个渲染器。您可能想查看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 的api 文档

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

【讨论】：

在我的情况下，列将被动态加载，这意味着我们不知道其中有多少，因此无法修复 Json 文件中的字段。但是你的回答仍然给了我一些可以用来渲染东西的方向。非常感谢！
如果你也能阐明如何处理我在之前评论中提到的场景，那就太好了。
Alexander，请在这里回答相关问题：stackoverflow.com/questions/28342132/…

【解决方案2】：

如果您没有固定的 JSON 结构，则必须发送架构。我建议使用 grid.reconfigure 即食的 json 格式。

{"schema":[{dataIndex:'t1',name:'T1'}],"data":[{t1:'Val'},{t1:'Valo'}]}

现在您不会直接将其加载到商店中，而是使用Ext.Ajax.request，然后准备商店（只需使用架构中的字段创建一个新商店）和网格（grid.reconfigure(columns,store)），然后再放入使用store.loadRawData 将数据导入存储。

【讨论】：