ExtJS - Text Treeview Align

28 Views Asked by At

I'm having trouble creating a treeview panel on ExtJS. When creating a treeview, the treeview text appears from the right as shown below:

treeview text extjs

but when I change the panel layout to Border type, the treeview text successfully displays normally from the left, but the console says '[E] Layout run failed', as shown below:

treeview console err

this is my code in Dashboard.js

Ext.define('ExtInfo.view.main.dashboard.Dashboard', {
    extend : 'Ext.container.Viewport',
    alias : 'widget.myviewport',
    xtype : 'app-dashboard',

    requires : [
        'ExtInfo.view.main.menu.Menu'
    ],

    itemId : 'myviewport',
    layout : {
        type : 'border'
    },

    initComponent : function () {
        var me = this;

        Ext.applyIf(me, {
            items : [
                {
                    xtype : 'tabpanel',
                    region : 'center',
                    itemId : 'mainPanel',
                    activeTab : 0,
                    items : [
                        {
                            xtype : 'panel',
                            title : 'dashboard'
                        }
                    ]
                },
                {
                    xtype : 'menu',
                    width : 250,
                    collapsible : true,
                    region : 'west',
                    align : 'center',
                    split : true
                }
            ]
        });

        me.callParent(arguments);
    }
}); 

this is my code in Menu.js

Ext.define('ExtInfo.view.main.menu.Menu', {
    extend : 'Ext.panel.Panel',
    alias : 'widget.menu',

    requires : [
        'ExtInfo.view.main.menu.MenuItems'
    ],
        
    width : 301,

    frame : true,

    layout : {
        type : 'border'        
    },
    title : 'Menu',

    items : [
        {
            xtype : 'menu-tree',
        }
    ]
}); 

and this is my code in MenuItem.js

Ext.define('ExtInfo.view.main.menu.MenuItems', {
    extend: 'Ext.tree.Panel',
    xtype : 'menu-tree',

    border: 0,
    autoScroll: true,
    title: '',
    rootVisible: false,
    

    store : {                      
        root : {            
            expanded : true,                                                  
            children : [
                {
                    text : 'Akses Table Database',
                    expanded : true, 
                    children : [
                        {
                            text : 'Tabel Area Pelayanan',
                            id : 'menu_tb_area_pelayanan',
                            leaf : true
                        },
                        {
                            text : 'Tabel Daya Baru',
                            id : 'menu_tb_daya_baru',
                            leaf : true
                        },
                        {
                            text : 'Tabel Daya Lama',
                            id : 'menu_tb_daya_lama',
                            leaf : true
                        },
                        {
                            text : 'Tabel Golongan Daya',
                            id : 'menu_tb_golongan_daya',
                            leaf : true
                        },
                        {
                            text : 'Tabel Harga kWh',
                            id : 'menu_tb_harga_kwh',
                            leaf : true
                        },
                        {
                            text : 'Tabel Harga kWh Stroom',
                            id : 'menu_tb_harga_kwh_stroom',
                            leaf : true
                        },
                        {
                            text : 'Tabel Jenis Kontruksi',
                            id : 'menu_tb_jenis_kontruksi',
                            leaf : true
                        },
                        {
                            text : 'Tabel Jenis Tarif',
                            id : 'menu_tb_jenis_tarif',
                            leaf : true
                        },
                        {
                            text : 'Tabel Lokasi File',
                            id : 'menu_tb_lokasi_file',
                            leaf : true
                        },
                        {
                            text : 'Tabel Tarif Tenaga Listrik',
                            id : 'menu_tb_ttl',
                            leaf : true
                        }
                    ]
                },
                {
                    text : 'Akun',
                    expanded : true,
                    children : [
                        {
                            text : 'Tambah User Akun',
                            id : 'menu_tambah_akun',
                            leaf : true
                        },
                        {
                            text : 'Ganti Password',
                            id : 'menu_ganti_password',
                            leaf : true
                        }
                    ]
                }
            ]
        }
    },
});

**how to make the treeview text appear from the left and in the browser console there is no error?

I hope you understand what I mean and apologize if my English is not good.**

0

There are 0 best solutions below