Question

I have this:

my.Settings = {
    id: 'settings',
    xtype: 'panel',
    title: 'Settings',
    iconCls: 'settings',
    layout: 'card',
    items:[
        my.form1,
        my.form2
    ]
};

When my.form1 is a config object, the form is visible and clickable (inputs allow entry, selects bring up dropdown options, etc.).

However, when I try to use Ext.define and Ext.create, the form appears visually, but nothing is selectable. If I use a tabpanel, the tabs aren’t clickable, and on forms inputs won’t focus or bring up the keyboard, and don’t seem to respond to input at all.

Here’s how I tried it:

Ext.define('my.form1', {
extend: 'Ext.form.Panel'
config:{...}
}

…

items: [
   Ext.create('my.form1',{id: 'myForm1'})
]

What about the second method causes the form to break? I’m trying to move toward using require and Ext.create for dynamic loading, but I can’t do this if I can’t get the simplest case working.

Answer 1

did you set the current active item? Because you use the card layout:

var panel = Ext.create('Ext.Panel', {
layout: 'card',
items: [
    {
        html: "First Item"
    },
    {
        html: "Second Item"
    },
    {
        html: "Third Item"
    },
    {
        html: "Fourth Item"
    }
]
});
// here we set the active item to show on the screen
panel.getLayout().setActiveItem(1);

See http://docs.sencha.com/touch/2-0/#!/api/Ext.layout.Card for more information.