ExtJs 5: TreePanel: Not getting the default leaf icons and lines

Question

I created a sample TreePanel using Sencha ExtJs 5. I followed the sample example in the documentations and I am able to see the items (leaves and branches) but they are not coming as a Tree, but as a list.

Here is my code:

Store:

Ext.define('MyApp.store.ResourcesStore', {
extend : 'Ext.data.TreeStore',
root : {
    expanded : true,
    children : [ {
        text : "UI Forms",
        leaf: false,
        expanded : true,
        children : [ {
            text : "Web",
            leaf : true
        }, {
            text : "Smart Phone",
            leaf : true
        }, {
            text : "Tablet",
            leaf : true
        }, ]
    }, {
        text : "Reports",
        leaf : true
    }, {
        text : "Dashboards",
        leaf : true
    }, {
        text : "Entities",
        leaf : true
    }, {
        text : "Queries",
        leaf : true
    }, {
        text : "Services",
        leaf : true
    } ]
}
});

View:

Ext.define('MyApp.view.leftpanel.ResourcesView', {
extend : 'Ext.TreePanel',
xtype : 'resources-panel',
title : 'Resources',
store : 'ResourcesStore',
rootVisible : false
});

Here is what my output looks like:

enter image description here

After executing the sencha app build command: Accordion panel got impacted.

enter image description here

score 2 · Accepted Answer · answered Jun 11 '14 at 19:49

2

If you use Sencha Cmd then you most likely need to:

sencha app refresh
sencha ant sass

and if it does not help then

sencha app build

Application bootstrap needs to know that you are using trees so it knows which css to load.

answered Jun 11 '14 at 19:49

Saki

5,827
2
15
15

Although I created the default app using the `sencha generate app` command, I now integrated it into a dynamic web project using Eclipse. And doing the further development in eclipse. Can you tell where should I run these commands. I keep getting this error - `"[ERR] Command must be run from an application folder"` – DarkKnightFan Jun 12 '14 at 05:41
1

Run the command in the directory where is index.html - where was the application initially created. – Saki Jun 12 '14 at 07:26
Okay I did it and got the tree structure. Thanks for that. But now I have a new issue after doing this. The icons of accordion panel got screwed up. They are no longer the ones I had earlier. – DarkKnightFan Jun 12 '14 at 09:10
Pls see the added image above to support my previous comment. – DarkKnightFan Jun 12 '14 at 09:28
See if there are any "synchronous loading" warnings while in development. Fix all of them and rebuild. – Saki Jun 12 '14 at 10:04
Just an info for ppl reading these comments: Apart from running the `sencha app build` command in the directory where index.html is located, sencha CMD also requires the hidden `.sencha` directory at the same place. Then only the build command would work. – DarkKnightFan Jun 12 '14 at 11:18

score 0 · Answer 2 · answered Sep 08 '14 at 12:40

0

I had similar problem and found that just stopping "Sencha app watch" and restarting it resolved it.

answered Sep 08 '14 at 12:40

vinayakshukre

185
1
10

score 0 · Answer 3 · answered Apr 12 '15 at 10:52

Me too,the icons do not show,it looks like a list.And in my case, the sencha app build does not work. But I used sencha app watch,and the icons come around.I guess there must be something wrong with the the sencha cmd of my version 'Sencha Cmd v5.1.2.52',the watch cmd works is due to it helps to add the sass I needed.

ExtJs 5: TreePanel: Not getting the default leaf icons and lines

3 Answers3