Adding dynamic items to a container in extjs

Question

I have a container with hbox layout. With a button I am adding another container with a button inside, the problem is that then the content never goes to second row, only stays in the first row. The main container has a fixed width, and is inside a window. How can I make this work? I would like it to work as 'break-word' does in css. Thanks for any help.

screenshoot: http://www.ohecollegeplanner.com/cp/img.png

getSelectedItemsCmp: function () {
    var items = [];

    var container = Ext.create("Ext.container.Container", {
        layout: "hbox",
        align: 'stretch',
        id: "tagContainer",
        height: 70,
        //flex:2,![enter image description here][1]
        overflowY: "auto",
        width: "400px",
        padding: 5
    });

    for (var i = 0; i < this.selectedItems.length; i++) {
        var tag = this.createSelectedItemsTag(this.selectedItems[i]);
        container.add(tag);

    }

    //container.doLayout();

    return container;
},
createSelectedItemsTag: function (obj) {
    var tag = {
        xtype: "container",
        id: "tag_" + obj.value,
        cls: "tagCompContainer",
        layout: {
            type: "hbox"
        },
        items: [{
            xtype: "label",
            text: obj.label,
            cls: "labelSelectedComps"
        }, {
            xtype: "button",
            text: "x",
            id: "tagbutton_" + obj.value,
            listeners: {
                click: {
                    fn: this.onDeleteSelectedCmpClick,
                    scope: this
                }
            }
        }

        ]
    };
    return tag;
},

Could you post some code and screenshots?

Chris
– Chris

2013-01-14 14:32:06 +00:00
Commented Jan 14, 2013 at 14:32 — Chris
– Chris, Commented Jan 14, 2013 at 14:32
ok here is the code and image link... thanks for you help

user1698738
– user1698738

2013-01-14 14:43:28 +00:00
Commented Jan 14, 2013 at 14:43 — user1698738
– user1698738, Commented Jan 14, 2013 at 14:43

existdissolve · Accepted Answer · 2013-01-14 14:58:40Z

2

What you are getting is exactly what hbox does...it distributes the items of the container horizontally. Maybe try using a table layout?

answered Jan 14, 2013 at 14:58

existdissolve

3,1241 gold badge19 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding dynamic items to a container in extjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related