Sencha Designer / Ext JS 4 MVC / Event Listener / getLayout

[lee.morris]

Sencha Designer Build: 309
Ext-JS 4 version 4.0.7

Sumamry:
All actions are performed in Sencha Designer:
Created a panel class with card layout. The card layout contains a toolbar with two buttons: next and prev.
Created a controller and added controller action to listen for a button click for the next button.
Added the panel to the controller "views".

Code:

/*
 * File: app/view/TagsPanel.js
 *
 * This file was generated by Sencha Designer version 2.0.0.
 * http://www.sencha.com/products/designer/
 *
 * This file requires use of the Ext JS 4.0.x library, under independent license.
 * License of Sencha Designer does not include license for Ext JS 4.0.x. For more
 * details see http://www.sencha.com/license or contact license@sencha.com.
 *
 * This file will be auto-generated each and everytime you save your project.
 *
 * Do NOT hand edit this file.
 */


Ext.define('DataDictionary.view.TagsPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.tagsPanel',


    height: 700,
    itemId: 'tags-panel',
    width: 900,
    activeItem: 0,
    layout: {
        type: 'card'
    },


    initComponent: function() {
        var me = this;


        Ext.applyIf(me, {
            dockedItems: [
                {
                    xtype: 'toolbar',
                    dock: 'top',
                    items: [
                        {
                            xtype: 'button',
                            itemId: 'nextButton',
                            text: 'Next'
                        },
                        {
                            xtype: 'button',
                            text: 'Prev'
                        }
                    ]
                }
            ],
            items: [
                {
                    xtype: 'panel',
                    itemId: 'first',
                    title: 'first'
                },
                {
                    xtype: 'panel',
                    itemId: 'second',
                    title: 'second'
                }
            ]
        });


        me.callParent(arguments);
    }


});
/*
 * File: app/controller/ReportNav.js
 *
 * This file was generated by Sencha Designer version 2.0.0.
 * http://www.sencha.com/products/designer/
 *
 * This file requires use of the Ext JS 4.0.x library, under independent license.
 * License of Sencha Designer does not include license for Ext JS 4.0.x. For more
 * details see http://www.sencha.com/license or contact license@sencha.com.
 *
 * This file will be auto-generated each and everytime you save your project.
 *
 * Do NOT hand edit this file.
 */


Ext.define('DataDictionary.controller.ReportNav', {
    extend: 'Ext.app.Controller',


    views: [
        'TagsPanel'
    ],
    init: function() {
        this.control({
            "#nextButton": {
                click: this.goNext
            }
        });
    },


    goNext: function(button, e, options) {
        var tagv = this.getTagsPanelView();
        Ext.MessageBox.alert(Ext.getClassName(tagv));
        tagv.getLayout().next();
    }


});

Observation:
When the "next" button is clicked, the message box displays:
DataDictionary.view.TagsPanel

The Chrome console displays:

• [COLOR=red !important]Uncaught TypeError: Object function () { return this.constructor.apply(this, arguments); } has no method 'getLayout'[/COLOR]
  • [COLOR=red !important]Ext.define.goNext[/COLOR]ReportNav.js:33
  • [COLOR=red !important]fire[/COLOR]ext-all-debug.js:10658
  • [COLOR=red !important]Ext.define.dispatch[/COLOR]ext-all-debug.js:24045
  • [COLOR=red !important]Ext.override.fireEvent[/COLOR]ext-all-debug.js:24020
  • [COLOR=red !important]Ext.define.fireHandler[/COLOR]ext-all-debug.js:29510
  • [COLOR=red !important]Ext.define.onClick[/COLOR]ext-all-debug.js:29502
  • [COLOR=red !important](anonymous function)[/COLOR]
  • [COLOR=red !important]wrap
    [/COLOR]

Finally the questions:
What am I doing wrong I am attempting to use the button to move to the next card.

Cheers

[lee.morris]

An update:
var prof = this.getProfileView();
prof.getLayout().setActiveItem('user-account-settings');

Instead of:
var prof = this.getProfile();
prof.getLayout().setActiveItem('user-account-settings');

Has the same results.

[aconran]

Did you mean to setup a reference with autoCreate: true for your profile?