Не отображается форма в 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(); 

Это всплывающее окно успешно завершено, но есть проблема. Все текстовые поля (номер регистра транспортного средства, идентификатор устройства и т. Д.) Отображаются неправильно. Форма выглядит следующим образом:

Почему эти текстовые поля не отображаются правильно? Еще одна вещь, которую я хочу знать, - как мне сосредоточить всю форму внутри окна. Я пробовал следующий код, но не повезло.

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