Example of maximizable panel

Show how to make a panel maximizable just like a window

HTML

<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css">
<div id="example"></div>

CSS

html, body, #example {
    height: 100%;
}

body {
    background-color: #CCC
}

JavaScript

Ext.onReady(function () {
    Ext.define('Mytab', {
        extend: 'Ext.tab.Panel',
        region: 'center',
        tabPosition: 'top',
        title: 'Représentation',
        xtype: 'tabpanel',
        id: 'panel1',
        cls: 'tabpanel-container',
        
        header: {
            titlePosition: 1,
            titleAlign: 'left',
            height: 36,
            cls: 'tabpanel-header'
        }
    });

    var tabPanel = Ext.create('Mytab', {
        activeTab: 'tab1',
        width: 300,
        border: false,
        split: false,
        collapsible: false,
        //margins: '5 0 5 0',
        tools: [{
            type: 'maximize',
            tooltip: 'Agrandir la fenêtre',
            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);
                }
            }
        }],
        items: [{
            name: 'tab1',
            title: 'tab1',
            html: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tristique euismod lectus. Pellentesque consectetur condimentum diam id auctor. Pellentesque semper sem enim, et bibendum risus gravida at. Duis felis nisl, porttitor sit amet ultrices in, mollis eu sapien. Vivamus et dolor quis turpis suscipit vulputate. Fusce tincidunt eget...