View Full Version : TreePanel question

23 Apr 2014, 4:45 AM
I'm new to ExtJS and I need to display a treepanel with 2 columns. The first column, of course, is the tree. Each node in the tree represents a "group" and a group may have one or more sub-groups nested below it (hence, my need for a tree :-). The second column in my treepanel will display a "permission level" for each group. This "permission level" can only be one of the following: "NONE", "READ-ONLY" or "MODIFY". However, I need to allow my user to change the "permission level" for each node. And if a node has children, the "permission level" that they set on the parent node needs to be cascaded down to all the child nodes, as well. To that end, I've been trying to display a combobox with permission level values for each node but I've run into a couple of issues. First off, it doesn't seem that putting a combobox in a gridcolumn is readily supported out of the box in ExtJS 4.2.x. I've searched the forums here and Googled for ideas but haven't come up with anything good yet so I've just been trying different things. Here's what I've currently done in my view:
Created a simple store that defines my "permission level" values

Created a combobox, set it to use the store defined above, and added a "select" listener so I know when a value has been selected in the combobox

In my treepanel, I added a gridcolumn with the following config:

1. set the renderer config to a function that will get the value of my permission level from the store defined above
2. set the editor config to use the combobox defined above
In my treepanel config, I set the following:

selType: 'cellmodel',plugins: [Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit: 1})]
My treepanel is using a store with a model that contains two properties: a name and a permissionLevel

Ext.define('UserMgmt.model.Team', {extend: 'Ext.data.Model', requires: ['Ext.data.Field'], fields: [{name: 'name', type: 'string'}, {name: 'permission', type: 'integer'}]});
When I select a permissions level value from the combobox, the select event listener fires and does the following:
1. gets a reference to the tree and then gets the selected tree node
2. sets the permission level for the corresponding node to whatever was selected in the combobox
3. if the selected node has children, I call a recursive function to change set the 'permission level' of all of the child nodes to same value that was assigned to the parent node
After doing all this, I put a button in my UI to loop through the selected tree node (and all child nodes) and log the node name and permission level value to the console. Based on this output, it appears that the permission level values are being updated properly for the selected node and any child nodes. However, I can't get the value in the combobox for each of these nodes to update and display the appropriate value until I collapse and re-expand the parent node in the tree. Does anyone know if it's possible to get the treepanel to re-draw or re-fresh? Or am I going about this all wrong? Thanks in advance for any advice you can offer!