I'm having issues getting the node and record. Also I can not make a node that is visible: false on init to show programmatically.
Check out this fiddle
https://fiddle.sencha.com/#view/editor&fiddle/3hs5
I found the issue. I used setData instead of root.appendChild so the store wasn't correctly populated.
The fiddle is updated and now works
Related
I have a simplified fiddle that shows the issue I'm seeing:
https://fiddle.sencha.com/#view/editor&fiddle/2nbs
The application has two tabs. Each tab contains an instance of a component made up of a tree panel and a grid. Clicking a node in the tree populates the grid. If you visit both tabs before clicking a node in either tree then the application behaves. However, if you click a tree node in the first tab and thus populate the grid, then visiting the 2nd tabs throws this error:
ext-all-debug.js:53117 Uncaught TypeError: Cannot read property 'isSynchronous' of null
at constructor.loadsSynchronously (ext-all-debug.js:53117)
at constructor.createMask (ext-all-debug.js:106694)
at constructor.onRender (ext-all-debug.js:105766)
at constructor.finishRender (ext-all-debug.js:38449)
at constructor.finishRenderItems (ext-all-debug.js:76675)
at constructor.finishRender (ext-all-debug.js:76992)
at constructor.finishRenderChildren (ext-all-debug.js:79000)
at constructor.afterRender (ext-all-debug.js:37909)
at constructor.finishRender (ext-all-debug.js:38463)
at constructor.finishRenderItems (ext-all-debug.js:76675)
I'm building in extjs 5.1.3, but this reproduces in the latest version (6.6). I suspect I'm missing something stupidly obvious...
I found the problem...
the code that was destroying the old store was also destroying ext-store-empty - used by all empty grids etc
so I did this:
if (oldStore && oldStore.storeId !== 'ext-empty-store') {
oldStore.destroy();
}
there might be a neater way, but this works.
I am working with ExtJS 4.2 and have two tree panels. I am also using treeviewdragdrop to be able to drag some nodes from left tree to right.
Now let me explain the problem I am having.
You can see that AMAZONE is the Service Alias and as soon you change something in that textfield, there is a listener on blur to update right tree's root text. Since its AMAZON now, the root is also AMAZON. Then you can drag items from left to right like i have in the picture (Yhoo, dbTask).
This is when I get into trouble. When I go back and change the SERVICE ALIAS, it changes the name but nodes disappear since I have to reload the root node again in order to see the updated root text. Is there a way to maybe update the view, that actually updates whatever changed were made. This what I have now.
This is the code
listners:
{
blur: function()
{
var root_node = right_tree.getRootNode();
root_node.data.text = new_alias_name;
right_tree.store.load(); // or reload()
}
}
I know I can save dropped node into a variable and as soon as I reload the tree, I can assign those as children. But something tells me there should be simpler way. Thnaks ;)
Use:
root_node.set('text', new_alias_name');
And remove the call to load.
Using Sencha Touch (2.2) with Sencha Architect 2
I have a tree structure in which I navigate.
The nodes are Elements and elements can either be a folder or a leaf.
To display the elements on my Ext.dataview.dataview (LIST), I use a store (storeID: 'elementstore') and Ext.dataview.component.Dataitem.
Here is my code to fill the LIST at first and everytime we open a folder to go deeper in the tree.
Filling the store for the first time, disable event so update() is not
called twice has I will be switching to this view right after the
creation of it. It works well and give back the desired result. I have
in my LIST the first level of Folders and Leaf displayed.
This is fired directly in the list with an onItemTap Event
var EStore = Ext.getStore('elementstore');
EStore.removeAll();
EStore.suspendEvents();
EStore.add(record.get('arrElement'));
EStore.resumeEvents(true);
Emptying and refilling the store with the reached level of the tree.
This is fired directly in the LIST with an onItemTap Event
if(record.get('strUIType') === 'folder')
{
INDEX_STACK.push(index);
store = Ext.getStore('elementstore');
store.removeAll();
store.add(record.get('arrElement'));
}
What is wrong is when I try to go backward, going up in my tree. Here
is the code which is located in a Sencha Controller.
It actually does not go back one level but back at the top level. ACTIVE_PROJECT is the
index of the active tree which are all located in my project store.
var popped =INDEX_STACK.pop();
var tab = tabpanel.getParent().getParent().getParent().getComponent('projects_Tab');
if(popped === undefined)
{
tab.setActiveItem(0);
}
else
{
var eStore = Ext.getStore('elementstore');
eStore.removeAll();
//Crashes!
eStore.add(Ext.getStore('projectstore').getAt(ACTIVE_PROJECT).get('arrElement'));
}
Has you see the eStore.add(....) is the crashing line on which I get the following error :
Uncaught TypeError: Cannot call method 'indexOf' of null sencha-touch-all.js:21
Ext.Array.contains.e
Ext.Array.include
Ext.define.join
Ext.define.insert
Ext.define.add
Ext.define.onMain_TabsTap (----Yep this line is my code the rest is sencha touch...
Ext.define.doFire
The only thing I achieve to add to the store in this controller is an empty Ext.create(CarboZero.model.Element). I can not get anything from my active project.
Is there something wrong with removing and readding? Is my store getting corrupted from how I'm using it? I have been working on that for about 2 days without getting anything to work properly...
EDIT TO THE QUESTION
I just set in my Element store the destroyRemovedRecords to FALSE.
Everything works, but I don't understand ANYTHING on why it corrected the problem with my particular structure... WHat is the remove() doing exactly???
Set Element store's property to the following
destroyRemovedRecords : false
Solve the problem, still can't explain why.
I had the same issue. In my case, the caching became full. On the leaf models, you could set useCache: false to prevent the data to get cached. That fixed my issue.
I'm having issues getting tablesorter to work correctly with the following code:
el = this.view.render().el;
$("#players").html(el);
$("#players-table").tablesorter({
theme: 'blue'
});
The table sorter styles get applied fine, but none of the columns will sort.
However, if I set a breakpoint in firebug on 3rd line, wait until the table renders then continue on, it works fine.
According to the .html() documentation for jQuery, .html() is a synchronous call. Shouldn't this mean that setting a breakpoint and "waiting" shouldn't have an effect? Is there something I am missing?
Turns out the issue was that I forgot about was the collection being fetched is async. So while this code was actually correct, it was running before the collection (which is passed to the view) was populated.
So the reason the breakpoint worked is that it gave the collection time to populate and render before going through and tablesorter-ing the table.
Without more context my best guest at fixing this would be to specifically target the jquery element $el instead of el.
$("#players").html(this.view.render().el);
this.view.$el.tablesorter({
theme: 'blue'
});
I have a Tree Panel which I expand programmatically.
When I expand a node, I would like to "jump to" this node, I mean to scroll to it.
How to scroll a tree panel to a specific node ?
UPDATE:
I use Ext 4.1
Try using selectPath() http://docs.sencha.com/ext-js/4-0/#!/api/Ext.tree.Panel-method-selectPath
In extjs 3.x you can try calling focus() on the TreeNodeUI (myNode.ui.focus())
The tree is asynchronously loading every node, and you need to call to focus only after all the nodes have been loaded. What you are going to need to do is to set autoLoad to false on your root node, then later in the code manually load the root node for the first time using:
rootNode.expand(true, function(){
myTreePanel.getView().focusRow(nodeyouwanttofocus);
});
doing it this way allows you to use the first parameter of the expand function that makes the expand fully recursive and also assures that the second parameter that is a function only executes after all the nodes are loaded, guarenteeing that the view is the correct height and that the node exists visually.
Another option that allows more flexability is to hook into the expand event:
var myTreeStore = Ext.create("Ext.data.TreeStore", {
listeners: {
expand: function(theParentNode){
theParentNode.eachChild(function(node){
if(nodeIWantSelected == node)
myTreePanel.getView().focusRow(node);
}
}
}
});
and you can use the .select of the selection model to hook in to select the node (and I think it may focus the node too).
I haven't tried 'selectPath' as suggested by Sha before, which seems a lot easier to use, but you can hook in the focusRow function as the callback and I think that would work too.
You can use tree.getView().focusRow(), like it:
tree.expandPath(
'/root/1/2/3',
'id',
'/',
function() {
tree.getView().focusRow(tree.getStore().getNodeById('3'));
}
});
But, if your tree use animate: true and load every node asynchronously and any node in the path not loaded yet this approach doesnt work (tree is not scrolled to the selected node because of multiple layout updates).
As workaround you can:
set animate: false for tree;
add 'afterlayout' listener, like this:
tree.on('afterlayout', function() {
tree.getView().focusRow(tree.getSelectionModel().getSelection()[0]);
}
I guess you can add this handler when needed and remove it when everything is done.