TreePanel Problem (Screenshots inside)

[muselmanach]

if i add my form panel to my tab panel the first time, everthing looks fine:

30578

so if i close the tab and add the tab again, it looks like this:
(but there are no javascript errors)

30579

something must be wrong in this code, but i have no idea what i am doing wrong, cause it works the first time i open the tab.
(after closing the tab the first time, i delete the store and the model and execute the same code like the first time)



Ext.define('js_model_viewport_tab_tests_ui_objects_Ext_Mixed__form_fieldset_tree', {
extend: 'Ext.data.Model',
fields: [{
type: 'string',
name: 'text'
}],
proxy: {
type: 'localstorage',
model: 'js_model_viewport_tab_tests_ui_objects_Ext_Mixed__form_fieldset_tree',
id: 'js_proxy_js_model_viewport_tab_tests_ui_objects_Ext_Mixed__form_fieldset_tree',
reader: 'json',
writer: 'json'
}
});

Ext.define('js_store_viewport_tab_tests_ui_objects_Ext_Mixed__form_fieldset_tree',{
autoLoad:true,
model:'js_model_viewport_tab_tests_ui_objects_Ext_Mixed__form_fieldset_tree',
extend:'Ext.data.TreeStore',
folderSort:true,
root:{
text: 'Ext JS',
id: 'src',
expanded: true,
children:[{
'text':'d1',
'path':'d1',
'children':[{
'text':'d11',
'path':'d1.d11',
'leaf':true,
'id':'d11',
'description':'d11 description here'
},{
'text':'d12',
'path':'d1.d12',
'leaf':true,
'id':'d12',
'description':'d12 description here'
}],
'id':'d1'
},{
'text':'d2',
'path':'d2',
'children':[{
'text':'d21',
'path':'d2.d21',
'children':[{
'text':'d211',
'path':'d2.d21.d211',
'leaf':true,
'id':'d211',
'description':'d211 description here'
}],
'id':'d21'
}],
'id':'d2'
},{
'text':'d3',
'path':'d3',
'leaf':true,
'id':'d3',
'description':'d3 description here'
}]
}
});

new Ext.form.Panel({
frame:true,
id:'viewport.tab.tests_ui_objects_Ext_Mixed__form',
autoScroll:true,
items:[{
id:'viewport.tab.tests_ui_objects_Ext_Mixed__form.fieldset',
xtype:'fieldset',
items:[{
height:180,
id:'tree',
width:200,
autoScroll:true,
xtype:'treepanel',
closable:false,
title:'tree with datasource',
autoHeight:true,
forceFit:true,
store:new js_store_viewport_tab_tests_ui_objects_Ext_Mixed__form_fieldset_tree(),
loadMask:true,
name:'tree',
animate:false,
rootVisible:false
}],
title:'Mixed'
}],
closable:false,
title:'mixed'
});

[mitchellsimoens]

This is because you assigned the root as a property on the prototype.


Ext.define('js_store_viewport_tab_tests_ui_objects_Ext_Mixed__form_fieldset_tree',{
autoLoad:true,
model:'js_model_viewport_tab_tests_ui_objects_Ext_Mixed__form_fieldset_tree',
extend:'Ext.data.TreeStore',
folderSort:true,

constructor : function(config) {
config = config || {};

config.root = {
text: 'Ext JS',
id: 'src',
expanded: true,
children:[{
'text':'d1',
'path':'d1',
'children':[{
'text':'d11',
'path':'d1.d11',
'leaf':true,
'id':'d11',
'description':'d11 description here'
},{
'text':'d12',
'path':'d1.d12',
'leaf':true,
'id':'d12',
'description':'d12 description here'
}],
'id':'d1'
},{
'text':'d2',
'path':'d2',
'children':[{
'text':'d21',
'path':'d2.d21',
'children':[{
'text':'d211',
'path':'d2.d21.d211',
'leaf':true,
'id':'d211',
'description':'d211 description here'
}],
'id':'d21'
}],
'id':'d2'
},{
'text':'d3',
'path':'d3',
'leaf':true,
'id':'d3',
'description':'d3 description here'
}]
};

this.callParent([config]);
}
});

May I suggest using a different name for your classes?

[muselmanach]

thx that really solved my problem, but is there a way without using the constructor property? any methods or something like this?