Ext.define('saas.view.main.MainContainerWrap', {
    extend: 'Ext.container.Container',
    xtype: 'maincontainerwrap',

    // requires : [
    //     'Ext.layout.container.HBox'
    // ],

    id: 'main-view-detail-wrap',
    reference: 'mainContainerWrap',
    flex: 1,

    layout: 'border',

    // layout: {
    //     type: 'hbox',
    //     align: 'stretchmax',

    //     // Tell the layout to animate the x/width of the child items.
    //     animate: true,
    //     animatePolicy: {
    //         x: true,
    //         width: true
    //     }
    // },

    items: [
        {
            xtype: 'treelist',
            region: 'west',
            reference: 'navigationTreeList',
            itemId: 'navigationTreeList',
            ui: 'nav',
            bind: '{navItems}',
            width: 250,
            expanderFirst: false,
            expanderOnly: false,
            floatLeafItems: true,
            listeners: {
                itemClick: 'onNavigationTreeItemClick'
            }
        },
        {
            xtype: 'tabpanel',
            region: 'center',
            flex: 1,
            id:'main-tab-panel',
            reference: 'mainTabPanel',
            cls: 'main-right-tabpanel',
            itemId: 'contentPanel',
            defaults: {
                closable: true,
                margin: 10
            },
            items: [
                {
                    xtype: 'home',
                    title: '首页',
                    closable: false
                }
            ]
        }
    ],

    beforeLayout : function() {
        // We setup some minHeights dynamically to ensure we stretch to fill the height
        // of the viewport minus the top toolbar

        var me = this,
            height = Ext.Element.getViewportHeight() - 64,  // offset by topmost toolbar height
            // We use itemId/getComponent instead of "reference" because the initial
            // layout occurs too early for the reference to be resolved
            navTree = me.getComponent('navigationTreeList');

        me.minHeight = height;
        me.maxHeight = height;

        navTree.setStyle({
            'min-height': height + 'px',
            'max-height': height + 'px'
        });

        me.callParent(arguments);
    }
});