[3.0]Ext.ux.tree.PagingTreeLoader

**xiexueze** · 27 Apr 2009 10:46 PM

HI,I rewrite the Ext.ux.tree.PagingTreeLoader to support the ext3.0 rc1

this PagingTreeLoader has been tested in IE6/firefox3/chrome1/safari4

PagingTreeLoader suports 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,default 20
      enableTextPaging:true,                          //whether to show the pagination's text 
      pagingModel:'local'                             //local means client paging ,remote means server paging,default local
    }), 
    root: new Ext.tree.AsyncTreeNode({ id:'0',text:'root' }) 
});

the server just get the 'node' parameter 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 code just change the pagingModel value to 'remote'.
the server will receive some parameters:
node : the id of the node which is expending or paging
start : the start index of the children,when the node first expends,the start value is 0
limit : equals the jscode's pageSize,means the count of the node to show ervery time
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}]}

**binod dokania** · 10 May 2009 8:28 AM

Hi xiexueze,

i am facing one issue in IE6. I tried resolving it but couldn't do that.
Although I am not able to reproduce this on the example you have attached.
Following is snapshot when I tried the plugin without any changes (in IE6).

1.gif

When I commented out following line.

Code:

autoCreate: {style:(Ext.isIE ? 'display: inline;white-space:nowrap;margin:-2px 0px;vertical-align:middle':'')},

I got following.Please refer the next screenshot.

2.gif

I have attached the IE6 toolbar snapshot as well in case of 2nd scenario.

3.gif

Although the container Div has style as inline but still it is not able to align after root node.
Looking at the IE devtoolbar div is appened to anchor tag as per the logic in (Ext.isIE)
Please help me to resolve this or provide some guidance to resolve this.
This is working fine in FF3.

**xiexueze** · 10 May 2009 9:29 PM

HI binod dokania:
thanks for report.
this is odd! It is working fine in my IE6.
could you post your code on here?
or you can try to increase the 100 corresponding in the code:

HTML Code:

 config.width = (Ext.isIE ? 100 : this.width);

luck!

**Sesshomurai** · 23 May 2009 3:36 AM

This is a good idea, but I think the presentation is a little awkward. All those floating paging bars looks a little clunky. So here's what I would do.

1. Put a node at the end of the page of nodes that is a paging node, this way its contained within the parent of the nodes being paged and doesn't have to always be visible.
2. Or put a single paging bar at the bottom of the tree control and have it page whatever parent node is selected.

Either of those approaches would be cosmetically more concise and aesthetic so I will find some time to modify this in that way so y'all can see if it works for you.

**binod dokania** · 26 May 2009 11:19 AM

Hi,

I am able to reproduce this in the example you attached.
If you add this line in the html, you can see this behavior (i.e. paging bar appear under root group in IE7)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

I need this line to make other functionality working and make my code w3c compliance.

**binod dokania** · 21 Jun 2009 10:44 PM

I have managed to fix this issue by modifying following lines:

Code:

if(Ext.isIE){
el = Ext.DomHelper.append(el,{tag:'div',style:'display: inline;white-space:nowrap;position:absolute'},true);

and

Code:

autoCreate: {style:(Ext.isIE ? 'display: inline;white-space:nowrap;position:absolute;margin:-2px 0px;vertical-align:middle':'')},

Hope it helps someone who faced similar issue.

**art.home.ext** · 8 Oct 2009 5:14 AM

Hi all !
Thanks for this nice and helpful extension.

I'm interested in displaying toolbar the way Sesshomurai described (in the last node of the paged node).

Originally Posted by Sesshomurai

This is a good idea, but I think the presentation is a little awkward. All those floating paging bars looks a little clunky. So here's what I would do.

1. Put a node at the end of the page of nodes that is a paging node, this way its contained within the parent of the nodes being paged and doesn't have to always be visible.

Unfortunately the toolbar is displayed before (I think and I can be wrong) children are rendered.
How can I workaround this problem ?
Thanks.

**art.home.ext** · 9 Feb 2010 6:40 AM

Buttons are now too big
Using :

Code:

.x-btn-icon .x-btn-small .x-btn-text{
	height: 13px;
	width: 13px;
}

fixes the problem.

I've also added some treepanel listeners to hide pagingtoolbar on collapsed nodes :

Code:

'expandnode':function(sNode){if (sNode.attributes.ptb)sNode.attributes.ptb.show();this.body.unmask();},
'collapsenode':function(sNode){if (sNode.attributes.ptb)sNode.attributes.ptb.hide();}

**Jacky1234** · 27 Jul 2009 7:20 PM

Originally Posted by xiexueze

HI,I rewrite the Ext.ux.tree.PagingTreeLoader to support the ext3.0 rc1

this PagingTreeLoader has been tested in IE6/firefox3/chrome1/safari4

PagingTreeLoader suports 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,default 20
      enableTextPaging:true,                          //whether to show the pagination's text 
      pagingModel:'local'                             //local means client paging ,remote means server paging,default local
    }), 
    root: new Ext.tree.AsyncTreeNode({ id:'0',text:'root' }) 
});

the server just get the 'node' parameter 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 code just change the pagingModel value to 'remote'.
the server will receive some parameters:
node : the id of the node which is expending or paging
start : the start index of the children,when the node first expends,the start value is 0
limit : equals the jscode's pageSize,means the count of the node to show ervery time
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}]}

Hello,

I also have a similair requirement about tree pagination, your demo looks good, but unfortunantly, the zip file you uploaded is invalid file, I can't extract it.
Could you please upload it again? Many Thanks!

**xiexueze** · 27 Jul 2009 8:50 PM

hi Jacky1234
I have download it again, the file can be extracted,and works fine, can you try again?
thanks

[3.0]Ext.ux.tree.PagingTreeLoader

Thread Tools

Search Thread

Display

Hybrid View

[3.0]Ext.ux.tree.PagingTreeLoader

[3.0]Ext.ux.tree.PagingTreeLoader

[3.1.1] Compatibility

[3.1.1] Compatibility