1. #1
    Sencha User
    Join Date
    Mar 2011
    Location
    Germany
    Posts
    118
    Vote Rating
    0
    da_b0uncer is an unknown quantity at this point

      0  

    Default Building "paging" for a Ext.tree.Panel

    Building "paging" for a Ext.tree.Panel


    I have to implement a (very broad) tree, which can handle about >30.000 nodes. Since this kills the browser I need a paging mechanism. The server side is already implemented. When I request the children of a node, I can put a start and a limit to the request and end up with a subset of the children.

    Now I need to implement this behavior into the Ext.tree.Panel, because this Component somehow doesn't has a paging feature by itself.

    I have data-nodes, which are all leaves and tree-nodes which acts as "directories". My idea was to use something like a colspan for all the cells, to get one ID-cell and one big cell, merged of the remaining cells, for the paging menu.

    Something like this:

    Code:
    |ID    | Sessions | Clicks |
    .
    .
    .
    |dir1  | 1 2 3 4 5 6 7 8 9 |
    | data1| 2314     | 23565  |
    | data2| 1233     | 20125  |
    | data3| 2314     | 23565  |
    | data4| 1233     | 20125  |
    | data5| 2314     | 23565  |
    | data6| 1233     | 20125  |
    |dir1  | 1 2 3 4 5 6 7 8 9 |
    | data1| 2314     | 23565  |
    | data2| 1233     | 20125  |
    | data3| 2314     | 23565  |
    | data4| 1233     | 20125  |
    | data5| 2314     | 23565  |
    | data6| 1233     | 20125  |
    How do I get this colspan behavior into a tree-panel? I saw a feature called "RowBody" but it just adds the first record as extra row at the bottom of the tree and leaves the rest of the rows like they are.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,078
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

  3. #3
    Sencha User
    Join Date
    Mar 2011
    Location
    Germany
    Posts
    118
    Vote Rating
    0
    da_b0uncer is an unknown quantity at this point

      0  

    Default


    Oh I already do!

    Problem is, one node can have >1000 children, which kills the DOM.

    So I thought about a paging per node.
    When I expand a node the first 20 children get loaded and then I want to browse them.

    The back-end is already able to do this, but I need some GUI to do it smoothly.

    I also tried "actioncolumns" for this, but don't get the paging icons hidden for leaf-nodes.

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,078
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    That sure is a lot of data to be shoving into a node. It may be beneficial to take another approach .. like a parent/child set of grids where paging is already supported.

    Scott

  5. #5
    Sencha User
    Join Date
    Mar 2011
    Location
    Germany
    Posts
    118
    Vote Rating
    0
    da_b0uncer is an unknown quantity at this point

      0  

    Default


    I know and I don't think this is a good approach either ....

    sadly I didn't write the requirements :\

    I can configure the treepanel to just load the first 20 children without any effort.
    The problem is to get a nicely integrated paging, with informations about the current page and stuff.
    I think it has to go into the parents row, but how do I manipulate whole rows in a treepanel for every node?

  6. #6
    Sencha User
    Join Date
    Mar 2011
    Location
    Germany
    Posts
    118
    Vote Rating
    0
    da_b0uncer is an unknown quantity at this point

      0  

    Default


    I tried to use the ActionColumns for this.

    With the renderer and metadata I got the buttons hidden for leaf-nodes.

    But I have to show all the pages, which requires me to show a dynamic number of buttons per row.

    The configuration only permits to define one set of buttons for all records.

  7. #7
    Sencha User
    Join Date
    Mar 2011
    Location
    Germany
    Posts
    118
    Vote Rating
    0
    da_b0uncer is an unknown quantity at this point

      0  

    Default


    I got it to work with a renerer function.

    something like this:

    Code:
    width: 0,
    renderer: function( strValue, oMetaData, oRecord ) {
      var oButton;
      var oActionColumn = this;
    
      if( oRecord.data.leaf )
      {
        oMetaData.style = 'display: none;';
      }
      else
      {
        oMetaData.tdAttr = 'colspan="1000"';
        oActionColumn.items = oActionColumn.generatePagingLinks( oActionColumn.items, oRecord );
      }
    }
    The generatePagingLinks() function will use the paging informations the oRecord has to create new items, also deleting the ones from the last iteration (so every row gets is own set)

    Since the ActionColumn gets inserted after the TreeColumn, it will always be the second column and the colspan hides the other columns effectively. (40 columns is probably the widest table I will get, but safety first)

    The display:none; style keeps the buttons hidden for leafs, so nodes, which can't have children will display the normal columns, without any buttons.

    The only Problem I got now, is, that I get the children count when I request the first children, so I can't calculate the pages before I expand a node.

  8. #8
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,078
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    You might have a nice component when you get this working.

    Scott.

  9. #9
    Sencha User
    Join Date
    Mar 2011
    Location
    Germany
    Posts
    118
    Vote Rating
    0
    da_b0uncer is an unknown quantity at this point

      0  

    Default


    treepaging.png

    I figured it out to create the right amout of page links for every node with children, but since I can only output strings in a renderer I don't know how to bind methods from my controller to those.

    The ActionColumn seems to create simple image tags and bind them, but I don't understand the mechanism :\

  10. #10
    Sencha User
    Join Date
    Mar 2011
    Location
    Germany
    Posts
    118
    Vote Rating
    0
    da_b0uncer is an unknown quantity at this point

      0  

    Default


    Wrote my own column class for this.
    Got the problem with the eventhandling of the links figured out but now the load() function of the treestore doesn't load ne children for my parent node.

    I want to
    Code:
               
    oStore.reload( {
     node  : oRecord.parentNode,
     params: {
      parent: strNodeId,
      startAt:  20 * nPage,
      limit: 20
     }
    } );
    I want to discard the children of oRecord.parentNode and load the new ones with new parameters.

    But this doesn't even trigger the load event...

Thread Participants: 1

Tags for this Thread