ExtJs 4 How to Increase width of panel dynamically?

Question

When i add new buttons to panel i wants to increase the size of that panel dynamically?

 Ext.onReady(function() {

    Ext.tip.QuickTipManager.init();

     Ext.define('myPanel', {
        extend:'Ext.panel.Panel',
        bodyStyle  : {"background-color":"#DFE8F6","padding":"2px"},
            width:100,
        border:false,
        viewConfig: 
        {
            forceFit: true,
        }
        });

    new myPanel({
        id:'_panel',
            renderTo:Ext.getBody()
    });
        new Ext.button.Button({
        text:'Click Me',
        renderTo:Ext.getBody(),
        handler:function()
        {
            Ext.getCmp('_panel').add(new Ext.button.Button({text:'hello'}));
            Ext.getCmp('_panel').doLayout();
        }
     });
});

Here the width is 100. When i add new buttons to panel the width of the panel should be increased as per new buttons. Here buttons' sizes will be different for different texts of the button.

U and me U and me · Accepted Answer · 2012-05-02T17:20:10

Because ExtJS' Components have the functions for their width, so I think you can try:

handler:function()
    {
        var btn = new Ext.button.Button({text:'hello'});
        var panel = Ext.getCmp('_panel');
        panel.setWidth(panel.getWidth() + btn.getWidth());
        panel.add(btn);
        panel.doLayout();
    }

ExtJs 4 How to Increase width of panel dynamically?

2 Answers