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
{ 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);
}
},
},
},
],
},
],
},
I've edited your code and created a fiddle.
After watching, it seems that everything is good.
You haven't described your problem enough. But I suppose you have some mistakes in loading css files.