PDA

View Full Version : Tab Panel tab's doesn't destroy old content when new tab is clicked ?



anirudh429
24 Oct 2011, 4:30 PM
Hi,

I have created an application similar to O'Reilly example in sencha touch examples.

Consisting of 4 tab's at the bottom, of which three of the tabs call a html page through ajax update function to load the content.

4th tab call's list panel and the items with in the list again call's html page through ajax update - this is similar to the "about" tab in O'Reilly example.

The problem here is whenever I am in the list page tab and open any list item it shows the content page but when I click on any of the tab's on the bottom it does not open the corresponding html page instead it opens the list item's content page that was opened earlier.

Let me know how can I fix this asap.

Thanks

skirtle
25 Oct 2011, 12:56 PM
Hard to say without seeing some of your code. At a guess it's a reuse problem. Possibly you've got duplicate ids or you've reused the same contentEl?

anirudh429
25 Oct 2011, 2:56 PM
Thanks for the response ?skirtle


This is javascript for tab panel

rice.App = Ext.extend(Ext.TabPanel, { fullscreen: true,
tabBar: {
dock: 'bottom',
layout: { pack: 'center' }
},
cardSwitchAnimation: false,
initComponent: function() {
this.items = [{
iconCls: 'info',
title: 'Introduction',
xtype: 'html',
url: 'intro.html'
}, {
title: 'Disease',
xtype: 'aboutlist',
iconCls: 'rice',
pages: this.aboutPages
}, {
title: 'Credits',
iconCls: 'team',
xtype: 'html',
url: 'credits.html'
}, {
title: 'Disclaimer',
iconCls: 'warning_black',
xtype: 'html',
url: 'Disclaimer.html'
}
];
rice.App.superclass.initComponent.call(this);
}
});

This is the code for the 3 tabs of type html tab. This is the code for ajax update:

rice.views.Html = Ext.extend(Ext.Panel, {
scroll: 'vertical',
layout: 'card',
fullscreen: true,
styleHtmlContent: true,
initComponent: function() {


Ext.Ajax.request({
url: this.url,
success: function(rs) {
this.update(rs.responseText);

},
scope: this
});


rice.views.Html.superclass.initComponent.call(this);
}
});


Ext.reg('html', rice.views.Html);

This the code after aboutlist is load and each item of type htmlpage:

scroll: 'vertical',
layout: 'card',
fullscreen: true,
styleHtmlContent: true,
initComponent: function() {


var toolbarBase = {
xtype: 'toolbar',
title: this.title
};




if (this.prevCard !== undefined) {
toolbarBase.items = {
ui: 'back',
text: 'Back',
scope: this,
handler: function() {
this.ownerCt.setActiveItem(this.prevCard, {
type: 'slide',
reverse: true,
scope: this,
after: function() {
this.destroy();
}
});


}
}
}




this.dockedItems = toolbarBase;
Ext.Ajax.request({

url: this.url,
success: function(rs) {
this.update(rs.responseText);

},
scope: this
});




rice.views.HtmlPage.superclass.initComponent.call(this);
}
});


Ext.reg('htmlpage', rice.views.HtmlPage);

Let me know if you need any more details.

Thanks

skirtle
25 Oct 2011, 3:04 PM
Please use CODE tags when posting code (# button on the editor toolbar).

That appears to be Sencha Touch. This is an ExtJS 4 forum.

anirudh429
25 Oct 2011, 3:07 PM
I am so sorry can I get any help on that?

Thanks

skirtle
25 Oct 2011, 3:21 PM
I would expect so. Try posting your question in the relevant Touch forum.

anirudh429
25 Oct 2011, 3:22 PM
Ok. Thanks a lot for all the help.