Results 1 to 9 of 9

Thread: RowExpander including expand/collapse all via header

  1. #1
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Phoenix, AZ
    Posts
    651

    Default RowExpander including expand/collapse all via header

    Anybody familiar with the Ext.ux.RowExpander class provided by ExtJS may find this ux helpful. It allows a user to click the column header that is created by the RowExpander in order to quickly expand/collapse all rows. Check it out.

    Any feedback is welcome.
    Attached Files Attached Files

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,449

    Default

    You should throw this up onto GitHub or something so we can read the source... I'm a nerd, I like reading source code
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

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

  3. #3
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Phoenix, AZ
    Posts
    651

  4. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,449

    Default

    Cool, very nice sir! Two very small performance things...

    You have two col.on statements in your init method, you could join into one:

    Code:
    col.on({
        scope : me,
        headerclick : me.onHeaderClick,
        render : me.onHeaderRender
    });
    In your toggleAll method you have ds.each which will iterate through the store items. It would perform just a tad faster if you used your own for loop...


    Code:
    var recs = ds.data.items,
        r = 0,
        rNum = recs.length,
        record;
    
    for (; r < rNum; r++) {
         record = recs[r];
    
        if (me.recordsExpanded[record.internalId] !== expand) {
            me.toggleRow(r);
        }
    }
    The reason is two fold. First in the for loop, r is your index versus having to do the indexOf lookup. Also using ds.each you are executing a function for every loop iteration which can affect performance, with the for loop you aren't executing a function.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

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

  5. #5
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Phoenix, AZ
    Posts
    651

    Default

    @mitchellsimoens
    Thanks for the review. I have to disagree about your first point though regarding listeners. If you examine the observable code, you will notice that passing an object to the listener is less efficient because it must iterate the object and call itself for each case. It also incurs a regex performance hit for every iteration. I ran some tests to prove it.

    Running on Chrome v17.0

    Code:
    var c = new Ext.Component();
    var i = 0;
    var start = new Date().valueOf();
    
    for (i = 0; i < 50000; i++){
      c.on('show',Ext.emptyFn);
      c.on('hide',Ext.emptyFn);
      c.on('activate',Ext.emptyFn);
      c.on('beforeshow',Ext.emptyFn);
      c.on('beforehide',Ext.emptyFn);
    }
    var end = new Date().valueOf();
    console.log(end - start);
    Averaged about 1239 ms.

    Code:
    var c = new Ext.Component();
    var i = 0;
    var start = new Date().valueOf();
    
    for (i = 0; i < 50000; i++){
      c.on({
        'show':Ext.emptyFn,
        'hide':Ext.emptyFn,
        'activate':Ext.emptyFn,
        'beforeshow':Ext.emptyFn,
        'beforehide':Ext.emptyFn
      });
    }
    var end = new Date().valueOf();
    console.log(end - start);
    Averaged about 1499 ms.

    -----
    Thanks for the record loop suggestion. I am always at odds when it comes to loops b/c the Ext.each is convenient, results in slightly less code, and easier to read IMO. I would also think that it is more resilient to API changes, but that is just a guess. None the less, I have made the change and should be available on github now.

  6. #6
    Sencha User mysticav's Avatar
    Join Date
    Mar 2007
    Location
    Mexico
    Posts
    531

    Default

    Great Plugin. Thanks.

    I would like to see a "plus/minus" icon on top of the column.

    Hope you can integrate that.

  7. #7
    Sencha Premium Member
    Join Date
    Jan 2014
    Posts
    2

    Default

    I wanted to add that this was very useful for me and I'm using it with ExtJS 6. I did augment the toggleAll function a bit to assign the correct class to incoming nodes with bufferedRender: true on the grid:toggleAll: function(expand){ var me = this, ds = me.getCmp().getStore(), records = ds.getRange(), l = records.length, nodes = me.view.getNodes(), n = nodes.length, i, node, record; for (i = 0; i < l; i++){ record = records[i]; node = me.view.getNode(i); if(node) { if (me.recordsExpanded[record.internalId] !== expand){ me.toggleRow(i,record); } } else { if (me.recordsExpanded[record.internalId] !== expand){ me.recordsExpanded[record.internalId] = expand; } } } }Anyway, just wanted to say thanks for posted this - it's still useful many years later.

  8. #8
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Phoenix, AZ
    Posts
    651

    Default

    @antarctica77

    Glad to hear it's useful, and thanks for the update.

    I integrated your change and posted it on github: https://github.com/zombeerose/RowExp...ae4b11db006b20

    BTW, please wrap JavaScript in [code] tags for readability.

  9. #9

    Default

    Great plugin, thanks! I'm using this with ExtJS 6.5.

    In case this is useful to anyone, I used the following CSS to add the plus/minus icon at the top using Font Awesome:

    Code:
    .rowexpand-expand-all,
    .rowexpand-collapse-all {
    	font: 16px/1 FontAwesome;
    	overflow: visible;
    	text-overflow: initial;
    	cursor: pointer;
    }
    
    
    .rowexpand-expand-all:before {
    	content: "\f196";
    }
    
    
    .rowexpand-collapse-all:before {
    	content: "\f147";
    }

Posting Permissions

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