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.
