CODEWITHSUNDEEP
extjsextjs4
RAVI
RAVI

Reputation: 3153

ExtJs 4 How to Increase width of panel dynamically?

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.

Upvotes: 2

Views: 9599

Answers (2)

Adnan
Adnan

Reputation: 2031

Did you set maxWidth or minWidth property? For example if you set maxWidth to 100 and try to setWidth(120) dynamically it won't work.

This is what happened to me. My Sencha Architect UI designer set max width of a panel and I was trying to setWidth() more than the max value.

Wasted an hour for such a silly thing! :(

Upvotes: 1

U and me
U and me

Reputation: 740

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

Upvotes: 2

Related Questions