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.
Related
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);
I'm new to extjs and I'm trying to work on a Tree view.
I am building an "API Explorer" and there are simply too many nodes to send as a single json object (a few million nodes). What I wanted to do instead was send the first layer of categories as json initially, then on expand do an ajax request to get all of that category's children.
I'm not sure how to do this or if it's possible. Can anyone lead me in the right direction?
Actually that is the "normal" way as suggested by the documentation. Have a look at any of the Tree examples.
You basically set up an Ext.data.TreeStore with a Proxy, e.g. an Ext.data.proxy.Ajax:
xtype: 'treepanel',
loadMask: {msg: 'Loading...'},
store: Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'get-nodes.php'
}
})
Each time the user expands one of the nodes, the URL will be hit with the parameter node set to the id of the expanded node and should return an array of the children of this node. These children must not have a children property theirselves, otherwise they would be considered already loaded and would not be loaded on expansion.
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);
});
}
I have a Panel with multiple grids. I'm trying to make some kind of global refresh button by which I mean, a button that will refresh all the grids and open tabs, without losing data like when F5 is pressed.
With two of the grids it was easy just get the store and load it but the third one makes a problem. When I try the same as with the previous two which works OK I get URL is undefined.
Here is my code:
reloadInstructionsStore: function() {
var reloadInstructionSt = this.getStore('Instructions');
var activeCat = this.getActiveCategory();
reloadInstructionSt.clearFilter(true);
reloadInstructionSt.filter({
filterFn: function(item) {
return item.get('category_id') == activeCat;
}
}),
reloadInstructionSt.load();
},
The only reason I can think of is that the store that I use here is defined different from the other 2. It's not with PROXY and CRUD, but looks like this:
Ext.define('MY.store.Instructions', {
extend: 'Ext.data.Store',
model: 'MY.model.InstructionRecord',
autoLoad: true,
data: g_settings.instructionsApi.initialData
});
Is the problem here and is there a way to make things work even like this?
Thanks
Leron
You do not need to reload this store, the data is provided on initial page load. The variable g_settings.instructionsApi.initialData tells me that the data is available as static on the page. All you need to do in this case is reset the filter, and just remove the reloadInstructionSt.load(); call.
If you actually do want the data to reload from the server, you will need to give your store a url that it can get the data from and the server will have to be able to serve this data up.
I wonder why ExtJS developers decide to remove reload() method in ExtJS 4 Store API. I think it's a bad decision.
Here is my problem. I'm using the following code to initialize a grid's store:
store.load({
params: {
paramName: dynamicParameter
}
});
NOTICE the dynamicParameter variable in the code above.
Then, if I delete some records from the grid, I need to reload the store.
The problem is: the code segment which reload the store should not know the dynamicParameter value.
The code to delete records is like this:
function deleteGridItems(grid, deleteUrl){
// get selected rows
var records = grid.getSelectionModel().getSelection();
// ...... (codes to send request for deletion is ignored) ......
if(success){
grid.getStore().reload();
}
}
Unfortunately, the grid.getStore().reload() above will be an error because in ExtJS 4, reload() function doesn't exist anymore.
So how to reload the store with the same parameter??
Thank you.
If I'm not mistaken load() function now does exactly the same as reload() before. Try it.
you need to set proxy extra params instead specifying it each time on load():
see this http://www.sencha.com/forum/showthread.php?127673-Reload-Store-in-EXT-JS-4
Also note that Ext JS doesn't appear to check before loading whether the store is already loading data. I'm not sure why this is, but it can be fixed by overriding the load() method in a Store or TreeStore.
load: function(options) {
// Loading quickly will cause data in the panel to break
if (!this.isLoading()) {
this.callParent(arguments);
}
},
I haven't experienced issues with grids, but with trees if you press the refresh button very quickly you sometimes get an error and the tree structure breaks:
Uncaught TypeError: Cannot read property 'internalId' of undefined