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