PDA

View Full Version : Dynamic headers in complex tables



parashutist
10 Nov 2014, 6:10 AM
Hi all,I have a complex grid with subcolumns. And I need to change the very parent header dynamically. In case of a simple grid 'setText' can be used. But how can I get parent header?The columns structure is like this:
...columns: [ { text: 'col1', dataIndex: 'field1', }, { text: 'SHOULD BE CHANGED', columns: [ { text: 'subcol1', dataIndex: 'field2', }, { text: 'subcol2', dataIndex: 'field3', }, ] }]Using of grid.columns[X].setText doesn't help because I can't access to the parent column.The only way I've found is:
grid.headerCt.items.items[X].text = 'NEW TEXT'But it is the bad practice to modify object's internals directly.Can anybody give me advice how to achieve my goal?

joel.watson
12 Nov 2014, 4:13 PM
Hi parashutist--

Have you tried reconfiguring the grid via Ext.panel.Table.reconfigure (http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.panel.Table-method-reconfigure)? It would allow you to make any textual changes to the grouped headers (and any other changes in your column definitions, for that matter) very easily without having to resort to dig into the internals directly.

Let me know if that does the trick for you.

Thanks!

parashutist
12 Nov 2014, 11:41 PM
Hi Joel,
Do you mean to call reconfigure method and pass to it new columns object with new headers? Or something else?
Could you please describe you advise in more details?

joel.watson
14 Nov 2014, 6:53 AM
Hi Joel,
Do you mean to call reconfigure method and pass to it new columns object with new headers? Or something else?
Could you please describe you advise in more details?

Yes, calling the reconfigure method with the modified columns configuration was what I was suggesting. On the face of it, it might seem like overkill for the particular task you're trying to accomplish. However, it lends the greatest flexibility, especially as requirements change and you need to potentially incorporate other changes as well.

parashutist
16 Nov 2014, 11:47 PM
Thank you Joel,


But one thing is still unclear for me. I have this grid with all columns structure described in the view class. Columns structure with all renderers etc is quite big and complex and I wouldn't move it to the controller. So I should get column.Column object, somehow get header what I need, modify it and pass this object to reconfigure method. But it returns me to the very beginning, how to get parent header.
If this solution requires copying columns structure in the controller I would use solution that I've described earlier.
Sorry for probably trivial questions. I'm just getting started with EXTjs at all.

joel.watson
17 Nov 2014, 8:37 AM
One way you could approach this is to create a method (or series of methods) on your grid class that would be responsible for preparing the column configuration. This would provide you with the flexibility of dynamically creating definitions without having to duplicate a bunch of code for each particular case.