0

知道为什么停靠的项目没有显示在预览中吗？这是代码。

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

我只是想创建一个登录页面，其中包含用户名和密码的文本字段，并且需要包括停靠在顶部的工具栏，其标题为“登录表单”。在预览中，我得到带有标签的文本字段，但它没有显示工具栏。我对代码做错了吗？

任何帮助，将不胜感激。提前致谢。

4

1 回答 1

1

Sencha Touch 2 中已弃用该dockedItems配置。如果您使用的框架版本不包含兼容层，则该配置将不起作用。

相反，将所有项目（包括停靠项目）放入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
            ]
        });
    }
});

希望这可以帮助。

于 2012-03-01T08:04:30.753 回答