1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    55
    Answers
    3
    Vote Rating
    0
    brokentwig is on a distinguished road

      0  

    Default Answered: Change card on button click

    Answered: Change card on button click


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

  2. Code:
    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

  3. #2
    Sencha User mberrie's Avatar
    Join Date
    Feb 2011
    Location
    Bangkok, Thailand
    Posts
    506
    Answers
    26
    Vote Rating
    14
    mberrie will become famous soon enough mberrie will become famous soon enough

      0  

    Default


    Code:
    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

  4. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    55
    Answers
    3
    Vote Rating
    0
    brokentwig is on a distinguished road

      0  

    Default


    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:

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

  5. #4
    Sencha User mberrie's Avatar
    Join Date
    Feb 2011
    Location
    Bangkok, Thailand
    Posts
    506
    Answers
    26
    Vote Rating
    14
    mberrie will become famous soon enough mberrie will become famous soon enough

      0  

    Default


    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.

Thread Participants: 1