ExtJs。调整大小的字段布局

Question

我有一个嵌套面板的窗口。面板包含几个字段。 窗口调整大小事件后面板的字段布局错误。

var panel = new Ext.panel.Panel({ 
     layout: { 
      type: 'vbox', 
      align: 'stretch' 
     }, 
     items: [{ 
      xtype: 'textfield', 
      fieldLabel: 'One Two Three Four Five Six Seven', 
      labelAlign: 'top', 
      width: '100%' 
     },{ 
      xtype: 'textfield', 
      fieldLabel: 'One Two Three Four Five Six Seven', 
      labelAlign: 'top', 
      width: '100%' 
     }] 
    }) 

    var window = new Ext.Window({ 
     layout: 'anchor', 
     title: 'Hello resizer', 
     resizable: true, 
     draggable: true, 
     scrollable: 'vertical', 
     items: [panel], 
     width: 400, 
     height: 200, 
    }); 

的方式重现：
1.进入这个fiddle
2.调整窗口的大小，因此文本框的那个标签不适合一行。 （在这里你会看到定位问题）

有没有办法正确显示避免UpdateLayout请领域，改变布局类型？

Answer 1

这似乎是ExtJs中的一个bug。一种解决方法是将自定义配置传递给Ext.resizer.Resizer。指定dynamic为true以在拖动期间动态更新组件。

var window = new Ext.Window({ 
    //[...] 
    resizable: { 
     dynamic: true 
    }, 
    //[...] 
}); 

下面是完整的例子： https://fiddle.sencha.com/#view/editor&fiddle/21c3