最大化ExtJS中的tabpanel?

时间:2014-03-20 10:59:22

标签: javascript extjs extjs4

我知道只有窗口在ExtJS中有一个最大化配置,所以我想在用户点击一个按钮时最大化一个tabpanel到整个页面。

我认为有可能像Iv'看到的那样:http://www.sencha.com/forum/showthread.php?268067-How-can-we-add-maximize-and-minimize-in-EXTJS-4-portal

但我不能适应我的情况。

这是我的tabpanel

            {
            region: 'center',
            tabPosition: 'top',
            title: 'Représentation',
            xtype: 'tabpanel',
            id: 'panel1',
            cls: 'tabpanel-container',
            tools:[{
                type:'maximize',
                tooltip: 'Agrandir la fenêtre',
                handler: function(e, target, panel) {
                    var c = panel.up('viewport');
                    var testPanel = Ext.getCmp('panel1');
                    var con=panel.ownerCt;
                    c.insert(0,con);
                    c.doLayout();
                }
            }],
            header: {
                titlePosition: 1,
                titleAlign: 'left',
                height: 36,
                cls: 'tabpanel-header'
            },
            activeTab: tabType,
            border: false,
            split: false,
            collapsible: false,
            margins: '5 0 5 0',
            items: [...]
            }, [...]

单击该工具时,tabpanel只是与页面不相符,控制台中不会触发任何错误。

任何提示?

1 个答案:

答案 0 :(得分:0)

在调查了Window组件和浮动mixin的ExtJS来源之后,我已经提出了这个解决方案:jsfiddle

执行魔术的处理程序如下:

    handler: function (e, target, panelHdr) {
        var panel = panelHdr.up('panel');
        if (!panel.maximized) {

            panel.restoreSize = panel.getSize();
            panel.restorePos = panel.getPosition(true);
            panel.maximized = true;
            var parent = panel.ownerCt,
                container = parent ? parent.getTargetEl() : panel.container,
                newBox = container.getViewSize(false);
            panel.setBox(newBox);
        } else {
            var newBox = panel.restoreSize;
            newBox.x = panel.restorePos[0];
            newBox.y = panel.restorePos[1];
            panel.maximized = false;
            panel.setBox(newBox);
        }
    }