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

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

0 голосов
/ 01 марта 2012

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

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

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

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

1 Ответ

1 голос
/ 01 марта 2012

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

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

...