PDA

View Full Version : Changing Tree Panel Store on demand



bevara.siva
15 Apr 2014, 3:28 AM
Hi,

We are using Sencha Architect 3 and ExtJs 4.2.2.
We want to change the TreePanel store on button click.
We tried reconfigure(store) but its not working.

Please help.

Regards,
SivaPrasad.B

scottmartin
15 Apr 2014, 1:14 PM
Can you be more specific? What is not working? Any errors?



Ext.application({
name : 'Fiddle',

launch : function() {

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 storeNew = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "New-detention", leaf: true },
{ text: "New-homework", expanded: true, children: [
{ text: "New-book report", leaf: true },
{ text: "New-algebra", leaf: true}
] },
{ text: "New-buy lottery tickets", leaf: true }
]
}
});

var treeP = Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody()
});


setTimeout(function(){
treeP.reconfigure(storeNew);
},1000);

}
});

bevara.siva
15 Apr 2014, 10:01 PM
Thank you for the response.
I am not able to find the reason why its not working.
Following is the code.



Ext.application({
name : 'Fiddle',




launch : function() {
Ext.define('Task', {
extend: 'Ext.data.Model',
fields: [
{name: 'text', type: 'string'},
{name: 'user', type: 'string'}
]
});

var store = Ext.create('Ext.data.TreeStore', {
model: 'Task',
proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'json'
}
},
});
var storeNew = Ext.create('Ext.data.TreeStore', {
model: 'Task',
proxy: {
type: 'ajax',
url: 'data2.json',
reader: {
type: 'json'
}
},
});







//Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
var treeP = Ext.create('Ext.tree.Panel', {
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: Ext.getBody(),
rootVisible: false,
store: store,

//the 'columns' property is now 'headers'
columns: [{
xtype: 'treecolumn', //this is so we know which column will show the tree
text: 'text',
flex: 2,
sortable: true,
dataIndex: 'text'
},{
text: 'Assigned To',
flex: 1,
dataIndex: 'user',
sortable: true
}]
});
setTimeout(function(){
treeP.reconfigure(storeNew);
},1000);



}
});


data1.json


{
expanded: true,
children: [
{ text: "detention", user:"siva", leaf: true },
{ text: "homework", user:"prasad", leaf: true },
{ text: "buy lottery tickets", user:"mantri", leaf: true }
]
}

data2.json


{
expanded: true,
children: [
{ text: "detention_new", user:"siva", leaf: true },
{ text: "homework1_new", user:"prasad", leaf: true },
{ text: "buy lottery tickets1_new", user:"mantri", leaf: true }
]
}


Can you please try this.

Regards,
SivaPrasad.B

scottmartin
16 Apr 2014, 4:39 AM
It seems the tree is autoloading the store, but on reconfigure you have to load the store, or set autoLoad: true



var storeNew = Ext.create('Ext.data.TreeStore', {
model: 'Task',
//autoLoad: true,
proxy: {
type: 'ajax',
url: 'data2.json',
reader: {
type: 'json'
}
},
});

storeNew.load();

bevara.siva
18 Apr 2014, 2:17 AM
Hi Scott,
Thank you for the response.
store.load() is working if we dont have the child nodes.
Its loading the data twice if it has child nodes. Please try the same sample with the following data objects.


Ext.application({
name : 'Fiddle',


launch : function() {
Ext.define('Task', {
extend: 'Ext.data.Model',
fields: [
{name: 'text', type: 'string'},
{name: 'user', type: 'string'}
]
});

var store = Ext.create('Ext.data.TreeStore', {
model: 'Task',
autoload:true,
proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'json'
}
},
});
var storeNew = Ext.create('Ext.data.TreeStore', {
model: 'Task',
autoload:true,
proxy: {
type: 'ajax',
url: 'data2.json',
reader: {
type: 'json'
}
},
});




//Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
var treeP = Ext.create('Ext.tree.Panel', {
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: Ext.getBody(),
rootVisible: false,
store: storeNew,
tools: [{
type: 'refresh',
tooltip: 'Refresh',
handler: function (event, toolEl, panelHeader) {
store.load();
treeP.reconfigure(store);


}
}],
//the 'columns' property is now 'headers'
columns: [{
xtype: 'treecolumn', //this is so we know which column will show the tree
text: 'text',
flex: 2,
sortable: true,
dataIndex: 'text'
},{
text: 'Assigned To',
flex: 1,
dataIndex: 'user',
sortable: true
}]
});


}
});



data1.json


{
expanded: true,
children: [
{ text: "detention", user:"siva", expanded: true,
children: [ { text: "homework", user:"prasad", leaf: true },
{ text: "buylottery", user:"mantri", leaf: true }] }

]
}


data2.json


{
expanded: true,
children: [
{ text: "detention_new", user:"siva", expanded: true,
children: [ { text: "homework_new", user:"prasad", leaf: true },
{ text: "buylottery_new", user:"mantri", leaf: true }] }

]
}


Please help.

Regards,
SivaPrasad.B

bevara.siva
21 Apr 2014, 10:14 PM
Can anybody help on this???