没有在ExtJs中正确显示表单

Question

我使用ExtJs库创建了一个表单。这是我的代码;

form1 = new Ext.form.FormPanel({
                bodyStyle : {
                    "background-color" : "#000000"
                },

                items : [ {
                    xtype : 'combo',
                    name : 'include_type',
                    fieldLabel : 'Vehicle Registration Number',
                    editable : false,
                },
                {
                    xtype : 'combo',
                    name : 'include_type',
                    fieldLabel : 'Device ID',
                    editable : false,
                },
                {
                    xtype : 'combo',
                    name : 'include_type',
                    fieldLabel : 'Default Rep',
                    editable : false,
                },
                {
                    xtype : 'combo',
                    name : 'include_type',
                    fieldLabel : 'Driver',
                    editable : false,
                },
                {
                    xtype : 'combo',
                    name : 'include_type',
                    fieldLabel : 'Assistant',
                    editable : false,
                },
                {
                    xtype : 'combo',
                    name : 'include_type',
                    fieldLabel : 'Porter 1',
                    editable : false,
                },
                {
                    xtype : 'combo',
                    name : 'include_type',
                    fieldLabel : 'Porter 2',
                    editable : false,
                },
                {
                    xtype : 'combo',
                    name : 'include_type',
                    fieldLabel : 'Porter 3',
                    editable : false,
                },

                ],
                buttons : [ {
                    text : 'Delete',
                    handler : function() {

                    }
                }, {
                    text : 'View',
                    handler : function() {

                    }
                }, {
                    text : 'New',
                    handler : function() {

                    }
                }, {
                    text : 'Exit',
                    handler : function() {
                        win1.hide();
                    }
                } ]
            });

            win1 = new Ext.Window({
                title: 'Vehicle Assigning',
                layout: 'fit',
                autoScroll: true,
                y: 120,
                width: 600,
                height: 500,
                modal: true,
                plain:true,
                bodyStyle:'padding:8px;',
                buttonAlign:'center',
                closeAction: 'hide',
                floating: true,
                closable : true,
                items: [form1]
            });
            win1.show();

它成功弹出一个新窗口，但是有一个问题。所有文本字段（车辆注册号，设备ID等）未正确显示。表格如下：

为什么这些文字字段显示不正确？我想知道的另一件事是我应该如何将整个表单置于窗口中心。我试过跟随代码，但没有运气。

layout: {
                      pack: 'center',
                      type: 'hbox'
                },

任何建议都表示赞赏。

谢谢

Answer 1

1）看起来您的边框与标签重叠。如果要稍微移动它们，可以在标签上添加一些填充。 （见下文）

2）如果希望窗体的内容居中，则必须在窗体上而不是在窗口上设置布局。

下面的代码对每个标签应用200的标签宽度，在左侧添加25px的填充，并使表单中的标签和字段居中。

var  form1 = new Ext.form.FormPanel({
     bodyStyle : {
         "background-color" : "#000000"
     },
     layout: {
         type: 'vbox',
         align: 'center'
     },
     defaults: {
         labelWidth: 200,
         padding: '0 0 0 25'
     },
     ...