Пристыкованные элементы не отображаются в предварительном просмотре

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

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]
        });
    }
});

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

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


toolbar formpanel sencha-touch-2
person Dipin Krishnan    schedule 01.03.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Конфигурация 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
            ]
        });
    }
});

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

person rdougan    schedule 01.03.2012