带有几个部分的EXT JS表单面板

Question

如何用较小的部分创建表单面板。较小的部分应该在表单面板中可重复使用。

Answer 1

我为此使用了帮手。这是一个应该向你展示技巧的例子。

/// limitForm : array with all ellemts that should be taken from the inner form. can be null or empty to take all 
FormContent.loginForm = function (limitForm) { 
    var defaults = [ 
    {/* this has the ID 0 */ 
     xtype: 'Fieldset', 
     title: 'Username', 
     layout: 'form', 
     items: [ 
      { 
       xtype: 'panel', 
       layout: 'form', 
       header: false, 
       hideBorders: true, 
       bodyBorder: false, 
       border: false, 
       height: 40, 
       items: [ 
        { 
         xtype: 'textfield', 
         fieldLabel: 'Username', 
         regex: /^[\w\s\.]*$/, 
         regexText: 'No special chars allowed in this field', 
         anchor: '100%', 
         name: 'LoginName' 
        } 
       ] 
      } 
     ] 
    } 
    , 
    {/* this has the ID 1 */ 
     xtype: 'Fieldset', 
     title: 'Additional data', 
     layout: 'form', 
     items: [ 
     { 
      xtype: 'panel', 
      layout: 'column', 
      header: false, 
      border: false, 
      bodyBorder: false, 
      height: 40, 
      items: [ 
       { 
        xtype: 'panel', 
        layout: 'form', 
        header: false, 
        columnWidth: 0.5, 
        hideBorders: true, 
        bodyBorder: false, 
        border: false, 
        items: [ 
         { 
          xtype: 'textfield', 
          fieldLabel: 'Title', 
          anchor: '100%',            
          name: 'Title' 
         } 
        ] 
       }, 
       { 
        xtype: 'panel', 
        layout: 'form', 
        header: false, 
        columnWidth: 0.5, 
        style: 'margin-left: 18px', 
        hideBorders: false, 
        border: false, 
        bodyBorder: false, 
        labelWidth: 65, 
        items: [ 
         { 
          xtype: 'textfield', 
          fieldLabel: 'Title', 
          anchor: '100%',            
          name: 'Title' 
         } 
        ] 
       } 
      ] 
     } 
    } 
    ]; 

    if (limitForm) { 
     var ds = []; 
     for (var i = 0, len = limitForm.length; i < len; i++) { 
      ds.push(defaults[limitForm[i]]); 
     } 
     defaults = ds; 
    } 

    return defaults; 
} 

如果你想重新使用它，你可以修改函数PARAMS与配置阵列或字段名（该名称必须改变，否则只是一个领域会得到提交）。但我认为它应该向你展示诀窍。

确定这个mus被加载到mainform！