Change card on button click

[brokentwig]

OK, I know this question has been answered a bunch of times for different scenarios, but I can't seem to figure it out. I have an application with a menu and center region card layout. I have 1 controller handling all the views. So I have my controller listen for menu button clicks. In my click event I want to change the active card. Here is my applicable files:

LayoutController:

Ext.define('MyIpSys.controller.LayoutController', {
    extend    : 'Ext.app.Controller',
    views    : [
        'layout.LayoutCenterView',
        'layout.LayoutNorthView',
        'layout.LayoutWestView',
        'content.ContentTrackerView',
        'content.ContentMenuView',
        'content.ContentDetailView',
    ],

    init: function() {    
        this.control({
            'menu > menuitem': {
                click: this.onItemClick
            }
        });
    },
    
    onItemClick:function(menuitem){
        console.log(menuitem.text + ' clicked')
        contenttrackerview.setActiveItem('card-1');
     }

});

And the ContentTrackerView:

Ext.define('MyIpSys.view.content.ContentTrackerView' ,{
    extend: 'Ext.panel.Panel',
    alias : 'widget.contenttrackerview',
    title : 'My Content',
    layout: 'card',
    
    activeItem: 0,
    
    items: [{
        id: 'card-0',
        html: 'Step 1'
    },{
        id: 'card-1',
        html: 'Step 2'
    },{
        id: 'card-2',
        html: 'Step 3'
    }
    ],
    
    initComponent: function() {
        this.callParent(arguments);
    }
});

These are the only two files that should matter. Since I declare ContentTrackerView in my controller, I should be able to reference it with it's alias and just use the setActiveItem method. I get an error though that "contenttrackerview is not defined". I have seen lots of variations on how to reference other views or look them up, but since I declare the view, shouldn't I just be able to use the alias name? If not, how should I reference the ContentTrackerView and change the active item, and why can't I do it this way? What is the proper code for this line:

contenttrackerview.setActiveItem('card-1');

[mberrie]

onItemClick:function(menuitem) {
    console.log(menuitem.text + ' clicked')
    contenttrackerview.setActiveItem('card-1');
}

The way you try to get a hold on the panel simply can't work when you think about how Javascript works. You are accessing a variable named 'contenttrackerview' here. Since it is not defined in the current context (within the function) it would have to be a global variable (which it is not because this would be really bad programming style)!

You could change this to 'this.contenttrackerview' to reference a member of the current class but it will not work either. Ext MVC does not auto-magically provide loaded views as class members.


The way to do it in Ext MVC is by using the 'refs' config on the controller. Look for 'Using refs' in the Controller class docs: http://docs.sencha.com/ext-js/4-0/#!...app.Controller

[brokentwig]

mberrie,
Firstly, thanks for posting a response to this and every other post I look at, your understanding of Extjs 4 is inspiring and encouraging. I have a lot to learn. I used the refs: directive like you said and it works great now. Here is the code I ended up with:

Ext.define('MyIpSys.controller.LayoutController', {
    extend    : 'Ext.app.Controller',
    views    : [
        'layout.LayoutCenterView',
        'layout.LayoutNorthView',
        'layout.LayoutWestView',
        'content.ContentTrackerView',
        'content.ContentMenuView',
        'content.ContentDetailView',
    ],

    refs: [
        { ref: 'card', selector: 'contenttrackerview' },
    ],
    
    init: function() {    
        this.control({
            'menu > menuitem': {
                click: this.onItemClick
            }
        });
    },
    
    onItemClick:function(menuitem){
        console.log(menuitem.text + ' clicked')
        this.getCard().layout.setActiveItem('card-1');
     }

});

[mberrie]

Firstly, thanks for posting a response to this and every other post I look at

Haha, that clearly tells me that I've spent way too much time here during the past days

Thanks for posting your working solution. It might help others in the future.