panel overlapping while loading them dynamically sencha - forms

Question

I have several tabs on toolbar each of them having seperate handler , i have called seperate function of each handler . The code is as below
Ext.define('myco.view.User', {
extend: 'Ext.Container',
config: {
scrollable: true,
items: [{
xtype: 'panel',
id: 'User'
},
{
docked: 'top',
xtype: 'toolbar',
items: [{
text: 'My Profile',
handler: function() {
var panel = Ext.getCmp('User'),
tpl = new Ext.XTemplate([
'<div class="demo-weather">',
'<tpl for=".">',
'<div class="day">',
'<div class="date">{username}</div>',
'<tpl for="weatherIconUrl">',
'<img src="{value}">',
'</tpl>',
'<span class="temp">{tempMaxF}°<span class="temp_low">{tempMinF}°</span></span>',
'</div>',
'</tpl>',
'</div>'
]);
panel.getParent().setMasked({
xtype: 'loadmask',
message: 'Loading...'
});
Ext.Ajax.request({
url: 'http://localhost:8000/api/myapp/user/',
method:'GET',
callbackKey: 'callback',
defaultHeaders : 'application/json',
params: {
//key: '23f6a0ab24185952101705',
//q: '94301', // Palo Alto
format: 'json',
//num_of_days: 5
},
success : function(response, opt) {
dataarray = Ext.decode(response.responseText);
weather=dataarray.objects;
panel.updateHtml(tpl.applyTemplate(weather))
panel.getParent().unmask();
},
failure : function(response, opt) {
Ext.Msg.alert('Failed', response.responseText);
panel.getParent().unmask();
}
});
}
},
{
text:'login',
handler: function() {
var main = new Ext.Panel({
title: 'My first panel', //panel's title
fullscreen: true,
//the element where the panel is going to be inserted
//html: 'Nothing important just dummy text' //panel's content
items:[
{
xtype: 'fieldset',
title: 'Login',
items: [
{
xtype: 'textfield',
label: 'Username',
name: 'username',
id : 'username'
},
{
xtype: 'passwordfield',
label: 'Password',
name: 'password',
id : 'password'
}
]
},
{
xtype: 'button',
text: 'Send',
ui: 'confirm',
handler: function() {}
}
]
});
panel.add(main);
alert('test');
}
}
]
}]
}
});
Now when i click on the tab , previous panel will not be cleared and data will get overlapped there ..... like when i click My profile profile is listed there , after that when i click login profile+ login both will be loaded one overlapping another ...

Answer 1

You should use Ext.tab.Panel for this, define your profile and login panels as items of a parent TabPanel, the switching will be handled by ExtJS. You can use the activate event of a Panel to add custom logic to execute when your tabs get activated.