1. #1
    Ext User
    Join Date
    Jul 2007
    Posts
    24
    Vote Rating
    -1
    xiexueze has a little shameless behaviour in the past

      0  

    Default [2.2]Ext.ux.tree.PagingTreeLoader

    Ext.ux.tree.PagingTreeLoader class extends Ext.tree.TreeLoader class
    suport client paging and server paging

    1.client paging uages:
    HTML Code:
    var tree = new Ext.tree.TreePanel({
        applyTo:'tree-ct', 
        width:300, 
        height:400, 
        autoScroll:true, 
        plugins: new Ext.ux.tree.TreeNodeMouseoverPlugin(), //must use the plugin 
        loader: new Ext.ux.tree.PagingTreeLoader({         //use the extend TreeLoader 
          dataUrl:'getNodes.jsp', 
          pageSize:10,                                    //the count of the childnode to show every time
          enableTextPaging:true,                          //whether to show the pagination's text 
          pagingModel:'local'                             //local means client paging ,remote means server paging
        }), 
        root: new Ext.tree.AsyncTreeNode({ id:'0',text:'root' }) 
    }); 
    the server just get the 'node' paramenter value,and return the JSON like this:
    HTML Code:
    [{id:1,text:'node1',leaf:false,children:[{...},...{...}]},{id:1,text:'node2',leaf:true},...,{id:100,text:'node100',leaf:true}] 
    2.server paging uages:
    the js just change the pagingModel value to 'remote'.
    the server will receive some parameters:
    1. node : the id of the node which is expending or paging
    2. start : the start index of the children,when the node first expends,the start value is 0
    3. limit : equals the jscode's pageSize,means the count of the node to show ervery time
    4. total : the total count of the node's children,when the node first expends,the total parameter dosen't exist

    the server return the JSON like this:
    HTML Code:
    {total:200,nodes:[{id:1,text:'node1',leaf:false},...,{id:100,text:'node100',leaf:false}]} 
    Update 2009-4-28
    I had rewrote this extension to fix some bugs,and had upload to the attachment name PagingTreeLoader(2009-4-28).zip

    the PagingTreeLoader had been tested in IE6/firefox3/chrome1/safari4, and support the ext2.x , thanks !
    Attached Images
    Attached Files
    Last edited by xiexueze; 27 Apr 2009 at 10:28 PM. Reason: update

  2. #2
    Ext User
    Join Date
    Dec 2007
    Posts
    11
    Vote Rating
    0
    Emblem Parade is on a distinguished road

      0  

    Default

    I'm getting a "D.firstChild is null" error.

    Any chance you can post a non-JSMin-ed version of the source, so I can help debug?

    This seems like an ingenious way to handle the "very large tree" problem. I hope we can get it to work!

  3. #3
    Ext User
    Join Date
    Aug 2008
    Posts
    5
    Vote Rating
    0
    juststrings is on a distinguished road

      0  

    Default

    xiexueze,

    I think your post is extremely useful since pagination is required many a time... I am trying to implement the same paging functionality in EXT 1.1... Could you pl.post the non minified version so that many users like myself could benefit from this? I think I am getting an error in the Toolbar constructor because I am using EXt 1.1 but nevertheless I think I might be able to use your class as a very useful starting point and build from there..

    Thanks!

  4. #4
    Ext User
    Join Date
    Jan 2009
    Posts
    38
    Vote Rating
    0
    crashedsnow is on a distinguished road

      0  

    Default Display issues

    Hi,

    I've just implemented this extension, and it's exactly what I needed! I have a tree with some branches owning thousands of nodes. Very good solution.

    I do have some display issues though.

    1. I had to modify the source code to change the style of the text displayed after the textbox (the source has a hard coded <font>) tag which I changed to a span with a style

    2. I get a strange "wobble" when I mouse over the paging toolbar within the tree. It's only about a 1 pixel vertical wobble as the mouse is moved, but it makes the control look a bit strange. (hard to explain this one)

    3. When operating within a bordered layout with a scrollbar, we get two weird behaviors (see attached)

    A) When paging to the next page, the call to "reload()" the node causes the tree to close the node for reloading (normal tree behavior). If however, closing the node causes the scroll in the containing panel to change, the paging toolbar is left "floating" in mid-air until the node is loaded. We solved this by adding the following:

    Code:
    	reload : function() {
    		this.hide(); <-- Added this
    		this.updateField();
    		this.treeNode.reload()
    	},
    This just makes sure the toolbar is hidden while the reload happens.

    B ) When the width of the containing panel is not sufficient to contain the toolbar, it is rendered ABOVE the scrollbar/split of the layout. See attachments for this.

    Any ideas on solutions to 2, and 3B?

    Thanks
    Attached Images
    Last edited by crashedsnow; 26 Jan 2009 at 8:10 PM. Reason: smiley remove

  5. #5
    Ext User
    Join Date
    Jan 2009
    Posts
    38
    Vote Rating
    0
    crashedsnow is on a distinguished road

      0  

    Default Wobble Solved (Hacked)

    I just added this "hack" to fix the toolbar "wobble" (mentioned in previous post).

    In Ext.ux.tree.PagingTreeLoader#showToolbar, changed the "move" behaviour

    Code:
    		// add a fudge factor to keep toolbar stable
    		var currentA = this.pagingTreeToolbar.getEl().getX();
    		var currentG = this.pagingTreeToolbar.getEl().getY();
    		if(Math.abs(currentA - A) > 5 && Math.abs(currentG - G) > 5) {
    			this.pagingTreeToolbar.getEl().moveTo(A, G);
    		}

  6. #6
    Ext JS Premium Member
    Join Date
    Jun 2008
    Posts
    110
    Vote Rating
    0
    superDuke is on a distinguished road

      0  

    Default Needs mouseout to hide?

    If you have your root node paged, when you move out of the treepanel, the pager toolbar remains. This is problamatic if your tree is inside a tab panel. When switching tabs, the pager is on top of all other items. Has anyone else had this issue?

  7. #7
    Ext JS Premium Member
    Join Date
    Jun 2008
    Posts
    110
    Vote Rating
    0
    superDuke is on a distinguished road

      0  

    Default

    Got it.. thanks to Animal in http://extjs.com/forum/showthread.ph...375#post180375

    Code:
    Ext.ux.tree.TreeNodeMouseoverPlugin = Ext.extend(Object, {
        init: function(_tree) {
            if (!_tree.rendered) {
                _tree.on('render', function() {this.init(_tree)}, this);
                return;
            }
            this.tree = _tree;
            _tree.body.on('mouseover', this.onTreeMouseover, this, {delegate: 'a.x-tree-node-anchor'});
            _tree.body.on('mouseout', this.onTreeMouseout, this, {delegate: 'div.x-tree-node-el'});
        },
    
        onTreeMouseover: function(e, t) {
            var nodeEl = Ext.fly(t).up('div.x-tree-node-el');
            if (nodeEl) {
                var nodeId = nodeEl.getAttributeNS('ext', 'tree-node-id');
                if (nodeId) {
                    this.tree.fireEvent('mouseover', this.tree.getNodeById(nodeId), e);
                }
            }
        },
        
        onTreeMouseout: function(e, t) {
            var nodeEl = Ext.fly(t);
            if (nodeEl) {
                var nodeId = nodeEl.getAttributeNS('ext', 'tree-node-id');
                if (nodeId) {
                    this.tree.fireEvent('mouseout', this.tree.getNodeById(nodeId), e);
                }
            }
        },
    });

  8. #8
    Ext User
    Join Date
    Mar 2009
    Posts
    17
    Vote Rating
    0
    binod dokania is on a distinguished road

      0  

    Default

    I tried using this plugin but I am not getting any pagination buttons (next,previous etc.) although I am able to get the desired number of nodes. I am assuming that by the side of node to expand these buttons should appear.

    Am I missing any images or any css to include. I have included

    pagingTreeLoader.js
    pagingTreeLoader.css
    TreeNodeMouseoverPlugin.js

  9. #9
    Ext JS Premium Member
    Join Date
    Jun 2008
    Posts
    110
    Vote Rating
    0
    superDuke is on a distinguished road

      0  

    Default

    Have you tried using firebug to see if the mouseout / mouseover events are firing? Firebug should also tell you if you are including resources but the paths are bad.

  10. #10
    Ext User
    Join Date
    Mar 2009
    Posts
    17
    Vote Rating
    0
    binod dokania is on a distinguished road

      0  

    Default

    Following is the snapshot from firebug which says that mouseover event is fired.
    I am also not getting any resources not fround exception
    Attached Images