extjsextjs4extjs4.2extjs7extjs7-classic

Extjs treelist doesn't show to expand icon


I have upgraded my app from version 4 to 7 but when I use the xtype: 'treelist' the expanded icon doesn't show. I want to show that icon or change to other icon image

{ xtype: "container", layout: "hbox", items: [ { xtype: "container", layout: "hbox", cls: "user-dropdown", items: [ { xtype: "button", text: "", style: { "background-image": "url(https://botanica.gallery/wp/wp-content/plugins/buddypress-first-letter-avatar/images/roboto/256/greek_924.png)", "background-size": "cover", "background-repeat": "no-repeat", "background-position": "center", width: "28px", height: "28px", "padding-bottom": "2px", "border-radius": "100%", }, menu: { xtype: "menu", bodyStyle: { border: "none", boxShadow: "0 2px 10px rgba(0, 0, 0, 0.5)", }, items: [ { xtype: "container", layout: "hbox", items: [ { xtype: "panel", title: "Menu", flex: 1, // layout: 'fit', bodyStyle: {}, header: { style: { fontSize: "16px", fontWeight: "bold", }, }, items: [ { xtype: "treelist", store: Ext.create("Ext.data.TreeStore", { root: { children: [ { text: "Favourites", expandable: false, }, { text: "Orders, planning", expandable: false, }, { text: "Tracking, live data", expandable: false, }, { text: "Invoicing, followup", expandable: false, }, { text: "All menupoints", expandable: false, }, ], }, }), listeners: { itemmouseenter: function ( view, record, item ) { Ext.fly(item).setStyle({}); }, itemmouseleave: function ( view, record, item ) { Ext.fly(item).setStyle({}); }, },

                                  style: {
                                    fontSize: "14px",
                                    fontWeight: "normal",
                                    marginLeft: "-30px",
                                  },
                                },
                              ],
                            },
                            // Right Menu
                            {
                              xtype: "panel",
                              title: "All menupoints",
                              flex: 1,
                              layout: "fit",
                              bodyStyle: {
                                border: "none",
                              },
                              header: {
                                style: {
                                  fontSize: "16px",
                                  fontWeight: "bold",
                                },
                              },
                              items: [
                                {
                                  xtype: "treelist",
                                  store: Ext.create("Ext.data.TreeStore", {
                                    root: {
                                      children: [
                                        {
                                          text: "A",
                                          iconCls: "icon-help",
                                          expanded: true,
                                          style: {
                                            fontSize: "14px",
                                            fontWeight: "normal",
                                            marginLeft: "-30px",
                                          },
                                          children: [
                                            {
                                              text: "Addresses",
                                              leaf: true,
                                            },
                                            {
                                              text: "Address connections",
                                              leaf: true,
                                            },
                                            {
                                              text: "Address validation",
                                              leaf: true,
                                            },
                                          ],
                                        },
                                        {
                                          text: "B",
                                          iconCls: "icon-help",

                                          expanded: true,
                                          style: {
                                            fontSize: "14px",
                                            fontWeight: "normal",
                                            marginLeft: "-30px",
                                          },
                                          children: [
                                            {
                                              text: "Barcode scannings",
                                              leaf: true,
                                            },
                                          ],
                                        },
                                        {
                                          text: "C",
                                          expanded: true,
                                          style: {
                                            fontSize: "14px",
                                            fontWeight: "normal",
                                            marginLeft: "-30px",
                                          },
                                          children: [
                                            {
                                              text: "Calendar planner",
                                              leaf: true,
                                            },
                                            {
                                              text: "Chartek",
                                              leaf: true,
                                            },
                                            {
                                              text: "Chartek planner",
                                              leaf: true,
                                            },
                                            {
                                              text: "Chartek templates",
                                              leaf: true,
                                            },
                                            {
                                              text: "Claims",
                                              leaf: true,
                                            },
                                            {
                                              text: "Commodities",
                                              leaf: true,
                                            },
                                            {
                                              text: "Currencies",
                                              leaf: true,
                                            },
                                            {
                                              text: "Customers",
                                              leaf: true,
                                            },
                                          ],
                                        },
                                      ],
                                    },
                                  }),

                                  listeners: {
                                    itemmouseenter: function (
                                      view,
                                      record,
                                      item
                                    ) {
                                      Ext.fly(item).setStyle({});
                                    },
                                    itemmouseleave: function (
                                      view,
                                      record,
                                      item
                                    ) {
                                      Ext.fly(item).setStyle({});
                                    },
                                  },
                                  style: {
                                    fontSize: "14px",
                                    fontWeight: "normal",
                                  },
                                },
                              ],
                            },
                          ],
                        },
                      ],
                    },
                    listeners: {
                      click: function (button) {
                        var menu = button.getMenu();
                        if (menu) {
                          menu.showBy(button);
                        }
                      },
                    },
                  },
                ],
              },
            ],
          },

Solution

  • I've edited your code and created a fiddle.

    After watching, it seems that everything is good.

    Here it is.

    You haven't described your problem enough. But I suppose you have some mistakes in loading css files.