extjs - 煎茶コンポーネント幅デバイスを独立させる方法

Question

レジスタパネルを作成し、ビューの初期化中にボタン付きのツールバーを追加しました。コントローラでは、フォームパネルを作成し、それをレジスタパネルに動的に追加しています。

レジスタパネルのツールバーはデバイス画面に基づいて調整されていますが、フォームパネルの幅は変更されていません。

フォームパネルの幅を設定すると、フォームパネルはフローティングになり、幅は同じままになります。

これは私がそうしたことです。

   Ext.define('Form.view.RegisterForm',{
    extend : 'Ext.Panel',
    xtype : 'register',
    id : 'register',

    initialize : function() { 
        console.log("register init");
        var submit = {
            xtype : 'button',
            width : '100px',
            ui : 'action',
            text : 'Submit',
            handler : this.onSubmitTap,
            scope : this
        };

        var topToolbar = {
            xtype : 'toolbar',
            docked : 'top',
            id : 'registerToolbar',
            title : 'Form',
            items : [{
                xtype : 'spacer'
            }, submit]
        };

        this.add(topToolbar);
    },
    config : {
        fullscreen : true,
        layout : {
            type : 'vbox'
        },
        title : 'Register'
    },

    onSubmitTap : function() {
        console.log("onSubmit");
        this.fireEvent('submitCommand', this);
    }

});

コントローラーの登録で、フィールドを動的に追加します

 // RegisterFormController.js

    oncreateForm : function() {
            var form = {
                    xtype: 'formpanel',
                    flex : 1,
                    id: formId,
                    name: formId
                };
            Ext.getCmp('register').add(form);

    }

// calling  onCreateComponent method with xtype, label, value and fromId 

        onCreateComponent : function(fxtype,flabel,fname,fvalue,id) {
            Ext.getCmp(id).add({
                xtype: fxtype,
                label: flabel,
                name: fname,
                value: fvalue,
                labelWrap:true
            });
        }