hbox nested in vbox not shows ExtJS

Question

I'm using ExtJS 3.3.2 and I have a panel with some panels nested in vbox and hbox. The problem is easy: My data from items inside hbox are not showing, I tried modifying weight and height but it never shows up. Looking at the code (F12), I see the data is created, but the panels have a very tiny size.

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

I want to create this:

What is wrong? I tried it with width/height and flex but it doesn't work.

Saurabh Nemade Saurabh Nemade · Accepted Answer · 2017-10-24T17:10:11

width: "100%" and flex can be used to resolve this issue. Here is how I resolved it.

        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 is created with ExtJS 3.4.1.1. Sadly there is no 3.2.2 version available on sencha fiddle. But this should work with 3.2.2.

Example Fiddle (with ExtJS 3.4.1.1): https://fiddle.sencha.com/#view/editor&fiddle/28ql

hbox nested in vbox not shows ExtJS

1 Answers