PDA

View Full Version : What is alternative of TreeNodeUI?



livinglegends
18 Aug 2011, 4:17 AM
Hi,

I have developed my application using ExtJS 3.0. Now, we are migrating to ExtJS 4.

My query is:

In TreePanel I have used TreeNodeUI to put button in TreeNode.
How to deal with this in ExtJS 4.0? Plz provide sample code.

Thanks in advance
Livinglegends

skirtle
18 Aug 2011, 1:53 PM
Trees are now just fancy grids, so your first attempt should probably be to use a renderer function. There have been some small changes to how renderer functions work, see the docs:

http://docs.sencha.com/ext-js/4-0/#/api/Ext.grid.column.Column-cfg-renderer

stevil
18 Aug 2011, 2:29 PM
Trees are now just fancy grids, so your first attempt should probably be to use a renderer function. There have been some small changes to how renderer functions work, see the docs:

http://docs.sencha.com/ext-js/4-0/#/api/Ext.grid.column.Column-cfg-renderer

To add on to @skirtle's point, it is just a grid, and grids can have multiple columns. In fact,you can pass a columns config to the tree panel - one of which could be an Action column which has an icon specified for the button, and a handler for it's click.

stevil

livinglegends
19 Aug 2011, 12:00 AM
Hi All,

Thanks for your reply.

Actually, In TreePanel I want Button besides node name. That means node should have name as well as button besides it.

You said that Tree is now fancy grid but still there is separate panel for Tree. So, how to deal with it?

Thanks

stevil
19 Aug 2011, 6:27 AM
There is a separate panel for Tree, but if you follow the extend chain, you'll see that it ultimately extends Ext.panel.Table (which is the base functionality for grids).

What I would probably do is change add a column config for your tree panel with one column - the column that will hold the text and button.

Make the column xtype 'templatecolumn', and specify the html to render your text and the html for the button at the same time (see Ext.grid.column.Template for an example)

Now, if your button needs to be an Ext.button.Button, what you'll need to do is extend Ext.grid.column.Column, and create a column type that has configs for the text and the button, and lays out the column appropriately. That's somewhat more advanced.

stevil

livinglegends
19 Aug 2011, 6:34 AM
Stevil...thanx for reply

Can you provide any code hint? I have not started migration just doing R&D so if you can provide any sample code so it would be quite easy for me to implement this complex thing.

stevil
19 Aug 2011, 7:02 AM
Do you need an Ext.button.button, or just a clickable image?

stevil

livinglegends
19 Aug 2011, 7:18 AM
I want Ext.button.button

stevil
19 Aug 2011, 7:46 AM
I can't provide an example in a short amount of time - that would take a fair amount of experimentation on my part. I might look for anyone who has done custom grid columns - the principles would be the same.

stevil

livinglegends
23 Aug 2011, 3:17 AM
It would be fine if cannot provide complete program or example. Any code hint would be fine.