1. #1
    Sencha User
    Join Date
    Jun 2011
    Posts
    71
    Vote Rating
    0
    arandlett is on a distinguished road

      0  

    Default One Controller Multiple instances of NavigationView

    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?

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    38,582
    Vote Rating
    1136
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default

    The architecture is totally up to you... Code reusability is great if you can
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jun 2011
    Posts
    71
    Vote Rating
    0
    arandlett is on a distinguished road

      0  

    Default Problem with the controller

    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?



    Code:
    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);
      }
    });
    Code:
    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]);
        }
    });

  4. #4
    Sencha User
    Join Date
    Jun 2011
    Posts
    71
    Vote Rating
    0
    arandlett is on a distinguished road

      0  

    Default

    Instead of using xtype in items should I be using Ext.create so that a new listitems & itemdetail views are being created?

  5. #5
    Sencha User
    Join Date
    Jun 2011
    Posts
    71
    Vote Rating
    0
    arandlett is on a distinguished road

      0  

    Default Haven't found a solution yet.

    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.

  6. #6
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Omaha, NE
    Posts
    588
    Vote Rating
    30
    estesbubba has a spectacular aura about estesbubba has a spectacular aura about

      0  

    Default

    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)

    Code:
    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);
      }
    });

  7. #7
    Sencha User
    Join Date
    Jun 2011
    Posts
    71
    Vote Rating
    0
    arandlett is on a distinguished road

      0  

    Default

    That worked thank you for the help! In my case the activeItem was the 'navview'. So that eliminated some code.

  8. #8
    Sencha User
    Join Date
    Jun 2011
    Posts
    71
    Vote Rating
    0
    arandlett is on a distinguished road

      0  

    Default ST2 BT2 NavigationView issue

    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.

  9. #9
    Sencha User edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Vote Rating
    9
    edspencer is a jewel in the rough edspencer is a jewel in the rough edspencer is a jewel in the rough

      0  

    Default

    I believe the errant back button on the first screen is a separate known issue and already fixed for the next release.
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer