ExtJS的表單項目內聯和下定位，複雜

Question

我創建使用ExtJS的4

xtype: 'prg-formPanel', 
      id: 'blog-edit-form', // id fixed : id: 'upload-form-'+this.filetype, 
      url: baseUrl + "crud", 
      border: 0, 
      bodyStyle: { 
       padding: '10px 20px' 
      },      
      height: 600, 
      defaultType: 'textfield', 
      defaults: { 
       anchor: '95%', 
       allowBlank: true, 
       msgTarget: 'side', 
       labelWidth: 60 
      }, 
      layout: { 
       type: 'table', 
       columns: 2 
      }, 
      items: [{ 
        inputType: 'hidden', 
        id: 'actionType', 
        name: 'actionType', 
        value: this.actionType, 
        scope: this 
       },{ 
        inputType: 'hidden', 
        id: 'id', 
        name: 'id', 
        value: (Ext.isEmpty(this.record)?null:this.record.get('id')) 
       },{ 
        inputType: 'textfield', 
        id: 'title', 
        fieldLabel: 'Başlık', 
        name: 'title', 
        labelWidth: 60, 
        value: (Ext.isEmpty(this.record)?null:this.record.get('title')), 
        colspan:2 
       },{ 
        inputType: 'textfield', 
        id: 'name', 
        fieldLabel: 'İsim', 
        name: 'name', 
        labelWidth: 60, 
        value: (Ext.isEmpty(this.record)?null:this.record.get('name')), 
        colspan:2 
       }, 
       new Prg.checkBox({ 
        fieldLabel: 'Aktif mi?', 
        name: 'activeFlag', 
        labelWidth: 60, 
        checked: (Ext.isEmpty(this.record)?false:this.record.get('activeFlag')) 
       }), 
       new Prg.idCombo({ 
        fieldLabel : 'Dil', 
        labelWidth: 60, 
        emptyText : 'Dili seçiniz...', 
        id: 'langId', 
        name : 'langId', 
        store : this.ds_language, 
        scope: this 
       }),{ 
        inputType: 'textfield', 
        id: 'targetURL', 
        fieldLabel: 'Link', 
        name: 'targetURL', 
        labelWidth: 60, 
        value: (Ext.isEmpty(this.record)?null:this.record.get('targetURL')), 
        colspan:2 
       },{ 
        xtype: "TinyMCEEditor", 
        fieldLabel: "İçerik", 
        width: 800, 
        height: 400, 
        colspan:2, 
        name: "contentHTML", 
        id: "contentHTML", 
        tinyMCESettings: { 
         mode: "exact", 
         theme: "advanced", 
         skin: "o2k7", 
         // Tiny Settings Here 
          //... 
        value: (Ext.isEmpty(this.record)?"":this.record.get('contentHTML')) 
       }, 
       new Ext.form.field.ComboBox({ 
        id: "categories", 
        name: "categories", 
        fieldLabel: 'Kategori', 
        multiSelect: true, 
        displayField: 'name', 
        forceSelection: true, 
        labelWidth: 60, 
        store: this.ds_tags, 
        queryMode: 'remote', 
        scope: this, 
        colspan:2 
       }) 
       ] // Form items closure 
     }]; 
     this.buttons = [new Prg.btn({ 
      text: btnUploadMsg, 
      handler: this.onSave, 
      scope: this 
     }),new Prg.btn({ 
      text: btnCancelMsg, 
      handler: function() { 
       this.hide(); 
      }, 
      scope: this 
     })]; 
     this.callParent(arguments); 
     this.form = this.getComponent('blog-edit-form').getForm(); // 'upload-form-'+this.filetype 
    } 

正如你看到的，我用表格佈局的形式，某種形式的項目應該是內聯的，別人建議立即進行刪除在新線。我已經完成了表，但是，現在項目的寬度是固定的...我也想給他們95％的價值讓他們自動調整窗口大小時調整。我無法找到方式。嘗試添加anchor和width: '90%'但它不起作用。

Answer 1

使用窗體的默認佈局：form並使用FieldContainerhttp://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.FieldContainer您需要在同一行顯示兩個字段。

通過這種方式，您可以利用anchor並仍然創建一個您想要的複雜佈局。

這應該工作（我不能測試它，因爲自定義類型的）

Ext.define('Prg.FormPanel', { 
initComponent: function() { 
    Ext.applyIf(this, { 
     xtype: 'prg-formPanel', 
     id: 'blog-edit-form', 
     // id fixed : id: 'upload-form-'+this.filetype, 
     url: baseUrl + "crud", 
     border: 0, 
     bodyStyle: { 
      padding: '10px 20px' 
     }, 
     height: 600, 
     defaultType: 'textfield', 
     defaults: { 
      anchor: '95%', 
      allowBlank: true, 
      msgTarget: 'side', 
      labelWidth: 60 
     }, 
     layout: { 
      type: 'form' 
     }, 
     items: [{ 
      inputType: 'hidden', 
      id: 'actionType', 
      name: 'actionType', 
      value: this.actionType, 
      scope: this 
     }, { 
      inputType: 'hidden', 
      id: 'id', 
      name: 'id', 
      value: (Ext.isEmpty(this.record) ? null : this.record.get('id')) 
     }, { 
      inputType: 'textfield', 
      id: 'title', 
      fieldLabel: 'Başlık', 
      name: 'title', 
      labelWidth: 60, 
      value: (Ext.isEmpty(this.record) ? null : this.record.get('title')) 
     }, { 
      inputType: 'textfield', 
      id: 'name', 
      fieldLabel: 'İsim', 
      name: 'name', 
      labelWidth: 60, 
      value: (Ext.isEmpty(this.record) ? null : this.record.get('name')) 
     }, { 
      xtype: 'fieldcontainer', 
      layout: 'hbox', 
      items: [ 
      new Prg.checkBox({ 
       fieldLabel: 'Aktif mi?', 
       name: 'activeFlag', 
       labelWidth: 60, 
       checked: (Ext.isEmpty(this.record) ? false : this.record.get('activeFlag')) 
      }), new Prg.idCombo({ 
       fieldLabel: 'Dil', 
       labelWidth: 60, 
       emptyText: 'Dili seçiniz...', 
       id: 'langId', 
       name: 'langId', 
       store: this.ds_language, 
       scope: this 
      })] 
     }, { 
      inputType: 'textfield', 
      id: 'targetURL', 
      fieldLabel: 'Link', 
      name: 'targetURL', 
      labelWidth: 60, 
      value: (Ext.isEmpty(this.record) ? null : this.record.get('targetURL')) 
     }, { 
      xtype: "TinyMCEEditor", 
      fieldLabel: "İçerik", 
      width: 800, 
      height: 400 
      name: "contentHTML", 
      id: "contentHTML", 
      tinyMCESettings: { 
       mode: "exact", 
       theme: "advanced", 
       skin: "o2k7", 
       // Tiny Settings Here 
       //... 
       value: (Ext.isEmpty(this.record) ? "" : this.record.get('contentHTML')) 
      }, 
      new Ext.form.field.ComboBox({ 
       id: "categories", 
       name: "categories", 
       fieldLabel: 'Kategori', 
       multiSelect: true, 
       displayField: 'name', 
       forceSelection: true, 
       labelWidth: 60, 
       store: this.ds_tags, 
       queryMode: 'remote', 
       scope: this 
      })] // Form items closure 
     }); 
    this.buttons = [new Prg.btn({ 
     text: btnUploadMsg, 
     handler: this.onSave, 
     scope: this 
    }), new Prg.btn({ 
     text: btnCancelMsg, 
     handler: function() { 
      this.hide(); 
     }, 
     scope: this 
    })]; 
    this.callParent(arguments); 
    this.form = this.getComponent('blog-edit-form').getForm(); // 'upload-form-'+this.filetype 
    } 
}); 

希望這有助於。

Answer 2

也許你可以使用一個Resizer？

這裏有一些examples。