沒有在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'
     },
     ...