Search code examples
javascriptcssextjsextjs6treestore

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


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.


Solution

  • 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