ExtJS 6で正しくサイズが設定されたポップアップとして項目のリストを表示するにはどうすればいいですか？

Question

私はエラーのリストを持っています（リストに1〜20の間）。私はリストを表示するポップアップウィンドウを作成したいと思うし、ユーザーのフォントやブラウザーに関係なく、それを適度に含むようにサイズが決められています。私はここで私の問題と私の非最適な解決策を示す賢者のフィドルの例を作った。改善する方法を提案してください（または、私が望むものを得るために煎茶の他の仕組みを使用してください）。

https://fiddle.sencha.com/#fiddle/18ef

Ext.application({ 
    name: 'Fiddle', 

    launch: function() { 

     var errorTpl = new Ext.XTemplate('<tpl for=".">', '<ul class="thumb-wrap">', '<li><b>{Message}</b></li>', '</ul>', '</tpl>'); 

     var errorView = Ext.create('Ext.view.View', { 
      layout: 'fit', 
      // data: errorList, 
      data: [{ 
       Message: '1 alsfdjaslfkjas;fljksafjsakflsalfjsalf;safsa;lfsal;dfsalfd' 
      }, { 
       Message: '2 alsfdjaslfkjas;fljksafjsakflsalfjsalf;safsa;lfsal;dfsalfd' 
      }, { 
       Message: '3 alsfdjaslfkjas;fljksafjsakflsalfjsalf;safsa;lfsal;dfsalfd' 
      }, { 
       Message: '4 alsfdjaslfkjas;fljksafjsakflsalfjsalf;safsa;lfsal;dfsalfd' 
      }, { 
       Message: '5 alsfdjaslfkjas;fljksafjsakflsalfjsalf;safsa;lfsal;dfsalfd' 
      }, { 
       Message: '6 alsfdjaslfkjas;fljksafjsakflsalfjsalf;safsa;lfsal;dfsalfd' 
      }, { 
       Message: '7 alsfdjasl alsfdjasl alsfdjasl fkjas;fljksafjsakflsalfjsalf;safsa;lfsal;dfsalfd' 
      }], 
      tpl: errorTpl, 
      itemSelector: 'div.thumb-wrap' 
     }); 

     var win = Ext.create('Ext.window.Window', { 
      title: 'Problems Found (Please Correct)', 
      modal: true, 
      layout: 'vbox', 
      width: 500, 
      height: 50 + errorView.data.length * 40, 
      items: [{ 
       xtype: 'button', 
       margin: "10 10 10 10", 
       text: 'close', 
       listeners: { 
        click: function() { 
         this.up('window').close(); 
        } 
       } 
      }, 
      errorView] 
     }).show(); 
    } 
}); 

*** UPDATE： 私はこれをしなかったし、それだけで、ウィンドウの高さを設定していない多くに

var htmlError = errorTpl.apply(errorList); 
Ext.Msg.alert('Problems Found (Please Correct)',htmlError); 

Answer 1

を助けているようです。

実例：https://fiddle.sencha.com/#fiddle/18ej