View Full Version : Combo and dynamically loading TreePanel

3 Sep 2009, 9:07 PM
I had a combo and TreePanel. When i select item in combo, based on selected value i am loading the TreePanel RootNode. But the problem is that the sub nodes are not expanding by default.

Here is my code

EdtDefinition = function() {

this.definitionRoles = new Ext.form.ComboBox({
id: 'id_definitionRoles',
fieldLabel: 'Definition Role',
name: 'definitionRole',
valueField: 'value',
store: XBRLDefinitionRolesStore,
displayField: 'name',
typeAhead: false,
editable: false,
mode: 'local',
triggerAction: 'all',
anchor: '50%'

this.definitionTree = new Ext.tree.TreePanel({
margins: '0 0 0 5',
useArrows: true,
collapsed: false,
containerScroll: true,
border: false,
enableDD: true,
collapsed: false,
rootVisible: false,
loader : new Ext.tree.TreeLoader({
dataUrl: hostaddress+'/xbrleditor/ getDefinitionTree.rap'
root: new Ext.tree.TreeNode({
text: 'Definition',
expanded: true,
allowDrop : false

EdtDefinition.superclass.constructor.call(this, {
id: 'id_EdtDefinition',
title: 'Definition',
method: 'POST',
labelWidth: 100,
border: false,
defaultType: 'textfield',
frame: false,
onSubmit: Ext.emptyFn,
items: [this.definitionRoles, this.definitionTree]

// Before loading tree set request params
this.tmpTreeLoader = this.definitionTree.getLoader();
this.tmpTreeLoader.on("beforeload", function(treeLoader, node) {
this.tmpTreeLoader.baseParams.taxonomyName = reqTaxonomyName;
this.tmpTreeLoader.baseParams.definitionRole = Ext.getCmp('id_definitionRoles').getValue();
}, this);

this.definitionTree.on("render", function(node) {
}, this);

// When combo event is selected
this.definitionRoles.on('select', function(combo, record, index){
}, this);


return true;

Ext.extend(EdtDefinition, Ext.form.FormPanel, {

loadDefinitionTree: function(value) {


Can anyone let me know how to solve this problem?

9 Sep 2009, 1:26 AM
Ok. I got it solved.

Everytime i select an option in the combo, i create a new node and add it as the Root node to the tree and then call expandAll() on the TreePanel.

var newRoot = new Ext.tree.AsyncTreeNode({
text: 'XYZ',
expanded: true,
allowDrop : false,
loader : new Ext.tree.TreeLoader({
dataUrl: '/getDefTree.rap',
baseParams: {'name':taxName, 'role': Ext.getCmp('id_defRoles').getValue() }

Hope this will help someone.