View Full Version : Collapsible rows grid

19 Jun 2014, 1:47 PM
Dear all,
I have a requirement where I have to create a grid with collapsible rows.
I have taken an example from the sencha documentation and it works fine. However, I need to have some of the columns non-collapsible while other collapsible.

Is it possible to implement, or if I think of other way of doing it , that would mean I can have one column of a normal grid work as a collapsible grid. In that case, the + sign would cause only that column to expand or collapse.
Here is the code sample that I took from Sencha website.

features: [{
id: 'group',
ftype: 'groupingsummary',
groupHeaderTpl: '{name}',
hideGroupedHeader: true,
enableGroupingMenu: false
columns: [{
text: 'Task',
flex: 1,
tdCls: 'task',
sortable: true,
dataIndex: 'description',
hideable: false,
summaryType: 'count',
summaryRenderer: function(value, summaryData, dataIndex) {
return ((value === 0 || value > 1) ? '(' + value + ' Tasks)' : '(1 Task)');
}, {

Your advise is highly appeciated.


19 Jun 2014, 1:56 PM
You can have collapse row and halt this process, but not separate by individual columns in a row.

19 Jun 2014, 2:45 PM
Thanks Scott,
But I did not understand the answer. Could you please explain more.
Also, what are my choices if I want to only expand and collapse 5 out of 10 columns.
Also is it possible to have another grid as one of the columns of parent Grid. And then I make the child grid collapsible.


19 Jun 2014, 2:53 PM
You can collapse rows, not individual columns in a row.

As for the embedded grid. You can add a grid under an entire row, but to place a grid is each cell, would it be better to add a simple html table? This would not solve your collapse issue per cell.

If you want a grid in a cell (would very slow to render), there is a UX that would allow you to place a component in a cell.


19 Jun 2014, 3:01 PM
Thanks for the answer Scott,
So what would be my best bet in your opinion.
Embed and HTML within a cell.?

20 Jun 2014, 8:16 AM
Also, how would I get the grid under the entire row, as you mentioned about it in your last post.
I have not been able to figure this out yet.

20 Jun 2014, 8:18 AM
Here is a UX that can use:

Examples are included.

20 Jun 2014, 10:17 AM
Hi Scott,
Thanks for the answer. Not sure if this will fit into my requirement exactly, but the information would be very useful in implementing what I need.

Really appreciate your help on this.

Thanks much,

23 Jun 2014, 2:27 PM
Hi Scott,
I used the example in this reply. If I used it as is, it works fine.
But when I separate the Classes, like Company, History and move them out of Index.html, I get the grid,
But when I click on the + to expand, I get the following error.
I am struggling for 2 days to figure out whats going on.
Could you please help if possible.


23 Jun 2014, 2:46 PM
And the value of dataFn is?

23 Jun 2014, 3:07 PM
its coming 'undefined' for me.
What I did is that, I moved my Models out of index.html and used the Application.js, viewport.js to load my classes.

23 Jun 2014, 3:10 PM
One difference I observered between the two scenarios is that,
When I have everything defined in index.html,
the 'record' variable has a property called historyStore.
But when I have everything separated, this property is missing.

I am thinking this may be the reason.

23 Jun 2014, 3:37 PM
Hi Scott,
I was able to find the problem.
What was happening is, when I was defining the Model class, I was not prefixing them with XXX.model.History,
rather I defined them as following. When I added the prefix, it worked fine.

Thanks for Looking into this.

hasMany : {
model : 'History',
name : 'history'

6 Aug 2014, 1:15 PM
Dear team,
I have a question regarding collapsible grid.
Is it possible to change the title of the inner grid dynamically, based on the value of the one of the columns in the inner grid. Right now I am having hardcoded title for all my innder grids.