Change cards from a button

[cyberwombat]

I have a simple card layout and can't figure out the syntax in my onButton handler to switch active items. Funny is that I can do it in a larger mvc context just not in this simple app I need to file a bug

Ext.application({
    name: 'Sencha',
    main: null,
    refs: [
    {
        ref: "panel",
        selector: "mypanel"
    }
    ],
    init: function() {
        this.control({
            '#switch': {
                tap: this.onButton
            },
        })
    },
    launch: function() {
        this.main = Ext.create("Ext.Panel", {
            fullscreen: true,
            layout: 'card',
            xtype: 'mypanel',
            items: [
                {
                title: 'Home',
                iconCls: 'home',
                cls: 'home',
                html: 'home page',
            },
            {
                title: 'Contact',
                iconCls: 'user',
                xtype: 'formpanel',
                url: 'contact.php',
                layout: 'vbox',
                items: [
                   {
                    xtype: 'fieldset',
                    title: 'Contact Us',
                    instructions: '(email address is optional)',
                    items: [
                        {
                            xtype: 'textfield',
                            label: 'Name'
                        },
                        {
                            xtype: 'emailfield',
                            label: 'Email'
                        },
                        {
                            xtype: 'textareafield',
                            label: 'Message'
                        }
                    ]
                },
                {
                    xtype: 'button',
                    itemId: 'switch',
                    id: 'switch',
                    text: 'Send',
                    ui: 'confirm',
                }
                ]
            }
            ]
        });


        this.main.setActiveItem(1);
    },
    onButton: function() {
        this.getPanel().setActiveItem(0);  //doesn't work
            //? how do I switch from here
    }
});

[rdougan]

You can't add refs to an application directly, they must be in a Ext.app.Controller subclass. I think this is coming in for 2.0, but don't hold me to that.

So, in this example, you'd have to store a reference to the panel you want to switch cards, and make sure you are in the correct scope, and call setActiveItem. Or use Ext.ComponentQuery.query to find your panel, and do it that way.

Also, you cannot set an `xtype` when creating a Component like you did with 'my panel'. You can only do that when extending a class.

[cyberwombat]

I would have thought that this.main = ... was a good reference and that I could use this.main.setActiveItem but that doesn't work. Not sure how to change the scope from the onButton method. Tried var a= this, etc but no go. I assumed it was a scope thing but I don't see in my example why main cannot be accessed. The scope thing in Sencha confuses the heck out of me

[rdougan]

This looks like a bug with control(). The scope it is getting is null, so this == Window.

To get around it for now, you can pass in a 3rd argument into control() which is the scope (this).

this.control({
    '#switch': {
        tap: this.onButton
    }
}, null, this);

[cyberwombat]

Oh good god.. no wonder - been trying to get this right at this for weeks

[casic]

Hi , i 'm using kitchensink like base for my project. I know how to change views that are included in /store/Demo.js / like items by ID . But if i create new view , and want to change to it by name , how would look the showViewByName function ????? I 'm trying without success .
Can you help me ??