I just finished an Extjs project and summarized its Viewport code here. For emergency purposes:
Effect:
The Code is as follows:
[Javascript]
Var indexview = new Ext. Viewport ({
Layout: 'border ',
HideBorders: true,
Items :[{
Border: false,
Region: "north ",
Height: 100,
Frame: true,
Items :[{
Frame: true,
Layout: 'column ',
Items :[{
BodyStyle: 'padding: 0px; border: 1px ',
ColumnWidth:. 2,
Html: ''
},{
BodyStyle: 'padding: 0px; border: 1px ',
ColumnWidth:. 8,
Html: quitbtn + quickstr + curloginer
}]
}]
},
{
Title: "menu ",
Region: "west ",
Width: 200,
Collapsible: true,
Collapsed: false, // whether to fold automatically
Layout: 'fit ',
Split: true,
Margins: '0 0 5 ',
Items :[{
Layout: 'accordion ',
LayoutConfig: {animate: true },
Items: alltree
}]
},{
Border: false,
Id: "centertab ",
Region: "center ",
Split: true,
Collapsible: true,
Layout: 'fit ',
Items: centertabs = new Ext. TabPanel ({
Plugins: new Ext. ux. TabCloseMenu (),
// Id: 'centertab ',
DeferredRender: false,
AnimScroll: true,
AutoTabs: true,
EnableTabScroll: true,
AutoDestroy: true,
Border: false,
BodyStyle: 'border: 0px ;',
LayoutOnTabChange: true,
ActiveTab: 0,
Items: [{title: 'System information ',
Frame: true,
Closable: false,
AutoScroll: true,
Border: false,
IconCls: 'nav3 ',
BodyStyle: 'border: 0px ;'
}]
})
},
{
Id: 'Download ',
Border: false,
Region: "south ",
Height: 50,
Title: "notification ",
Collapsible: true,
Html: '<marquee width = 100% onmouseover = "this. stop () "onmouseout =" this. start () "id =" notice "> '+ paoma +' </marquee>'
}]
});