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

});

在Register controller中我动态添加字段

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

Answer 1

如果你们中间有人提出同样的问题。

我犯的错误是“我在hbox面板中添加了4个单选按钮，因此该面板的宽度增加了，这就是整个表单面板无法在不同设备中正常显示的原因”。

我将面板布局更改为vbox后，问题解决了。

如何使sencha组件宽度设备独立

1 个答案: