Results 1 to 3 of 3

Thread: Grid, adding to store and custom column renderer

  1. #1
    Ext JS Premium Member
    Join Date
    May 2011
    Posts
    60
    Vote Rating
    1
      0  

    Default Grid, adding to store and custom column renderer

    Hello,

    I've got a grid (designed in Ext Designer 1.2.2) which gets rendered as expected on load-up:
    Code:
    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:

    Code:
            // 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:

    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:
    Bildschirmfoto 2012-03-22 um 13.14.09.png

    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):

    Bildschirmfoto 2012-03-22 um 13.16.31.jpg

    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?

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,380
    Answers
    3997
    Vote Rating
    1524
      0  

    Default

    Let me make sure I understand correctly, your issue is the scrolling? What Ext JS 4 version are you using?
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Ext JS Premium Member
    Join Date
    May 2011
    Posts
    60
    Vote Rating
    1
      0  

    Default

    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •