Extjs 6.2 - How to Set the size of the nodes on a TreeStore

549 Views Asked by At

Using Extjs 6.2, it seems that I can't edit the size of the nodes on my TreeStore.

Ext.define('Ext.ux.bnp.menu.ApplicationMenuPluginStore', {
extend : 'Ext.data.TreeStore',
alias : 'store.menustore',
width : 2000, //doesn't work here


fields : [ {
    name : 'text'
} ],
id : 'menustore',

root : {
    expanded : true,

    children : [ {
        text : 'children',
        iconCls : 'fa fa-search',
        rowCls : 'x-treelist-item-selected',
        leaf : true,
        expanded : true,
        checked : true,
        href : '../dummy/dummy.jsp'
        witdh: 2000, //doesn't work here too
    }, 

    {
        text : 'dummy',
        iconCls:'fa fa-book',
        rowCls : 'nav-tree-badge',
        witdh : 2000, //doesn't work here
        selectable : false,
        children : [ 
        {
            text : 'dummy son',
            iconCls : 'fa fa-building',
            href : '../dummy/son.jsp',
            leaf : true
            witdh: 2000, //neither do here
        },

I've also tried to use some Css in order to change it:

.x-treelist-item-leaf {
  width          : 2000 !important;
}
.x-treelist-item-wrap {
  width          : 2000 !important;
}

.x-treelist-item {
  width          : 2000 !important;
}

Nothing seems to work. So I would like to know how can I edit the size of the nodes of my TreeStore.

1

There are 1 best solutions below

2
On BEST ANSWER

First of all, TreeStore is for data managing, if you want to change anything about view you must change TreePanel properties. Secondly the width of the node will be same as the width of the TreePanel(see in fiddle). If you want to change the height of the node, that is not a problem either: FIDDLE