PDA

View Full Version : [3.0]Ext.ux.tree.PagingTreeLoader



xiexueze
27 Apr 2009, 10:46 PM
HI,I rewrite the Ext.ux.tree.PagingTreeLoader (http://extjs.com/forum/showthread.php?p=213913)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:

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:

[{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:

{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.

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:

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:


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


and



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.

xiexueze
23 Jun 2009, 2:07 AM
I have managed to fix this issue by modifying following lines:


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


and



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.

that's great!
thanks for binod dokania !!
I found just modify the autoCreate like this:


autoCreate: {style:(Ext.isIE ? 'position:absolute':'')}

but when the tree's rootVisible is false,the root's toolbar would cover the first node.

Jacky1234
27 Jul 2009, 7:20 PM
HI,I rewrite the Ext.ux.tree.PagingTreeLoader (http://extjs.com/forum/showthread.php?p=213913)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:

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:

[{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:

{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

Jacky1234
27 Jul 2009, 10:35 PM
Thanks for your quick response, maybe the problem is on my winzip, anyway, I have got the file. Thanks lot!:D

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).

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 :

.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 :

'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();}

leon.wood
20 Jul 2010, 10:42 PM
Hi xiexueze,
i am facing one issue in IE 8. I tried resolving it but couldn't do that.

following is my code,is there something wrong?



var treeloader = new Ext.ux.tree.PagingTreeLoader({
dataUrl:requestContextPath+'/action?obj=tree.QueryMOEntityTreeAction',
requestMehod:'POST',
pageSize:5,
enableTextPaging:true,
pagingModel:'local',
baseAttrs:{ uiProvider: Ext.tree.TreeCheckNodeUI },
baseParams:{method:'ajax',parent:'root',nodetype:Ext.getCmp('rootID').getValue,leaf:leaf,store:store}
});


var MOEntity_tree = new Ext.tree.TreePanel({
x:0,y:30,
width:299,
height:300,
id:'MOEntity_tree',
rootVisible:true,
border:true,
animate:true,
autoScroll:true,
enableDD:false,
containerScroll:true,
collapsed :false,
lines: true,
singleExpand: false,
useArrows: false,
loader:treeloader,
checkModel: 'single',
checkNodeType: leaf,
plugins: new Ext.ux.tree.TreeNodeMouseoverPlugin(),
root: new Ext.tree.AsyncTreeNode({ id:'0',text:'root' })
});


21546

leon.wood
21 Jul 2010, 12:45 AM
Hi xiexueze,
i am facing one issue in IE 8. I tried resolving it but couldn't do that.

following is my code,is there something wrong?



var treeloader = new Ext.ux.tree.PagingTreeLoader({
dataUrl:requestContextPath+'/action?obj=tree.QueryMOEntityTreeAction',
requestMehod:'POST',
pageSize:5,
enableTextPaging:true,
pagingModel:'local',
baseAttrs:{ uiProvider: Ext.tree.TreeCheckNodeUI },
baseParams:{method:'ajax',parent:'root',nodetype:Ext.getCmp('rootID').getValue,leaf:leaf,store:store}
});


var MOEntity_tree = new Ext.tree.TreePanel({
x:0,y:30,
width:299,
height:300,
id:'MOEntity_tree',
rootVisible:true,
border:true,
animate:true,
autoScroll:true,
enableDD:false,
containerScroll:true,
collapsed :false,
lines: true,
singleExpand: false,
useArrows: false,
loader:treeloader,
checkModel: 'single',
checkNodeType: leaf,
plugins: new Ext.ux.tree.TreeNodeMouseoverPlugin(),
root: new Ext.tree.AsyncTreeNode({ id:'0',text:'root' })
});


21546

I know where is wrong ,just modify this
config.width = (Ext.isIE ? 150 : this.width);

aimuke
17 Aug 2010, 8:54 PM
I know where is wrong ,just modify this
config.width = (Ext.isIE ? 150 : this.width);


that's great!
thanks for binod dokania !!
I found just modify the autoCreate like this:


autoCreate: {style:(Ext.isIE ? 'position:absolute':'')}
but when the tree's rootVisible is false,the root's toolbar would cover the first node.


i used your suggestion,it works.but i found some new problems.when i set the "position:absolute" property the pagingtoolbar will never move. for example if i my tree have scrollbar and i sroll the tree ,the pagingtoolbar still stay on the original place.

pic original place22006

after tree scrolled22007

Tait
17 Dec 2010, 10:15 AM
Hi!

I tried your TreeLoader, but in my FF the button-bar has a linebreak effekt. (see Attachment)
Has anyone the same problem with FF or could give me a tip?
If I change the layout of the table by adding the attibute border="1" all is rendered without any linebreak

23873

EDIT:
fixed the Problem with my custom Layout by setting position to absolute.

bobthetree
14 Sep 2011, 10:19 AM
Anyone know why in firefox and chrome the toolbar shows up under the parent node instead of to the side of it?

berniesaurus
8 Jun 2012, 1:19 AM
Hi,

Any plans to port this to Ext 4.1?

Thanks!