1. #1
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Phoenix, AZ
    Posts
    646
    Vote Rating
    12
    zombeerose will become famous soon enough zombeerose will become famous soon enough

      2  

    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

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,174
    Vote Rating
    1258
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    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
    Sencha Inc, Senior Software Engineer
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Phoenix, AZ
    Posts
    646
    Vote Rating
    12
    zombeerose will become famous soon enough zombeerose will become famous soon enough

      0  

  4. #4
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,174
    Vote Rating
    1258
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    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
    Sencha Inc, Senior Software Engineer
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Phoenix, AZ
    Posts
    646
    Vote Rating
    12
    zombeerose will become famous soon enough zombeerose will become famous soon enough

      0  

    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
    528
    Vote Rating
    49
    mysticav will become famous soon enough mysticav will become famous soon enough

      0  

    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
    Vote Rating
    0
    antarctica77 is on a distinguished road

      0  

    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
    646
    Vote Rating
    12
    zombeerose will become famous soon enough zombeerose will become famous soon enough

      0  

    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.