PDA

View Full Version : One Controller Multiple instances of NavigationView



arandlett
2 Feb 2012, 10:30 PM
My application is using a TabPanel which each tab has a list & detail (navigation view) of different sets of data. I have one controller to control the navigation view however there seems to be a conflict with the different instances of the navigation view.

Will I need to create multiple controllers for this? Or how can the controller know what instance it is controller or is active?

mitchellsimoens
3 Feb 2012, 7:52 AM
The architecture is totally up to you... Code reusability is great if you can

arandlett
3 Feb 2012, 8:16 AM
Here is my problem. I am using a tab panel. Each panel is using an instance of 3 of the same views for reusability. A navigation view, list, detail. On initial load the first tab panel works great going from list to detail and back with no problem. When I go to the second tab and click on a list item it doesn't go to detail. What happens is the first tab panel is the one that changes. It shows the back button but still shows the list.

Seems like the controller doesn't know what instance of navigation view it is controlling. My goal was to have one controller that controlled the list to detail functionality that most of my tabs panels will have.

Is it that my views event thought they use same view classes need to have specified ids for each instance?




Ext.define('MonkTouch.controller.NavView',{
extend: 'Ext.app.Controller',
config: {
refs:{
main: 'navview',
list: 'listitems',
detail: 'itemdetail'
},
control: {
main:{
pop : 'onMainPop'
},
list:{
itemtap: 'onItemTap'
}
}
},
onMainPop: function(view,item){
var list = this.getList();
this.getMain().push(list);
},
onItemTap:function(list, index, node, record){
var detail = this.getDetail(),
main = this.getMain();

detail.setData(record.data);
detail.config.title = record.data.title;
main.push(detail);
}
});



Ext.define('MonkTouch.view.NavView',{
extend : 'Ext.navigation.View',
xtype : 'navview',
constructor:function(config){

Ext.apply(config, {
autoDestroy:true,
items :[
{
xtype : 'listitems',
title : config.title,
itemTpl : MonkTouch.templates.getTpl(config.contentTpl.list),
storeName: config.storeName,
filters: config.filters
},
{
xtype:'itemdetail',
tpl: MonkTouch.templates.getTpl(config.contentTpl.detail)
}
]
});
this.callParent([config]);
}
});

arandlett
6 Feb 2012, 1:43 PM
Instead of using xtype in items should I be using Ext.create so that a new listitems & itemdetail views are being created?

arandlett
7 Feb 2012, 9:51 PM
I still can't find a solution for this. I noticed when on the second tab I click list item I get this js error "Uncaught TypeError: Cannot read property 'nameMap' of undefined". That seems to tell me the second 'itemdetail' didn't get created. But I am unsure.

estesbubba
8 Feb 2012, 11:01 AM
refs work great if you have one instance that the query returns. In your case I would do something like this (untested - written off my head)



Ext.define('MonkTouch.controller.NavView',{
extend: 'Ext.app.Controller',
config: {
refs:{
tabpanel: 'tabpanel',
// main: 'navview',
// list: 'listitems',
// detail: 'itemdetail'
},
control: {
main:{
pop : 'onMainPop'
},
list:{
itemtap: 'onItemTap'
}
}
},
onMainPop: function(view,item){
// var list = this.getList();
// this.getMain().push(list);
var activeItem = this.getTabpanel().getActiveItem(), // think should return active card
list = activeItem.down('listitems'), // query by xtype
main = activeItem.down('navview'); // query by xtype

main.push(list);

},
onItemTap:function(list, index, node, record){
var detail = this.getDetail(),
main = this.getMain();

detail.setData(record.data);
detail.config.title = record.data.title;
main.push(detail);
}
});

arandlett
8 Feb 2012, 2:26 PM
That worked thank you for the help! In my case the activeItem was the 'navview'. So that eliminated some code.

arandlett
9 Feb 2012, 9:45 PM
The release notes stated if you are loading multiple items in the navigation view the last item is the active item. I added two items and the active one I want at the bottom. However there seems to be a bug. When the view becomes visible it has a back button on the initial screen.

edspencer
11 Feb 2012, 12:41 PM
I believe the errant back button on the first screen is a separate known issue and already fixed for the next release.