1. #1
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Sunnyvale, CA
    Posts
    2
    Vote Rating
    0
    lee.morris is on a distinguished road

      0  

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

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


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

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

    Cheers

  2. #2
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Sunnyvale, CA
    Posts
    2
    Vote Rating
    0
    lee.morris is on a distinguished road

      0  

    Default


    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.

  3. #3
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,445
    Vote Rating
    129
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Did you mean to setup a reference with autoCreate: true for your profile?
    Aaron Conran
    @aconran
    Sencha Architect Development Team

Thread Participants: 1

Tags for this Thread