1. #21
    Sencha User
    Join Date
    May 2009
    Posts
    2
    Vote Rating
    0
    vector3d is on a distinguished road

      0  

    Question keep RowExpander content if store of "main" grid updated

    keep RowExpander content if store of "main" grid updated


    I have the same problem.
    My case is: a GridPanel in RowExpander of EditorGridPanel if store of "main" EditorGridPanel makes update (after edit or after set data in store) the content of RowExpander disappears...

    How to fix this issue? Please Help!!!

  2. #22
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,657
    Vote Rating
    5
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    @pavan:
    just use the events inside the plugin code. Debug them from there, decide if row is expanded and if you want to let pass them through to parent.

    For example look to onMouseDown in plugin as example.

    Remember that you are always in a grid, all events of a grid are used, and having grid in grid may cause problems for sure, so you have to take care manually.
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  3. #23
    Sencha User
    Join Date
    Nov 2007
    Posts
    294
    Vote Rating
    0
    Sesshomurai is on a distinguished road

      0  

    Default


    Here's a little trick I thought up and steffenk helped me with in another thread that is useful here.

    Basically, if you want your expanded row panel to be resizable vertically, you can add a resizable bar on the south.

    Code:
            var expander = new Ext.ux.grid.RowPanelExpander({
                createExpandingRowPanelItems: function(record, rowIndex){
    
    
                    var panelItems = [
                    new Ext.TabPanel({
                        plain: true,
                        activeTab: 0,
                        height:'fit',
                        width:'fit',
                        defaults: {
                            autoHeight: true,
                            autoWidth:true
                        },
                        record: record,
                        listeners: {
                            render: function() {
                                var resizer = new Ext.Resizable(this.getEl(), {
                                    handles: 's',
                                    minWidth: 200,
                                    height:100,
                                    minHeight: 100,
                                    maxWidth: 800,
                                    maxHeight: 600,
                                    pinned:true
                                });
    
                            }
                        },
    
                        items:[
                        {
                            xtype   : 'mediapanel',
                            id      : Ext.id(),
                            iconCls : 'icon-view',
                            title:'Quick View',
                            disableCaching : false,
                            mediaCfg:{
                                mediaType  :'HTM',
                                unsupportedText : 'IFrames are not supported by your browser.',
                                url         :"jsp/get-media.jsp?"+wrap+"object="+record.data.data+"&inline=true&repository="+record.data.repository+"&type="+record.data.mime
                            }
                        },
                        {
                            title:'Related',
                            iconCls:'icon-reports',
                            height:'fit'
                        }
                        ]
                    })
                    ];
                    return panelItems;
                }
            });
    Its useful if you are viewing content and so forth in the row.

  4. #24
    Ext JS Premium Member
    Join Date
    Mar 2010
    Location
    Moldova, Republic of / Shelton, CT, US
    Posts
    136
    Vote Rating
    3
    amsoft is on a distinguished road

      0  

    Default


    I also interested in this topic. Can you fix the problem with EditorGridPanel, please?

  5. #25
    Ext User
    Join Date
    Jan 2010
    Posts
    4
    Vote Rating
    0
    383257357@qq.com is on a distinguished road

      0  

    Default 非常感谢你的分享。

    非常感谢你的分享。


    请原谅我不会说英文。我之前也向里面嵌套过一个表格,但是我却无法给每个表格显示不同的数据,这是让我最头痛的一件事。不过还是感谢你的分享。

  6. #26
    Sencha Premium Member dawesi's Avatar
    Join Date
    Mar 2007
    Location
    Melbourne, Australia (aka GMT+10)
    Posts
    1,082
    Vote Rating
    41
    dawesi has a spectacular aura about dawesi has a spectacular aura about

      0  

    Default


    great extension... :-)
    Teahouse Training Company
    Official Certified Sencha Trainer

    Australia / New Zealand / Singapore / Hong Kong & APAC



    SenchaWorld.com - Sencha webinars, videos, etc
    SenchaForge.org - (coming soon)
    TeahouseHQ.com - Sencha ecosystem training portal

    Code Validation : JSLint | JSONLint | JSONPLint

  7. #27
    Ext JS Premium Member
    Join Date
    Mar 2010
    Posts
    32
    Vote Rating
    0
    mrusinak is on a distinguished road

      0  

    Default


    Quote Originally Posted by vector3d View Post
    I have the same problem.
    My case is: a GridPanel in RowExpander of EditorGridPanel if store of "main" EditorGridPanel makes update (after edit or after set data in store) the content of RowExpander disappears...

    How to fix this issue? Please Help!!!
    After some investigating, the problem appears to be (in 3.2.1 anyway) that when rows are removed or re-rendered (such as during an update), the existing rowbody's panel is not removed.

    My fix for when a row is updated changes the createExpandingRowPanel function to delete the existing panel and render a new one if an entry for that ID already exists, instead of ignoring creation:
    Code:
    createExpandingRowPanel : function(record, rowBody, rowIndex) {
    
        // record.id is more stable than rowIndex for panel item's key; rows can be deleted.
        var panelItemIndex = record.id;
        // var panelItemIndex = rowIndex;
    
        // init array of expanding row panels if not already done
        if (!this.expandingRowPanel) {
            this.expandingRowPanel = [];
        }
    
        // Destroy the existing panel if present
        if (this.expandingRowPanel[panelItemIndex]) {
            this.expandingRowPanel[panelItemIndex].destroy();
        }
        this.expandingRowPanel[panelItemIndex] = new Ext.Panel({
            border : false,
            bodyBorder : false,
            layout : 'fit',
            renderTo : rowBody,
            items : this.createExpandingRowPanelItems(record, rowIndex)
        });
    },
    The fix for row deletion I used was this, also shown with a fix to have the correct expanded/collapsed state after an update:
    Code:
    onRender : function() {
        var grid = this.grid;
        var mainBody = grid.getView().mainBody;
        mainBody.on('mousedown', this.onMouseDown, this, {
            delegate : '.x-grid3-row-expander'
        });
        grid.getView().on('rowremoved', this.onRowRemoved, this);
        grid.getView().on('rowupdated', this.onRowUpdated, this);
        if (this.expandOnEnter) {
            this.keyNav = new Ext.KeyNav(this.grid.getGridEl(),
                    {
                        'enter' : this.onEnter,
                        scope : this
                    });
        }
        if (this.expandOnDblClick) {
            grid.on('rowdblclick', this.onRowDblClick, this);
        }
    },
    
    // This will not get fired for an update
    onRowRemoved: function(view, row, rec) {
        var panelItemIndex = rec.id;
        
        if (this.expandingRowPanel && this.expandingRowPanel[panelItemIndex]) {
            this.expandingRowPanel[panelItemIndex].destroy();
            this.expandingRowPanel[panelItemIndex] = null;
        }
    },
    
    onRowUpdated: function(view, row, rec) {
        if (typeof row == 'number') {
            row = this.grid.view.getRow(row);
        }
    
        this[Ext.fly(row).hasClass('x-grid3-row-collapsed') ? 'collapseRow' : 'expandRow'](row);
    },
    Last edited by mrusinak; 8 Jun 2010 at 11:23 AM. Reason: Further investigating and tweaking

  8. #28
    Ext JS Premium Member
    Join Date
    Mar 2010
    Location
    Moldova, Republic of / Shelton, CT, US
    Posts
    136
    Vote Rating
    3
    amsoft is on a distinguished road

      0  

    Default


    Thanks a looooot=)

  9. #29
    Ext User
    Join Date
    May 2010
    Posts
    1
    Vote Rating
    0
    youngqj is on a distinguished road

      0  

    Default


    Great! Thanks for share!

  10. #30
    Ext JS Premium Member
    Join Date
    Oct 2009
    Posts
    4
    Vote Rating
    0
    innerbreath is on a distinguished road

      0  

    Default


    Hi,

    I am trying to use the RowPanelexpander. It works in FF with grid.autoheight:true but not in IE.

    Any help would be greatly appreciated.

    Thanks,

    Kamal.