DockedItems не отображаются в предварительном просмотре

Question

Есть идеи, почему прикрепленные элементы не отображаются в предварительном просмотре? Вот код

Ext.setup({
    onReady:function(){
        var top_toolbar= [{
            xtype:'toolbar',
            ui:'dark',
            dock:'top',
            title:'Login Form'
        }]
        var loginForm = new Ext.form.FormPanel({
            items:[{
                xtype:'fieldset',
                items:[{
                    xtype:'textfield',
                    label:'Username',
                    name:'u_name',
                    labelWidth:100
                },{
                    xtype:'passwordfield',
                    label:'Password',
                    name:'u_password',
                    labelWidth:100
                }]
            }]
        });
        var formPanel=new Ext.Panel({
            fullscreen:'true',
            layout:'fit',
            dockedItems:top_toolbar,
            items:[loginForm]
        });
    }
});

Я просто пытаюсь создать страницу входа в систему, с текстовыми полями для имени пользователя и пароля, и мне нужно включить закрепленную сверху панель инструментов с заголовком "Форма входа". В предварительном просмотре я получаю текстовые поля с меткой, но она не показывает панель инструментов. я делаю что-то не так с кодом?

Любая помощь будет оценена. Заранее спасибо.

Answer 1

dockedItems конфигурация устарела в Sencha Touch 2. Если вы используете версию платформы, которая не включает уровень совместимости, эта конфигурация не будет работать.

Вместо этого поместите все предметы, включая закрепленные, внутри items массив.

Некоторые другие заметки:

• dock был изменен на docked
• Ext.form.FormPanel изменился на Ext.form.Panel
• Вы должны использовать Ext.create() вместо new ключевое слово. Это означает, что вы можете воспользоваться Ext.Loader и управлением зависимостями. Вы можете найти больше информации об этом здесь: http://docs.sencha.com/touch/2-0/#!/guide/class_system

И, наконец, вот как должен выглядеть ваш код, если вы реализуете все эти изменения:

Ext.setup({
    onReady:function(){
        var loginForm = Ext.create('Ext.form.Panel', {
            items: [
                {
                    xtype: 'fieldset',
                    items: [
                        {
                            xtype: 'textfield',
                            label: 'Username',
                            name: 'u_name',
                            labelWidth: 100
                        },
                        {
                            xtype: 'passwordfield',
                            label: 'Password',
                            name: 'u_password',
                            labelWidth: 100
                        }
                    ]
                }
            ]
        });

        var formPanel = Ext.create('Ext.Panel', {
            fullscreen:'true',
            layout:'fit',
            items: [
                {
                    xtype: 'toolbar',
                    ui: 'dark',
                    docked: 'top',
                    title: 'Login Form'
                },
                loginForm
            ]
        });
    }
});

Надеюсь это поможет.