Hybrid View

  1. #1
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    29
    Answers
    3
    Vote Rating
    0
    mattgolding is on a distinguished road

      0  

    Default Unanswered: Cant fire events after push on a navigationView

    Unanswered: Cant fire events after push on a navigationView


    I am following the MVC pattern and have the following setup using Sencha Touch. The code below displays the list of items and they are clickable. On click the next view is pushed to the screen. However the NavigationController's controller is no longer picking up events on this new view. I was hoping to have the 1 controller against the navigationView that handled pushing on popping on click of any card in the list. As you can see I am simply pushing the same view into the stack.

    Any ideas on why the controller is not picking up the events for the second screen? If I push the back button the events for the first screen still work and will take me back to the second screen. I realize this would be an endless navigation but in practice it wont be.

    GS.view.NavigationController
    Code:
    Ext.define('GS.view.NavigationContainer', {
    extend: 'Ext.NavigationView', alias: 'widget.navigation-container', requires: [ 'GS.view.ServerList' ], config: {
    items: [{
    itemId: 'listSection', title: 'First', xtype: 'server-list'
    }]
    }
    });
    GS.view.ServerList
    Code:
    Ext.define('GS.view.ServerList', {
    extend: 'Ext.List', alias: 'widget.server-list', config: {
    itemTpl: '{title}', data: [
    { id: 1, title: 't1' }, { id: 2, title: 't2' }, { id: 3, title: 't3' }, { id: 4, title: 't4' }
    ]
    }
    });
    GS.controller.NavigationContainer
    Code:
    Ext.define('GS.controller.NavigationContainer', {
    extend: 'Ext.app.Controller', config: {
    views: ['NavigationContainer'], refs: {
    navigationContainer: 'navigation-container'
    }
    control: {
    'navigation-container #listSection': {
    select: 'onSelect'
    }
    }
    }, onSelect: function(view, record) {
    var navigationContainer = this.getNavigationContainer(); navigationContainer.push({
    title: record.get('title'), xtype: 'server-list'
    });
    }
    });

  2. #2
    Sencha User
    Join Date
    Nov 2010
    Posts
    118
    Vote Rating
    9
    Bunchofstring will become famous soon enough

      0  

    Default


    I haven't tested this, but I'm 99% sure the problem is in your controller's ComponentQuery selector. Change it to "navigation-container server-list and you should be all set.

    Explanation: The #listSection selector matches the initial view:
    Code:
    {
         itemId: 'listSection',
         title: 'First',
         xtype: 'server-list'
    }
    ...but not the views that you are pushing onto the NavigationView:
    Code:
    {
         title: record.get('title'),
         xtype: 'server-list'
    }
    server-list matches any list of that xtype. If you need to be more specific with your selectors, make sure the alias you want to match is part of the view's class definition, not the config object (i.e. {xtype:'whatever', ...}) that instantiates it.

Thread Participants: 1

Tags for this Thread