1. #1
    Ext JS Premium Member
    Join Date
    Apr 2008
    Location
    Oslo
    Posts
    64
    Answers
    2
    Vote Rating
    0
    mikhailt is on a distinguished road

      0  

    Question Answered: RowExpander and grid updates. How to keep rows expanded?

    Answered: RowExpander and grid updates. How to keep rows expanded?


    I use RowExpander plugin with a grid. Grid is sometimes updated.
    I call store.load() to update the data and refresh the view.
    Then all expanded rows are collapsed.

    How to keep rows expanded after grid updates?

  2. Here is the solution i got from Sencha support. It works. Maybe someone else will need it. It is an override of RowExpander.
    Code:
    Ext.override(Ext.ux.RowExpander, {
        constructor: function() {
            this.callParent(arguments);
            var grid = this.getCmp();
            this.persist = [];
            this.recordsExpanded = {};
            // <debug>
            if (!this.rowBodyTpl) {
                Ext.Error.raise("The 'rowBodyTpl' config is required and is not defined.");
            }
            // </debug>
            // TODO: if XTemplate/Template receives a template as an arg, should
            // just return it back!
            var rowBodyTpl = Ext.create('Ext.XTemplate', this.rowBodyTpl),
                features = [{
                    ftype: 'rowbody',
                    columnId: this.getHeaderId(),
                    recordsExpanded: this.recordsExpanded,
                    rowBodyHiddenCls: this.rowBodyHiddenCls,
                    rowCollapsedCls: this.rowCollapsedCls,
                    getAdditionalData: this.getRowBodyFeatureData,
                    getRowBodyContents: function(data) {
                        return rowBodyTpl.applyTemplate(data);
                    }
                },{
                    ftype: 'rowwrap'
                }];
     
            if (grid.features) {
                grid.features = features.concat(grid.features);
            } else {
                grid.features = features;
            }
     
            // NOTE: features have to be added before init (before Table.initComponent)
        },
        persistExpandedRows: function () {
            /**
              - make a copy of the array since its elements could change during the iteration
              - if the element is less than the number of rows in the grid then keep it expanded
              - else remove it from the persist array
            */
            Ext.Array.forEach(this.persist.concat(), function (v) {
                if (v < this.view.store.data.length) {
                    this.toggleRow(v, true);
                } else {
                    this.updateState(v);
                }
             }, this);
        },
        updateState: function (rowIndex, persist) {
            // if persisting expanded rows, only change this.persist from the this.persistExpandedRows() method not this.toggleRow()
            var persisted = this.persist;
            if (persist) {
                return;
            }
            if (!Ext.Array.contains(persisted, rowIndex)) {
                persisted.push(rowIndex);
            } else {
                Ext.Array.remove(persisted, rowIndex);
            }
        },
        toggleRow: function(rowIdx, persist) {
            var rowNode = this.view.getNode(rowIdx),
                row = Ext.get(rowNode),
                nextBd = Ext.get(row).down(this.rowBodyTrSelector),
                record = this.view.getRecord(rowNode),
                grid = this.getCmp(),
                rowIndex = rowNode.rowIndex - 1;
     
            if (row.hasCls(this.rowCollapsedCls)) {
                row.removeCls(this.rowCollapsedCls);
                nextBd.removeCls(this.rowBodyHiddenCls);
                this.updateState(rowIndex, persist);
                this.recordsExpanded[record.internalId] = true;
                this.view.fireEvent('expandbody', rowNode, record, nextBd.dom);
            } else if (!persist) { // interrupt the normal toggling if persisting
                row.addCls(this.rowCollapsedCls);
                nextBd.addCls(this.rowBodyHiddenCls);
                this.updateState(rowIndex, persist);
                this.recordsExpanded[record.internalId] = false;
                this.view.fireEvent('collapsebody', rowNode, record, nextBd.dom);
            }
     
     
            // If Grid is auto-heighting itself, then perform a component layhout to accommodate the new height
            if (!grid.isFixedHeight()) {
                grid.doComponentLayout();
            }
            this.view.up('gridpanel').invalidateScroller();
        }
    });

  3. #2
    Ext JS Premium Member
    Join Date
    Apr 2008
    Location
    Oslo
    Posts
    64
    Answers
    2
    Vote Rating
    0
    mikhailt is on a distinguished road

      0  

    Question


    Is it possible to get all rows from the grid?
    Read the row state "expanded/collapsed" and restore it after grid refresh, maybe.
    Need help.

  4. #3
    Sencha User
    Join Date
    Aug 2010
    Posts
    45
    Answers
    1
    Vote Rating
    0
    daddie888 is on a distinguished road

      0  

    Default


    Hi, if you don't need to be able to collapse you should use the rowbody feature..

  5. #4
    Ext JS Premium Member
    Join Date
    Apr 2008
    Location
    Oslo
    Posts
    64
    Answers
    2
    Vote Rating
    0
    mikhailt is on a distinguished road

      0  

    Default


    I do not understand what you mean.
    Any code examples?

  6. #5
    Ext JS Premium Member
    Join Date
    Apr 2008
    Location
    Oslo
    Posts
    64
    Answers
    2
    Vote Rating
    0
    mikhailt is on a distinguished road

      0  

    Lightbulb


    Here is the solution i got from Sencha support. It works. Maybe someone else will need it. It is an override of RowExpander.
    Code:
    Ext.override(Ext.ux.RowExpander, {
        constructor: function() {
            this.callParent(arguments);
            var grid = this.getCmp();
            this.persist = [];
            this.recordsExpanded = {};
            // <debug>
            if (!this.rowBodyTpl) {
                Ext.Error.raise("The 'rowBodyTpl' config is required and is not defined.");
            }
            // </debug>
            // TODO: if XTemplate/Template receives a template as an arg, should
            // just return it back!
            var rowBodyTpl = Ext.create('Ext.XTemplate', this.rowBodyTpl),
                features = [{
                    ftype: 'rowbody',
                    columnId: this.getHeaderId(),
                    recordsExpanded: this.recordsExpanded,
                    rowBodyHiddenCls: this.rowBodyHiddenCls,
                    rowCollapsedCls: this.rowCollapsedCls,
                    getAdditionalData: this.getRowBodyFeatureData,
                    getRowBodyContents: function(data) {
                        return rowBodyTpl.applyTemplate(data);
                    }
                },{
                    ftype: 'rowwrap'
                }];
     
            if (grid.features) {
                grid.features = features.concat(grid.features);
            } else {
                grid.features = features;
            }
     
            // NOTE: features have to be added before init (before Table.initComponent)
        },
        persistExpandedRows: function () {
            /**
              - make a copy of the array since its elements could change during the iteration
              - if the element is less than the number of rows in the grid then keep it expanded
              - else remove it from the persist array
            */
            Ext.Array.forEach(this.persist.concat(), function (v) {
                if (v < this.view.store.data.length) {
                    this.toggleRow(v, true);
                } else {
                    this.updateState(v);
                }
             }, this);
        },
        updateState: function (rowIndex, persist) {
            // if persisting expanded rows, only change this.persist from the this.persistExpandedRows() method not this.toggleRow()
            var persisted = this.persist;
            if (persist) {
                return;
            }
            if (!Ext.Array.contains(persisted, rowIndex)) {
                persisted.push(rowIndex);
            } else {
                Ext.Array.remove(persisted, rowIndex);
            }
        },
        toggleRow: function(rowIdx, persist) {
            var rowNode = this.view.getNode(rowIdx),
                row = Ext.get(rowNode),
                nextBd = Ext.get(row).down(this.rowBodyTrSelector),
                record = this.view.getRecord(rowNode),
                grid = this.getCmp(),
                rowIndex = rowNode.rowIndex - 1;
     
            if (row.hasCls(this.rowCollapsedCls)) {
                row.removeCls(this.rowCollapsedCls);
                nextBd.removeCls(this.rowBodyHiddenCls);
                this.updateState(rowIndex, persist);
                this.recordsExpanded[record.internalId] = true;
                this.view.fireEvent('expandbody', rowNode, record, nextBd.dom);
            } else if (!persist) { // interrupt the normal toggling if persisting
                row.addCls(this.rowCollapsedCls);
                nextBd.addCls(this.rowBodyHiddenCls);
                this.updateState(rowIndex, persist);
                this.recordsExpanded[record.internalId] = false;
                this.view.fireEvent('collapsebody', rowNode, record, nextBd.dom);
            }
     
     
            // If Grid is auto-heighting itself, then perform a component layhout to accommodate the new height
            if (!grid.isFixedHeight()) {
                grid.doComponentLayout();
            }
            this.view.up('gridpanel').invalidateScroller();
        }
    });

Thread Participants: 1