PDA

View Full Version : Admin Dashboard menu fails if tree store is filtered



froamer
25 May 2017, 1:24 AM
My app, like many others are based on the Admin Dashboard example.

If you filter the tree store that the menu uses (e.g. to restrict access), it breaks the menus when in collapsed mode.

Here are the steps:

1) Open the example (http://examples.sencha.com/extjs/6.5.0/examples/admin-dashboard/#email)

2) Open the console and apply a filter to the store:


Ext.StoreManager.lookup('NavigationTree').addFilter(function(i){ return true; });

3) Collapse the menu, then hover on a tree item that was not expanded ("Pages" is a good example)

Observe the following error:


[Error] TypeError: null is not an object (evaluating 'c.dom.parentNode')
setFloated (app.js:1:943009)
floatItem (app.js:1:948515)
onToolStripMouseOver (app.js:1:951298)
fire (app.js:1:163916)
fire (app.js:1:272711)
publish (app.js:1:272332)
publishDelegatedDomEvent (app.js:1:272516)
doDelegatedEvent (app.js:1:273074)
onDelegatedEvent (app.js:1:272860)
onDelegatedEvent

As you can see, this happens even if the filter doesn't actually filter out anything; it's existence is enough.

mangeloos
9 Jun 2017, 1:42 AM
My app, like many others are based on the Admin Dashboard example.

If you filter the tree store that the menu uses (e.g. to restrict access), it breaks the menus when in collapsed mode.

Here are the steps:

1) Open the example (http://examples.sencha.com/extjs/6.5.0/examples/admin-dashboard/#email)

2) Open the console and apply a filter to the store:


Ext.StoreManager.lookup('NavigationTree').addFilter(function(i){ return true; });

3) Collapse the menu, then hover on a tree item that was not expanded ("Pages" is a good example)

Observe the following error:


[Error] TypeError: null is not an object (evaluating 'c.dom.parentNode')
setFloated (app.js:1:943009)
floatItem (app.js:1:948515)
onToolStripMouseOver (app.js:1:951298)
fire (app.js:1:163916)
fire (app.js:1:272711)
publish (app.js:1:272332)
publishDelegatedDomEvent (app.js:1:272516)
doDelegatedEvent (app.js:1:273074)
onDelegatedEvent (app.js:1:272860)
onDelegatedEvent

As you can see, this happens even if the filter doesn't actually filter out anything; it's existence is enough.

I had the same issue. Seems like that the treelist is not dealing correctly with applying the layout after the store is filtered. I have not get into it completely to sort out what the problem was.

What I did to overcome this issue, is use a Ext.tree.Panel instead of a Ext.list.Tree. This has some drawbacks, as the navigation-ui layout is not applicable to the treepanel. But that will be solvable..

Take note:
1) in the MainController, function onNavigationTreeSelectionChange: function (tree, node) {}: the node now returns an array. The first item (node[0]) is the same as the node was before
2) you have to add rootVisible: false to the treepanel config

hope this helps