PDA

View Full Version : List - onItemDisclosure help loading a new view?



aaronwardle
29 Aug 2011, 12:45 PM
I'm trying to get my test project working and have it set out with various viewports js files for each screen.

I have now managed to load the data onto the screen with the code below however I am struggling with trying to set-up the onItemDisclosure function so that it switches to a detailed view which shows more information about the selection item.

Any help with this would be much appreciated I have spent the best part of the day trying to work this out.

Thanks Aaron


MobileApp.views.Settings_screen = Ext.extend(Ext.Panel, {

title: "Settings ",
iconCls: "settings",
fullscreen: true,
layout: 'card',

dockedItems: [{
xtype: "toolbar",
title: "Settings"
}],

initComponent: function() {

detailPanel = new Ext.Panel({
id: 'detailPanel',
tpl: 'Hello, World'
}),


this.list = new Ext.List({
id: 'indexlist',
store: MobileApp.listStore,
itemTpl: '<div class="contact">{firstName} {lastName}</div>',
grouped: false,
onItemDisclosure: function() {
MobileApp.views.setActiveItem('detailPanel');
}
});

this.items = [this.list];

MobileApp.views.Settings_screen.superclass.initComponent.apply(this, arguments);

}

});

Ext.reg('settings_screen', MobileApp.views.Settings_screen);

NickT
30 Aug 2011, 5:06 AM
you need to add your two cards to the card layout configured panel that you have created. Below, notice that both your list and the detail panel are added to the items collection of the card layout panel. on render the list is activated and then on disclosure the details are loaded.

I usually always add containers to a card layout. In other words, a collection of panels. I dont know how well adding the list will work. you could wrap it in a panel. also, you may consider using the selectfield, but those are just suggestions.



MobileApp.views.Settings_screen=Ext.extend(Ext.Panel,{


title:"Settings ",
iconCls:"settings",
fullscreen:true,
layout:'card',


dockedItems:[{
xtype:"toolbar",
title:"Settings"
}],
listeners:{
'render': function(panel){
// on render activate the list
panel.getLayout().setActiveItem('indexlist');
}
},


initComponent:function(){
this.items = [];

this.items.push(new Ext.Panel({
id:'detailPanel',
tpl:'Hello, World'
}));




this.items.push(new Ext.List({
id:'indexlist',
store:MobileApp.listStore,
itemTpl:'<div class="contact">{firstName} {lastName}</div>',
grouped:false,
onItemDisclosure:function(){
MobileApp.views.setActiveItem('detailPanel');
}
}));


MobileApp.views.Settings_screen.superclass.initComponent.apply(this, arguments);


}


});


Ext.reg('settings_screen',MobileApp.views.Settings_screen);

NickT
30 Aug 2011, 5:16 AM
also, you may need to make some changes to your item disclosure handler. first off, it provides the record from the list, which you will want to load into your details form. (if its a formpanel, you can load the record as shown below. follow the documentation for formpanel when setting up your detailsPanel. Also, the scope is the list i believe, within the item disclosure handler. from there, you can work your way up to the card layout container you have either by ownerCt or by other means, (query, or ext.getCmp, etc).



onItemDisclosure: function(record, btn, index) {
this.ownerCt.getLayout().setActiveItem('detailPanel');
//TODO: uncomment after converting detailPanel to a formpanel
//Ext.getCmp('detailPanel').load(record);
}