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

宽度：“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小提琴上没有3.2.2版本。但这应该适用于3.2.2。

示例小提琴（使用ExtJS 3.4.1.1）：https://fiddle.sencha.com/#view/editor&fiddle/28ql

嵌套在vbox中的hbox不显示ExtJS

1 个答案: