Results 1 to 5 of 5

Thread: Issue with expand all when using rowexpander+bufferedgrid

  1. #1

    Default Issue with expand all when using rowexpander+bufferedgrid

    I have a problem when I try to implement expand all/collapse all functionality when using with rowexpander+bufferedgrid.
    Code:
    {
        text: 'Expand All',
        handler: function(){
            var expander = grid.getPlugin('rowex');
            store = grid.getStore(); 
            alert(store.getCount()); 
            for (var i = 0; i < store.getCount()-1; i++) { 
                    var record = store.getAt(i); 
                    if(grid.view.getNode(i) != null) { 
                            expander.toggleRow(i, record); 
                    } 
            } 
        }
    }
    I have the buffered store settings as,

    Code:
    plugins: [{
        ptype: 'bufferedrenderer',
        pluginId: 'buffrender',
        trailingBufferZone: 20,
        leadingBufferZone: 20 
    },{
        ptype: 'rowexpander',
        pluginId: 'rowex',
        rowBodyTpl : new Ext.XTemplate(
            '<p><b>Join Date:</b> {joinDate}</p>',
            '<p><b>DOB:</b> {dob}</p>',
            '<p><b>Sick Days:</b> {sickDays:this.formatChange}</p>',
        {
            formatChange: function(v){
                var color = v >= 2 ? 'green' : 'red';
                return '<span style="color: ' + color + ';">' + v + '</span>';
            }
        })
    }]

    But I am not able to identify if a row is expanded or collapsed.

    Any help/guidance much appreciated.

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    Here's a thread that has an example that might help you get this working:
    http://www.sencha.com/forum/showthread.php?259423

  3. #3

    Default

    Gary, Thanks.

    But when i access the link, it says I donr have access.

  4. #4
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    Apologies, I hadn't realized that it was a Premium thread. I can't post the entire discussion, but here is a post from pbaccari in which he includes the example I mentioned:

    Hi,

    Here an extend of RowExpander plugin to collapse, expand, collapseAll, expandAll grid rows:

    Code:
    Ext.define("myApp.grid.maAppPluginRowExpander", {
         alias: "plugin.myapprowexpander",
         extend: "Ext.grid.plugin.RowExpander",
    
    
         isCollapsed: function (rowIdx) {
             var me = this,
                 rowNode = me.view.getNode(rowIdx),
                 row = Ext.fly(rowNode, '_rowExpander');
    
    
             return row.hasCls(me.rowCollapsedCls)
         },
    
    
         collapse: function (rowIdx) {
             if (this.isCollapsed(rowIdx) == false) {
                 this.toggleRow(rowIdx, this.grid.getStore().getAt(rowIdx));
             }
         },
    
    
         collapseAll: function () {
             for (i = 0; i < this.grid.getStore().getTotalCount(); i++) {
                 this.collapse(i);
             }
         },
    
    
         expand: function (rowIdx) {
             if (this.isCollapsed(rowIdx) == true) {
                 this.toggleRow(rowIdx, this.grid.getStore().getAt(rowIdx));
             }
         },
    
    
         expandAll: function () {
             for (i = 0; i < this.grid.getStore().getTotalCount(); i++) {
                 this.expand(i);
             }
         }
    
    
     });

    An example to create plugin grid :


    Code:
                    ...
            plugins: [{
                    ptype: "myapprowexpander",
                    pluginId: "myRowExpanderPluginId"
                    ]
                }
            ],
                    ...

    An example to use of expandAll rows :

    Code:
    {
        xtype: "button",
        id: "myButtonId",
        sagheOrdre: 1,
        text: "Expand All",
        tooltip: "Expand All",
        icon: "images/expand-all.gif", // put your favorite icon !
        handler: function () {
            monPlugin = Ext.getCmp("myGridId").getPlugin("myRowExpanderPluginId");
    
    
            monPlugin.expandAll();
        }
    }


    Best regards.

  5. #5
    Sencha Premium User
    Join Date
    Jul 2014
    Posts
    269
    Answers
    15

    Default Error

    I am using the rowexpander plugin in a grid.

    With a button I want to expand and collapse all.

    Also, I want to expand them by default at the beginning.

    I am using EXTJS 5.1.1GPL.
    I use the solution proposed in this post.

    In Fiddle it works well.

    http://stackoverflow.com/questions/33445429/expand-all-grid-rows-by-default-with-rowexpander-extjs-5



    However, in all my grids, in various applications, always gives the error:

    Uncaught TypeError: Cannot read property 'hasCls' of null
    OverridePluginRowExpander.js?_dc=1448021242426:16

    I tested with console.log and strangely the last row is always null

    Any idea that can help solve this?

    Thanks in advance

    Code:
    Ext.define('test.ux.grid.OverridePluginRowExpander', {     
          alias: 'plugin.overriderowexpander',
         extend: 'Ext.grid.plugin.RowExpander',
    
         isCollapsed: function (rowIdx) {
             var me = this,
                 rowNode = me.view.getNode(rowIdx),
                 row = Ext.fly(rowNode, '_rowExpander');
                    console.log(rowNode);
                    console.log(row);
    
             return row.hasCls(me.rowCollapsedCls);
    
         },
    
         collapse: function (rowIdx) {
             if (this.isCollapsed(rowIdx) == false) {
                 this.toggleRow(rowIdx, this.grid.getStore().getAt(rowIdx));
             }
         },
    
         collapseAll: function () {
             for (i = 0; i < this.grid.getStore().getTotalCount(); i++) {
                 this.collapse(i);
             }
         },
    
    
    
    
         expand: function (rowIdx) {
             if (this.isCollapsed(rowIdx) == true) {
                 this.toggleRow(rowIdx, this.grid.getStore().getAt(rowIdx));
             }
         },
    
         expandAll: function () {
             for (i = 0; i < this.grid.getStore().getTotalCount(); i++) {
                 this.expand(i);
             }
         }
    
     });
    Solved:
    My grid has a paging bar.

    I change: for (i = 0; i < this.grid.getStore().getTotalCount(); i++) {

    by: for (i = 0; i < this.grid.getStore().getPageSize(); i++) {

    Now works great.
    Thanks.

    Attached Images Attached Images

Posting Permissions

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