ExtJs 4如何动态增加面板宽度?

时间:2012-05-02 16:29:11

标签: extjs extjs4

当我向面板添加新按钮时,我想动态增加该面板的大小?

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

这里的宽度是100。 当我向面板添加新按钮时,应按照新按钮增加面板的宽度。 对于不同的按钮文本,按钮的大小会有所不同。

2 个答案:

答案 0 :(得分:2)

因为ExtJS'组件具有宽度功能,因此我认为您可以尝试:

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

答案 1 :(得分:0)

您是否设置了maxWidthminWidth属性?例如,如果您将maxWidth设置为100并动态尝试setWidth(120),则无法正常工作。

这就是发生在我身上的事。我的Sencha Architect UI设计师设置了一个面板的最大宽度,我试图setWidth()超过最大值。

为这么傻的事情浪费了一个小时! :(