Question

I've a Window with a Tree Panel navigation. It renders perfectly the first time the application is loaded. But once the window is closed and opened again, the Tree nodes don't show up. The console also does not throw any errors.

Window Code :

Ext.define('MyDesktop.view.EmployeeWindow', {

extend: 'Ext.ux.desktop.Module',

requires: [
'Ext.tab.*',
'Ext.window.*',
'Ext.tip.*',
'Ext.layout.container.Border',
'Ext.data.ArrayStore',
'Ext.util.Format',
'Ext.grid.*',
'Ext.grid.Panel',
'Ext.grid.RowNumberer',
'MyDesktop.store.Employee',
'MyDesktop.store.EmployeeNavTree'
],
id:'emp-win',
init : function() {
    this.launcher = {
        text: 'Employees Management',
        iconCls:'icon-grid'
    };
},
createWindow : function() {
    var employeenavtree = Ext.create('MyDesktop.store.EmployeeNavTree');
    var flag=0;
    var currentitem='employeetab';
    var navs1 = Ext.create('Ext.tree.Panel', {
     width: 200,
     border: false,
     store: employeenavtree,
     rootVisible: true,
    // renderTo: Ext.getBody()
     });

    navs1.getSelectionModel().on('select', function(selModel, record) {
        var selectedNode = navs.getSelectionModel().getSelection();
        Ext.getCmp('content-panel').layout.setActiveItem(selectedNode[0].data.id+'tab');
    });
    // Define data model
    var atttab = Ext.create('MyDesktop.view.leave.LeaveTabPanel');
    var leavetab = Ext.create('MyDesktop.view.attendance.AttendanceTabPanel');
    var emptab = Ext.create('MyDesktop.view.employees.EmployeeTabPanel');
    // Create data store

    var contentPanel1 = {
        id: 'content-panel1',
        region: 'center', // this is what makes this panel into a region within the containing layout
        layout: 'card',
        margins: '2 5 5 0',
        activeItem: 0,
        border: false,
        items: [emptab,atttab,leavetab]
    };

    var desktop = this.app.getDesktop();
    var employeewin = desktop.getWindow('emp-win');
    if(!employeewin) {
        employeewin = desktop.createWindow({
            id: 'emp-win',
            title:'Employees Management',
            iconCls: 'icon-grid',
            maximized: true,
            animCollapse:false,
            constrainHeader:true,
            closable: true,
            width: 600,
            minWidth: 600,
            height: 600,
            layout: {
                type: 'border',
                padding: 5
            },
            items: [{
                region: 'west',
                title: 'Navigation',
                split: true,
                rootVisible: false,
                autoScroll: true,
                items: [navs1]
            },contentPanel1]

        });
    }
    return employeewin;
}, });

NavTree Code

 Ext.define('MyDesktop.store.EmployeeNavTree', {
    extend:'Ext.data.TreeStore',
    alias:'data.navtree',
    root: {
        expanded: true,
        children: [
            { id:'employee', text: "Employee Records",  leaf:true },
            { id:'attendance', text: "Attendance", leaf: true },
            { id:'leave', text: "Leave", leaf: true }
            //{ id:'benefits', text: "Benefits", leaf: true }
            ]
        }

    });
Was it helpful?

Solution

Solved the problem by declaring the store variable within a custom definition for a tree panel called MasterNav and then creating a variable alone for this in the Window Component.

Hope this helps for somebody else who might run into trouble.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top