Code:
Ext.onReady(function() {
Ext.nd.dateTimeFormats = {
dateFormat : Ext.DatePicker.prototype.format,
timeFormat : 'h:i:s A',
dateTimeFormat : Ext.DatePicker.prototype.format + ' h:i:s A'
};
var centerTabPanel = new Ext.TabPanel({
id : 'center-region',
region : 'center',
deferredRender : false,
enableTabScroll : true,
activeTab : 3,
border : false,
margins : {left : 0, top: 0, right : 0, bottom : 10},
defaults : {
target : 'center-region',
border : true
},
items : [{
contentEl : 'center1',
title : 'Close Me2',
closable : true,
autoScroll : true
}, {
contentEl : 'center2',
title : 'Center Panel',
autoScroll : true
}, {
xtype: 'tabpanel',
title : 'A Flat View',
id : 'tabview',
activeTab : 0,
tabPosition: 'bottom',
items : [{
xtype : 'xnd-uiview',
viewName : 'f1',
target : 'tabview'
}]
}, {
xtype : 'xnd-uiview',
viewName : 'sc1',
title : 'A Categorized View'
}, {
xtype : 'xnd-uiview',
viewUrl : '/extnd/tasks.nsf/Tasks\\All',
stripeRows : true,
title : 'A view in a different db'
}]
});
var viewport = new Ext.Viewport({
layout: 'border',
defaults : {
margins : {left : 10, top: 0, right: 10, bottom: 10}
},
items: [
new Ext.BoxComponent({
region : 'north',
el : 'north',
style : {margin : "5px"},
height: 32
}) , {
region : 'east',
title : 'East Side',
collapsible : true,
split : true,
width : 225,
minSize : 175,
maxSize : 400,
layout : 'fit',
//margins : '0 5 0 0',
items :
new Ext.TabPanel({
border : false,
activeTab : 1,
tabPosition: 'bottom',
items : [{
html : '<p>A TabPanel component cabe be a region.</p>',
title : 'A Tab',
autoScroll : true
},
new Ext.grid.PropertyGrid({
title : 'Property Grid',
closable : true,
source : {
"(name)" : "Properties Grid",
"grouping" : false,
"autoFitColumns" : true,
"productionQuality" : false,
"created" : new Date(Date.parse('10/15/2006')),
"tested" : false,
"version" : .01,
"borderWidth" : 1
}
})]
})
}, {
region : 'west',
id : 'west-panel',
title : 'West',
split : true,
width : 200,
minSize : 175,
maxSize : 400,
collapsible : true,
cmargins : {top : 5},
layout: 'accordion',
layoutConfig : {
animate : true
},
defaults : {
border : false
},
items : [{
title : 'Outline from Domino',
xtype : 'xnd-uioutline',
target : 'center-region',
targetDefaults : {closable : true},
outlineName : 'mainOL'
},{
title : 'Navigation',
html : '<p>some navigation here, maybe an outline</p>'
},{
xtype : 'xnd-uiview',
viewName : 'f1',
stripeRows : true,
title : 'A View',
target : 'west-panel'
}, {
title : 'Settings',
html : '<p>Some settings in here.</p>',
border : false
}, {
title : 'Another Outline from Domino',
xtype : 'xnd-uioutline',
outlineName : 'mainOL'
}]
},
centerTabPanel]
});
centerTabPanel.add({xtype : 'xnd-uiview', viewUrl : '/extnd/demo.nsf/f1'});
Ext.get("hideit").on('click', function() {
var w = Ext.getCmp('west-panel');
w.collapsed ? w.expand() : w.collapse();
});
})