Problem with Grid Action Columns

[quizzl]

Basically I have about 22 Grids in my center and each grid is the same and the last column in each grid.

The data in the grids changes upon navigation on a tree. I load the data via AJAX and then interate over the grids to decide if they should be expanded or collapsed based on the record count in the store.

1 . On some elements it works just nicely and then on other elements with a bit more data (although on initial load with full data it works) what happens is that the column width are messed up. They are still all there and the header width is correct but the columns underneath are not aligned to the headers anymore.
The action buttons in most but not all grids is simply way wider and overlaps the header of the column to the left, not the actual column to the left. see screenshots
If I remove all but 1 item from the items array I do not get this problem but I need 3 actions on every row with tooltip and mouseover pointer on the button.

2. Minor problem the column header will not show the title of the action column.
3. If i set style cursor : pointer for the action column or each item it has no effect.
4. The tooltip does not show no matter what.

Code except from my grid columns:


columns: [
{
text: 'label',
type: 'string',
flex: 1,
dataIndex: 'label'
},
{
text: 'domain',
type: 'string',
flex: 2,
dataIndex: 'domain'
},
{
text : 'Validity Period',
xtype : 'templatecolumn',
tpl : '{startdate} - {enddate}',
align : 'center',
width : 180
},
,
{
text : 'Action',
align : 'center',
tooltip : 'Test',
xtype : 'actioncolumn',
hideable : false,
sortable : false,
menuDisabled : true,
width : 60,
items : [
{
icon: 'ext/examples/shared/icons/fam/cog_edit.png',
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('label'));
}
},
{
icon: 'ext/examples/shared/icons/fam/book.png',
tooltip: 'Copy',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Copy " + rec.get('label'));
}
},
{
icon: 'ext/examples/shared/icons/fam/delete.gif',
tooltip: 'Delete',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Delete " + rec.get('label'));
}
}

]
}
]


2966329664

[mitchellsimoens]

What's the performance like using 22 grids? You can't use the grouping feature? Bad thing about it is that the group won't show if it isn't returned in the data but I have seen people return a fake record that they display as blank in the renderers.

I have seen this issue in 4.0.7 and before but with 4.1.0 and the various grid and layout fixes I do not see this. What version are you using?

[quizzl]

The performance seems to be ok right now though I have not been able to test it with huge amounts of data.

I tried going to 4.1 PR1 based on your suggestion to fix my Scrollbar problems but it did not work. I can't go to 4.1 right now because the itemclick event on my treepanel returns undefined right now when I call rec.get('key'). Is there an updated API availanble for 4.1 PR1?

[quizzl]

Also it was me who asked this before
http://www.sencha.com/forum/showthread.php?157215-Grouped-Grid-Grouping-quot-Fake-Non-Existing-Records-quot

I tried to do this with a grouped grid before but I ran into several problems that I couldn't solve because I needed direct access to each of the group properties so set their expansion states, to hide the fake records away that create the group header for example.