PDA

View Full Version : How to load data on into tabpanel on click of second tab



mskeerthi
9 Aug 2011, 7:41 AM
i am using tabpanel control in sencha touch and on click of second tab i want to load some data by default.

i am unable to load on click of second tab, please give me some help in getting out from this issue.

jjerome
9 Aug 2011, 7:45 AM
can you load it after the second tab is created?

mskeerthi
9 Aug 2011, 7:57 AM
my requirement is user will see two tabs .and click on second tab i am trying to load list

var quickFindPanel = new Ext.TabPanel({
fullscreen: true,
sortable: true,
items: [{

title: 'Quick Find',
xtype: 'form',
id:'equipmentform',
name:'equipmentform',
dockedItems: [panel]
},
{
title: 'Patient',
xtype: 'form',
id:'patientform',
name:'patientform',
dockedItems: [patient]
},
{
title: 'Tab 3',
html : '3',
cls : 'card3'
}]
});

if you see on click on the second i am trying to laod patient panel and that panel will have list.

var patient = new Ext.Panel({
fullscreen: true,
ui:'normal',
text:'patient',
items:[PatientList]
});

some thing like above and patient list is having like this.

var PatientList = new Ext.List({
id: 'PatientList',
name:'PatientList',
store: 'PatientStore',
itemTpl: '<div>{Name}</div><div>{AccountNumber}</div>',
hideOnMaskTap: false,
fullscreen:true
});

and patientstore is there like below.

var PatientStore = new Ext.regStore('PatientStore', {
model: 'Patient',
sorters: [{
property: 'Name',
direction: 'ASC'
}],
proxy: {
type: 'ajax',
id: 'patient-app-localstore',
headers: {"Content-Type": "application/json"},
url:'http://localhost/HelloWorld/Services/Patient.asmx/GetPatientList',
reader:{
type:'json',
root:'d'
},
data:'d'
},
autoload:true
});

so, on click on the second it not showing any content and also it's not hitting my websevice as well.

jjerome
9 Aug 2011, 8:05 AM
I dont see any listeners on your TabPanel.

mskeerthi
9 Aug 2011, 8:36 AM
if you can givee me some idea how i need to add that, it will be great

jjerome
9 Aug 2011, 8:49 AM
If you look at the API Docs for TabPanel, you'll find an event called 'cardswitch'.
http://dev.sencha.com/deploy/touch/docs/?class=Ext.TabPanel
That event is fired whenever the active card is switched.

I think that is your best event to use for the code I will show you below:

Example (using your TabPanel code):



var quickFindPanel = new Ext.TabPanel({
fullscreen: true,
sortable: true,
items: [{

title: 'Quick Find',
xtype: 'form',
id:'equipmentform',
name:'equipmentform',
dockedItems: [panel]
},
{
title: 'Patient',
xtype: 'form',
id:'patientform',
name:'patientform',
dockedItems: [patient]
},
{
title: 'Tab 3',
html : '3',
cls : 'card3'
}],
listeners: {
//you don't have to include this javadoc comment. I copied it from the API source.
/**
* @event cardswitch
* Fires after this container switches the active card. If the card
* is switched using an animation, this event will fire after the
* animation has finished. This event is only available if this container
* uses a CardLayout. Note that TabPanel and Carousel both get a CardLayout
* by default, so both will have this event.
* @param {Ext.Container} this
* @param {Ext.Component} newCard The card that has been switched to
* @param {Ext.Component} oldCard The card that has been switched from
* @param {Number} index The index of the card that has been switched to
* @param {Boolean} animated True if this cardswitch was animated
*/
cardswitch: function(me, newcard, oldcard, idx, isAnim){
/*here you can determine which card was activated by
*referring to the 'newcard' field. If the newcard being
*activated is the second card(i.e. second tab), then you
*want to load the list
*/
}
}
});

mskeerthi
9 Aug 2011, 9:27 AM
Thanks a lot jjerome. it worked for me.