PDA

View Full Version : How to dynamically generate or reload a tree in treepanel?



dlozovsky
31 Jan 2014, 12:30 PM
I am using extjs 4.2.x with Architecure 3.0.2 and I need help to dynamically generate or reload a tree in the treepanel.

I have a MyViewport (Ext.container.Viewport) that contains a treepanel. My treepanel has a NAVStore (Ext.data.TreeStore).
How can i dynamically loading or creating this store object inside my treepanel, so that every time, when I create my new MyViewport object, a new tree will appear?
Of course, i need to pass 2 or 3 to MyViewport and/or to NAVStore some how.
Can I pass 2 or 3 directly to NAVStore without going thru MyViewport and MyViewport will still show me new tree?

I am using Architecture 3 and Extjs 4.2.x

1) Here is my MyApp.view.MyViewport def:

Ext.define('MyApp.view.MyViewport', {
extend: 'Ext.container.Viewport',

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [

{
xtype: 'treepanel',
id: 'treenavpanel',
title: 'Navigation Panel',
store: 'NAVStore',
rootVisible: false
}
]
});

me.callParent(arguments);
}

});

2) Here is my MyApp.store.NAVStore def:

Ext.define('MyApp.store.NAVStore', {
extend: 'Ext.data.TreeStore',

requires: [
'MyApp.model.NAV',
'Ext.data.proxy.Ajax',
'Ext.data.reader.Json'
],

constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
model: 'MyApp.model.NAV',
storeId: 'navTreeStore',
proxy: {
type: 'ajax',
extraParams: {
accgroup: 3
},
url: 'data/navtree.php',
reader: {
type: 'json',
root: 'children'
}
}
}, cfg)]);
}
});

3) My navtree.php file is working fine with parameter accgroup (2 or 3); it generated correct JSON for my tree.
I am calling these (see below), but they are not working for me; the old tree with accgroup = 3 is still showing up, not with accgroup = 2 that I just passed in.

Ext.create('MyApp.view.MyViewport', {renderTo: Ext.getBody()});
Ext.getCmp('treenavpanel').store.load({url: 'data/navtree.php', params: {accgroup: 2}});

Please help me if you can. Any help would be appreciated for sure.
Thanks so much.


-Daniel

mdnaveed42
6 Feb 2014, 6:03 AM
Hi,

Your requirement is loading a tree with some data and update it with fresh data...Correct me if wrong..

Following is the sample code..



var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [{
text: "detention",
leaf: true
}, {
text: "homework",
expanded: true,
children: [{
text: "book report",
leaf: true
}, {
text: "algebra",
leaf: true
}]
}, {
text: "buy lottery tickets",
leaf: true
}]
}
});


var newStore = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [{
text: "Java",
leaf: true
}, {
text: "Javascript",
expanded: true,
children: [{
text: "Ext JS",
leaf: true
}, {
text: "Angular JS",
leaf: true
}]
}, {
text: "Hurray",
leaf: true
}]
}
});


Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
itemId: 'sampleTree',
width: 200,
store: store,
rootVisible: false,
renderTo: Ext.getBody(),
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
xtype: 'button',
text: 'Load New Data',
handler: function() {
Ext.ComponentQuery.query('#sampleTree')[0].bindStore(newStore); ---> Data returned from service
}
}]
}]
});


Thanks,
Md Naveed
\m/