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

このdockedItems構成は Sencha Touch 2 で廃止されました。互換性レイヤーを含まないバージョンのフレームワークを使用している場合、その構成は機能しません。

代わりに、ドッキングされたアイテムを含むすべてのアイテムをitems配列内に配置します。

その他の注意事項:

  • dockに変更されましたdocked
  • Ext.form.FormPanelに変わりましたExt.form.Panel
  • Ext.create()thenewキーワードの代わりに使用する必要があります。これは、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 に答える