Selected Node - tree panel

[filipator]

Hi everyone,

Thanks for your help regarding my last post.


I have the following situation: one treepanel(master) and one grid(details). When I click a node in the tree panel, I would like to pass a parameter to the store of the grid and load data.


Here is what I did so far:


For the tree I added a listener for the tree node click event and it works fine.

<ext:TreePanel ID="tree1" ...>

...
<Listeners>
	<Click Handler="#{StatusBar1}.setStatus({text: 'Node: ' + node.text + '', clear: true});#{store1}.reload();" />

</Listeners>

...

In the store I am (desperately) trying to get the selected node id *from the tree and put it in the parameter, but I cannot succeed.

<ext:Store runat="server" ID="store1"...>

...
** * * *<BaseParams>
** * * * * *<ext:Parameter Name="selNodeID" Value="#{tree1}.getSelectionModel().getSelectedItem().id" Mode="Raw" />

** * * *</BaseParams>

I have tried various options, such as:

** * * * * *<ext:Parameter Name="selNodeID" Value="#{tree1}.getSelectionModel().getSelectedItem.id" Mode="Raw" />

or*

** * * * * *<ext:Parameter Name="selNodeID" Value="#{tree1}.getSelectionModel().selections.items[0].data.id" Mode="Raw" />

plus few others, but without success.
Please help.


Thanks in advance,

[plykkegaard]

Maybe you should reconsider your design?

I have a page with treecontrols and tabpanel and another page with the gridpanel (short story)
It's just a matter of creating a new tabpage and load the other page based on settings in the url property of the treenode

Like this example
https://examples1.ext.net/#/TreePanel/Basic/SiteMap/

I have done the above in my application and it's working very well

Obviously if your treepanel reflects some sort of filtering for the same tabpage you need to do some tweaking to get up and running

rgds

[Vladimir]

Hi,

Click on node is not select it (not always select). Therefore after clicking you can have no selected node.


I suggest to pass clicked node in to reload function


<div style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); "><ext:TreePanel ID="tree1" ...>

<div style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); ">...
<div style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); "><Listeners>
<div style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); "> <Click Handler="#{StatusBar1}.setStatus({text: 'Node: ' + node.text + '', clear: true});
<div style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); ">** * * * #{store1}.reload({params:{selNodeID: node.id}});" />
<div style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); "></Listeners>

<div style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); ">...
<div style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); ">

<div style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); ">And remove selNodeID from Store BaseParams
<div style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); ">

[filipator]

Peter, Vlad*Thanks for the help. I chose Vlad's solution, because it was very quick to test and it works. I am also considering the one Peter suggested.


Can I also do something like:*


1 click the node*
2 place the node id in a hidden field*
3 read the hidden field in codebehind, or use that hidden field value in the store parameter?


Regards,