PDA

View Full Version : Grid, adding to store and custom column renderer



h.koch
22 Mar 2012, 4:21 AM
Hello,

I've got a grid (designed in Ext Designer 1.2.2) which gets rendered as expected on load-up:


xtype: 'gridpanel',
frameHeader: false,
preventHeader: true,
title: 'My Grid Panel',
hideHeaders: true,
store: 'plugingroupContentStore',
columns: [
{
xtype: 'gridcolumn',
id: 'pluginsgroupsManageActionColumn',
width: 84,
text: ''
},
{
xtype: 'gridcolumn',
sortable: false,
dataIndex: 'name',
flex: 1,
text: 'Plugin'
},
{
xtype: 'gridcolumn',
sortable: false,
dataIndex: 'desc',
flex: 2,
text: 'Plugin description'
}
],
viewConfig: {

}

One column (pluginsgroupsManageActionColumn) has a special renderer, which starts rendering in a defered function in order to add action column entries (icons) dynamically for handling the entries, which works for initial rendering, too:



// custom renderer for columns
Ext.getCmp('pluginsgroupsManageActionColumn').renderer = function(value, metaData, record, rowIndex, colIndex, store, view){
var contentId = Ext.id();
countedDefered++;
Ext.Function.defer(createActionButtons, 1, this, [value, contentId, record]);
return('<div id="' + contentId + '"></div>');
};



The custom renderer uses the following code:



function createActionButtons(value, contentid, record) {
new Ext.toolbar.Toolbar({
padding: 0,
style: 'background: transparent;',
frame: false,
items: [{
id: 'actionDownButton_' + record.get('step'),
padding: 1,
iconCls: 'down-icon',
tooltip: 'move plugin "<i>' + record.get('name') + '</i>" down',
iconAlign: 'left',
hidden: isThisLastStep(record.get('step')),
handler: function(btn, e) {
pluginManagementAction(record.get('step'), 'down');
}
}, {
id: 'actionUpButton_' + record.get('step'),
padding: 1,
iconCls: 'up-icon',
tooltip: 'move plugin "<i>' + record.get('name') + '</i>" up',
hidden: isThisFirstStep(record.get('step')),
iconAlign: 'left',
handler: function(btn, e) {
pluginManagementAction(record.get('step'), 'up');
}
}, {
padding: 1,
iconCls: 'delete-icon',
tooltip: 'remove plugin "<i>' + record.get('name') + '</i>" from this plugin group',
iconAlign: 'left',
handler: function(btn, e) {
pluginManagementAction(record.get('step'), 'delete');
}
}
]
}).render(document.body, contentid);
countedDefered--;
if(countedDefered == 0) {
Ext.MessageBox.hide();
}
}



A sample perfect output is shown here:
33005

When adding a new entity to the store, it will get rendered correctly (say: the actioncolumn gets filled correctly, everything works), but I've found that the webbrowser window has added entities below the main window (you cannot scroll to this position wicth a mouse, but use PageUp/PageDown keys to navigate there):

33006

Looking via FireBug into the DOM, they have the same ID as the (correct) entries in the action column.

How can I avoid such bad rendering when handling store entries dynamically? Is my custom renderer wrong?

mitchellsimoens
22 Mar 2012, 10:34 AM
Let me make sure I understand correctly, your issue is the scrolling? What Ext JS 4 version are you using?

h.koch
23 Mar 2012, 1:45 AM
Hello,

I'm using ExtJS 4.0.7. The issue is that the element is being added two times in the DOM: one time in the grid (as expected), one time with the same ID beneath the main window, only reachable via "PageDown" key. But it really exists.