问题与窗口

内部的流体形式我们必须创建下列条件中的流体布局会议：问题与窗口

有一个窗口内的表单。
如果窗口宽度增加，则表格宽度和其字段宽度也应该增加。
如果窗宽减少，则表格宽度及其字段宽度应该减小，但只能达到极限。
如果窗口宽度减少超出限制，那么应该在窗体上出现一个滚动条。

我们试图在此给予弯曲到字段和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

回答

相关问题