2017-06-13 8 views
0

入れ子パネルのあるウィンドウがあります。 Panelにはいくつかのフィールドがあります。 ウィンドウのサイズ変更イベント後のパネルレイアウトのフィールドが正しくありません。ExtJs。サイズ変更時のフィールドレイアウト

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へのテキストフィールドのラベルが1行に収まらないようにウィンドウのサイズを変更します。

enter image description here

正しくレイアウトタイプを変更するupdateLayout回避フィールドを表示する方法はあります(ここでは、位置決めの問題が表示されますか)?

答えて

1

これはExtJsのバグです。 1つの回避策は、Ext.resizer.Resizerにカスタム構成を渡すことです。ドラッグ中にコンポーネントを動的に更新する場合は、dynamicをtrueに指定します。ここで

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

は完全な例である: https://fiddle.sencha.com/#view/editor&fiddle/21c3

関連する問題