Question

我有一个错误列表（列表中的1到20之间）。我想创建一个显示列表的弹出窗口，并且无论用户字体或浏览器如何，其大小都要合理地包含它。我在sencha的小提琴中做了一个例子，它显示了我的问题和我的非最佳解决方案。请建议如何改进（或使用sencha中的其他一些机制来获得我想要的东西）。

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

***更新：我这样做了，似乎有很多帮助

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

Answer 1

只是不要设置窗口的高度。

工作示例：https://fiddle.sencha.com/#fiddle/18ej

如何最好地将项目列表显示为在ExtJS 6中正确调整大小的弹出窗口

1 个答案: