javascript - 嵌套在 vbox 中的 hbox 不显示 ExtJS

Question

我正在使用 ExtJS 3.3.2，并且我有一个面板，其中一些面板嵌套在 vbox 和 hbox 中。问题很简单:我的 hbox 内项目数据没有显示，我尝试修改体重和高度，但它从未显示。查看代码 (F12)，我看到数据已创建，但面板的尺寸非常小。

var i = 0;
jsonResp.forEach(function(currentItem) {
    i++;

var panel = new Ext.Panel({
    id: 'superpanel'+i,
    layout: 'vbox',
    height: 50,
    frame: true,
    collapsible: true,
    items: [{
        xtype: 'panel',
        id: 'jsonObject'+i,
        layout: 'hbox',
        frame: true,
        align: 'stretch',
        items:[{
            id: 'codigo'+i,
            xtype: 'panel',
            html: currentItem.codigo
        },{
            id:'nombre'+i,
            xtype: 'panel',
            html: currentItem.nombre
        },{
            xtype: 'panel',
            html: currentItem.estado.toString()
        }]
    },{
        xtype: 'panel',
        id: 'aviso'+i,
        html: "Error"
    }]
})
Ext.getCmp("contenedor").add(panel);
});
Ext.getCmp("contenedor").doLayout();

我想创建这个:

出了什么问题？我尝试了宽度/高度和弯曲，但它不起作用。

Answer 1

width: "100%" 和 flex 可用于解决此问题。 这是我解决这个问题的方法。

        Ext.onReady(function () {

        var viewport = new Ext.Viewport({

            items: [{
                xtype: "panel",
                title: "Test one",
                width: 500,
                height: 800,
                id: "contenedor",
                autoScroll: true
            }]
        });

        //delay for adding dynamic content
        setTimeout(function () {
            var parentPanel = Ext.getCmp("contenedor");
            for (var i = 0; i < 10; i++) {
                var panel = new Ext.Panel({
                    id: 'superpanel' + i,
                    layout: 'vbox',
                    height: 100,
                    frame: true,
                    collapsible: true,
                    items: [{
                        xtype: 'panel',
                        id: 'jsonObject' + i,
                        layout: 'hbox',
                        frame: true,
                        align: 'stretch',
                        flex: 3,
                        width: '100%',
                        items: [{
                            id: 'codigo' + i,
                            flex: 1,
                            xtype: 'panel',
                            html: 'Demo html 1'
                        }, {
                            id: 'nombre' + i,
                            xtype: 'panel',
                            flex: 1,
                            html: 'Demo html 2'
                        }, {
                            xtype: 'panel',
                            flex: 1,
                            html: 'Demo html 3'
                        }]
                    }, {
                        xtype: 'panel',
                        id: 'aviso' + i,
                        html: "Error",
                        width: "100%"
                    }]
                });
                parentPanel.add(panel);
            }

            parentPanel.doLayout();

        }, 2000);
    });

Fiddle 是使用 ExtJS 3.4.1.1 创建的。遗憾的是 sencha fiddle 上没有可用的 3.2.2 版本。但这应该适用于 3.2.2。

示例 Fiddle(使用 ExtJS 3.4.1.1):https://fiddle.sencha.com/#view/editor&fiddle/28ql