問題與窗口

內部的流體形式我們必須創建下列條件中的流體佈局會議：問題與窗口

有一個窗口內的表單。
如果窗口寬度增加，則表格寬度和其字段寬度也應該增加。
如果窗寬減少，則表格寬度及其字段寬度應該減小，但只能達到極限。
如果窗口寬度減少超出限制，那麼應該在窗體上出現一個滾動條。

我們試圖在此給予彎曲到字段和minWidth的形式，假設彎曲將寬度和minWidth形成，如果窗口寬度進一步降低將導致滾動增加的照顧。

但這種遺憾的是不工作按以下測試案例：

<html> 
    <head> 
     <title>TEST</title> 
     <link rel='stylesheet' href='resources/extjs/resources/css/ext-all.css' /> 
     <script type='text/javascript' src='resources/extjs/ext-all-dev.js'></script> 
     <script type='text/javascript'> 
      function getForm(){ 
       var form = { 
        xtype:'form', 
        region:'north', 
        height:100, 
        autoScroll:true, 
        minWidth:300, 
        title: 'Simple Form', 
        items: [ 
        { 
         xtype:'container', 
         layout:'hbox', 
         items:[ 
          { 
           xtype:'textfield', 
           fieldLabel: 'First', 
           name: 'first', 
           allowBlank: false, 
           width:100, 
           labelWidth:50, 
           flex:1 
          },{ 
           xtype:'textfield', 
           fieldLabel: 'Last', 
           name: 'last', 
           allowBlank: false, 
           width:100, 
           labelWidth:50, 
           flex:1 
          } 
         ] 
        }] 
       }; 
       return form; 
      } 
      function getWin(){ 
       var win = Ext.create('Ext.window.Window',{ 
        title:'Test Window', 
        height:400, 
        width:600, 
        layout:'border', 
        items:[ 
         getForm(), 
         { 
          region:'center', 
          title:'Center Region', 
          html:'Center Region Content' 
         } 
        ] 
       }); 
       return win; 
      } 
      Ext.onReady(function(){ 
       var win = getWin(); 
       win.show(); 
      }); 

     </script> 
    </head> 
    <body> 
    </body> 
</html>

如何實現這一個有什麼建議？或者這裏做錯了什麼？

來源

2012-07-13 netemp

有類似的一個很好的例子： http://docs.sencha.com/ext-js/4-1/#!/example/form/anchoring.html

這裏是一個與你的代碼的混合。最小值和最大值都設置在窗口容器處。如果窗口小於該部分所需的寬度，則窗體上會有一個autoScroll和autoWidth配置，並帶有一個minWidth以進行滾動。

見這裏： http://jsfiddle.net/Du9Nb/

Ext.require([ 
    'Ext.form.*', 
    'Ext.window.Window' 
]); 

Ext.onReady(function() { 
    var form = Ext.create('Ext.form.Panel', { 
     border: false, 
     fieldDefaults: { 
      labelWidth: 50 
     }, 
     url: 'save-form.php', 
       autoScroll: true, 
     autoHeight: true, 
     bodyPadding: 5, 

     items: [ 
      {xtype:'panel', 
      title:'Simple Form', 
      minWidth: 400, 
      layout: 'hbox', 
      defaultType: 'textfield', 
      items:[ 
      { 
       fieldLabel: 'First', 
       name: 'first', 
       allowBlank: false, 
       flex: 1, 
       anchor:'100%' // anchor width by percentage 
      },{ 
       fieldLabel: 'Last', 
       name: 'last', 
       allowBlank: false, 
       flex: 1, 
       anchor: '100%' // anchor width by percentage 
      } 
      ] 
      }, { 
       xtype: 'panel', 
       title: 'Center Region', 
       html: 'Center Region Content' 

      }] 
    }); 

    var win = Ext.create('Ext.window.Window', { 
     title: 'Test Window - Resize Me', 
     width: 600, 
     height:400, 
     minWidth: 300, 
     minHeight: 200, 
     layout: 'fit', 
     plain: true, 
     items: form, 

     buttons: [{ 
      text: 'Send' 
     },{ 
      text: 'Cancel' 
     }] 
    }); 

    win.show(); 
});

來源

2012-07-13 20:35:53

謝謝你的職位約翰和分享示例代碼。在你的代碼中，我發現你已經添加了一個Panel到一個Form。它是這個面板的最小寬度，它正在訣竅中。現在，表單也已經是一個面板，因此，該面板的添加不幸地引入了額外的分支。我曾嘗試將minWidth添加到我代碼中用於代替面板的容器中，但它沒有任何效果。看起來，容器不能保持面板的寬度限制，但它帶有額外分支的價格。有沒有其他的解決方法呢？ – netemp 2012-07-14 07:00:18

容器也將在面板的地方工作。您也可以將minWidth放在您的示例中包含兩個表單元素的容器上。這裏是你的minWidth片段移動http://jsfiddle.net/9bQp7/這將只把窗體部分放在窗體部分，而不是包裝所有的窗口內容。 – 2012-07-16 13:20:43

回答

相關問題