Im quite stuck on changing the store of Extjs TreePanel, after some specific event I retrieved those values from the server :
"{"listType":false,"text":"root","children":[{"listType":false,"text":"Window","children":[{"listType":false,"text":"Window","children":[{"listType":false,"text":"height","children":[],"leaf":true},{"listType":false,"text":"items","children":[{"listType":false,"text":"border","children":[],"leaf":true},{"listType":false,"text":"store","children":[],"leaf":true},{"listType":true,"text":"columns","children":[],"leaf":false},{"listType":false,"text":"xtype","children":[],"leaf":true}],"leaf":false},{"listType":false,"text":"layout","children":[],"leaf":true},{"listType":false,"text":"title","children":[],"leaf":true},{"listType":false,"text":"width","children":[],"leaf":true}],"leaf":false}],"leaf":false}],"leaf":false}"
And I want to update the Treepanel 's store from that, is that possible?
You do not need to change the store, you just need new data. Something of this sort:
var root = treePanel.getRootNode();
root.removeAll();
root.appendChild(objectOrArrayWithChildren);
Related
I have an issue with Extjs remote filter that I excpect you could help to clarify.
I've created a grid with a remote filter that works great, but if I update the grid info, the filter keeps the previous loaded data.
I've tried everything: store.doDestroy, store.removeAll, even assign a new store to the var with Ex.create, but I didn't succeed.
I've created a Fiddle to try to reproduce my issue:
First load default info (Simpsons)
Then open the 'Hobbie' filter (Simulates a select distinct). You get Jazz, Skate, Beer and Knit.
After that, update the grid data (Switch to Van Houtens)
Finally, try to get Van Houtens hobbies (Videogames, Margaritas and None), but you get Simpsons Hobbies (Jazz, Skate..), cause the filter was previously loaded. (Notice how there was not a loading mask).
Now restart the test skipping step 2 (and 5 to avoid infinite loop XD) and notice how the right hobbies are shown.
I need to 'reset' that previous store load.
Notes:
If I just do a store.load, the request is triggered, but the returned values are not bound to the filter list.
If try to bind the store with this bind:{store:'{filterStore}'}, noting happens
You just need to "rebind" the filters for each column like this:
var grid = this.up('grid');
//Clear the current filters before changing
grid.getPlugins()[0].clearFilters();
var store = grid.getStore();
setStoreFilter(store, 'Van Houten');
//Setting the store filters is not enough
setStoreFilter(filterStore, 'Van Houten');
setStoreFilter(hobbiesStore, 'Van Houten');
//You need to "rebind" the store, it needs a little delay to work properly
setTimeout(function(){ grid.getColumns()[3].filter.bindMenuStore(hobbiesStore); }, 1000);
Here is the updated FIDDLE
I have a grid list which I populate the baseParams using setBaseParam() method and then in a later event I clear the baseParams like so:
workorder_list_primary.store.baseParams = {};
workorder_list_primary.store.load();
console.log(workorder_list_primary.store);
But this isn't working? I need to reset the filter criteria completely. I have tried using load() and reload() -- any ideas?
Based on the use of setBaseParam() which is only available in ExtJS 3.4 I guees you are using version 3.x
Based on the source of store this makes no sense because baseParams = {} will definitely override the params. Other params will be pushed by paging, can be added to the load call or can be added within a 'beforeload' eventhandler. You may need to check all of them.
I want to know how to insert items into a treestore sorted, if there is a way within extjs to do this. I then want to have the items appear in a treepanel sorted, although there may already be some nodes in the treepanel;
So, that question may be, how do I have a treepanel reload what it is displaying based on what is within my store. Let me be clear, I do not want to reload the store from some datasource. I want to reload the panel to reflect what is contained within the store. What is the best way to go about this?
There is no real default way to do this. What your going to have to do is create an empty store on the page that uses the same model as the tree, something really simple like this:
var mySortStore = Ext.create("Ext.data.Store", {
model: "MyTreeStore",
data: []
});
Then when you go to add the node to the tree, use this function instead:
function addNodeSorted(node, childToBeAdded){
//clear the store from previous additions
mySortStore.removeAll();
//remove old sorters if they are dynamically changing
mySortStore.sort();
//add the node into the tree
node.appendChild(childToBeAdded);
var cn = node.childNodes,
n;
//remove all nodes from their parent and add them to the store
while ((n = cn[0])) {
mySortStore.add(node.removeChild(n));
}
//then sort the store like you would normally do in extjs, what kind of sorting you want is up to you
mySortStore.sort('height', 'ASC');//this is just an example
//now add them back into the tree in correct order
mySortStore.each(function(record){
node.appendChild(record);
});
}
This could be a stupid question, but I cant figure out how to access store in gridpanel
var grid = new Ext.grid.GridPanel({
.....
store: store,
......
listeners: {
'beforerender' : function(grid) {
//grid.getStore();
}
}
I want to loop through the store , but grid.getStore() returns empty object.
you can simply do grid.store.
If you know it will be filled with data before the grid renders (you seem to be calling this from the grid beforerender event) you can do grid.store.getRange() to get the records that you want to loop through, as you mentioned in your question.
store variable is still visible in your listener code :)
I would like to create a Treepanel, which is updated once a second.
So I took a store with a proxy for data acquistion:
store = new Ext.data.TreeStore({
model: 'TaskState',
proxy: {
type: 'ajax',
url : '/getTaskList'
},
root: {
expanded: true
}});
The store seems to work, the data is displayed in my TreePanel.
I tried to update the Treepanel with this function:
function refresh(){
store.load();
window.setTimeout("refresh()", 1000);
}
The update seems to work as well. Unfortunately the update causes some kind of "blinking" effekt on every update, because the whole tree is reloaded. I'm searching for a way to only refresh the nodes, which have changed.
Is there some way to do this?
greetings
There is one way:
You can load your nodes to some temp store and change your main tree's store node by node
If you want to add any new node and do not want to reload the whole store then you can add like this
//overModel is Ext.data.Model
overModel.appendChild({
id: responseJson.data['id'],
text:responseJson.data['text'],
children:responseJson.data['children'],//array of childern
parent_id:responseJson.data['parent_id']
});
overModel.expand();
and if you want to load the whole store the you can do something like this
Ext.data.StoreManager.lookup('StoreName').load({ params: {"p1": p1}});
to load the store.
To update the store periodically you can use DelatedTask Class.
check out the Documentation API of EXTJS will give you more details.
Store is bind Treepanel like grid and store ,so you can get Store from tree panel with
var store=treepanel.getStore()
and you can reload the store with branch that you need update with
store.load({node:selectedNode})
You could use TaskManager for that:
Ext.TaskManager.start({
run: reloadStoreFunction,
interval: 1000
});
This would execute reloadStoreFunction every second.