How to have headers in first column instead of regular headers in top row?

问题

Generally, ExtJS renders the JSON into grid considering that properties go to top columns and their number is fixed. And the corresponding values are loaded in rows as records.Here number of rows may vary depending upon the records in Json.

But there is slight change in my requirement. I want the properties to go to first row and corresponding columns. Here number of columns may vary depending upon the records in Json.

I want to render something like depicted below :

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

I understand the way to achieve the column headers, there are lot of documentation available as well. e.g.

http://docs.sencha.com/extjs/4.2.3/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#grouped-header-grid

I even achieved this using solution described here :

How to get the Row Headers functionality in ExtJs?

But in this case, JSON doesnt look good and not seem to be maintainable since when we want to add record, we need to add another property to all array items:

{ [  

  { prop1 : value,  prop2 : value },  
  { prop1 : value,  prop2 : value },

  // to add new record, we need to do below :

  { prop1 : value,  prop2 : value,  prop3 : value },  
  { prop1 : value,  prop2 : value,  prop3 : value }


] }

Unlike adding array item with fixed properties in case of regular ExtJS grid :

{ [  

  { prop1 : value,  prop2 : value },  
  { prop1 : value,  prop2 : value },

  // to add new record, we need to do below :

  { prop1 : value,  prop2 : value },  
  { prop1 : value,  prop2 : value },  

  { prop1 : value,  prop2 : value }


] }

The Data to be loaded in grid is extremely huge and not predictable rows. Kindly let me know the proper way to achieve it and maintaining the JSON file optimized/readable fashion.

回答1:

There no concept of column headers in Ext, nevertheless, you can achieve similar functionality with locking grid: http://dev.sencha.com/ext/5.1.0/examples/kitchensink/#spreadsheet

来源：https://stackoverflow.com/questions/28342132/how-to-have-headers-in-first-column-instead-of-regular-headers-in-top-row

标签

json

extjs

extjs4.2

extjs-grid