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 }
]
}
});
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.