Öğelerin listesini, boyutlarının doğru olarak boyutlandırıldığı bir liste olarak en iyi nasıl görüntüleyeceğiniz ExtJS 6

Question

Hata listelerinde bir liste var (listede 1 ile 20 arasında). Listeyi gösteren ve kullanıcı yazı tipi veya tarayıcısından bağımsız olarak makul bir şekilde içerecek şekilde boyutlandırılmış bir açılır pencere oluşturmak istiyorum. Burada sencha'nın kemanına, meselem ve optimal olmayan çözümlerimi gösteren bir örnek verdim. Lütfen ne istediğimi elde etmek için sencha'da nasıl geliştirileceğini (veya başka bir mekanizmayı kullanacağınızı) önerin.

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(); 
    } 
}); 

*** GÜNCELLEME

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

: Bunu yaptım ve bir sürü

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

Answer 1

Hemen pencerenin yüksekliğini ayarlamak yok yardımcı olacak gibi görünüyor.

Çalışma örneği: https://fiddle.sencha.com/#fiddle/18ej