var viewPortWest = {
    region:'west',
    id:'west-panel',
    title:'Navigation',
    width: 177,
    margins:'80 0 5 5',
    cmargins:'80 5 5 5',
    layout:'accordion',
    layoutConfig:{
        animate:true
    },
    items: [{
        //html: Ext.example.shortBogusMarkup,
        
        title:'Calendar',
        autoScroll:true,
        border:false,
        iconCls:'nav',
        defaults:{
            border:false
        },
        
        items: [datePicker]
    }]
};
var viewPortCentral = {
    xtype:'panel',
    title: 'Articles',
    layout: 'fit',
    region:'center',
    id: 'centered-panel',
    margins:'80 5 5 5',
    hideBorders: true,
    tools:[{
        id:'unpin',
        handler: function(e, target, panel) {
            el = grid.getTopToolbar();  
            el.toggleCollapse(); 
            Ex.get('tool-pin').show();
            el.hide(); 
        }  
    },{
        id:'pin',
        hidden:true,
        handler: function(e, target, panel) {
            el = grid.getTopToolbar();   
            el.toggleCollapse();  
            el.show(); 
        }  
    }],  
    items:[grid]
};


var viewPortContent = {
    layout:'border',
    style:{backgroundColor: '#EDEFF4'},
    items:[viewPortWest,viewPortCentral]
};