120 lines
No EOL
3.8 KiB
HTML
120 lines
No EOL
3.8 KiB
HTML
<html>
|
|
<head>
|
|
<title>Column Layout</title>
|
|
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
|
|
|
|
<!-- GC -->
|
|
<!-- LIBS -->
|
|
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
|
|
<!-- ENDLIBS -->
|
|
|
|
<script type="text/javascript" src="../../ext-all.js"></script>
|
|
|
|
<!--<script language="javascript" src="../grid/PropsGrid.js"></script>-->
|
|
<style type="text/css">
|
|
html, body {
|
|
font:normal 12px verdana;
|
|
margin:0;
|
|
padding:0;
|
|
border:0 none;
|
|
overflow:hidden;
|
|
height:100%;
|
|
}
|
|
.x-panel-body p {
|
|
margin:5px;
|
|
}
|
|
.x-column-layout-ct .x-panel {
|
|
margin-bottom:5px;
|
|
}
|
|
.x-column-layout-ct .x-panel-dd-spacer {
|
|
margin-bottom:5px;
|
|
}
|
|
.settings {
|
|
background-image:url(../shared/icons/fam/folder_wrench.png) !important;
|
|
}
|
|
.nav {
|
|
background-image:url(../shared/icons/fam/folder_go.png) !important;
|
|
}
|
|
</style>
|
|
<script type="text/javascript">
|
|
|
|
Ext.onReady(function(){
|
|
|
|
// NOTE: This is an example showing simple state management. During development,
|
|
// it is generally best to disable state management as dynamically-generated ids
|
|
// can change across page loads, leading to unpredictable results. The developer
|
|
// should ensure that stable state ids are set for stateful components in real apps.
|
|
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
|
|
|
|
var viewport = new Ext.Viewport({
|
|
layout:'border',
|
|
items:[{
|
|
region:'west',
|
|
id:'west-panel',
|
|
title:'West',
|
|
split:true,
|
|
width: 200,
|
|
minSize: 175,
|
|
maxSize: 400,
|
|
collapsible: true,
|
|
margins:'35 0 5 5',
|
|
cmargins:'35 5 5 5',
|
|
layout:'accordion',
|
|
layoutConfig:{
|
|
animate:true
|
|
},
|
|
items: [{
|
|
html: Ext.example.shortBogusMarkup,
|
|
title:'Navigation',
|
|
autoScroll:true,
|
|
border:false,
|
|
iconCls:'nav'
|
|
},{
|
|
title:'Settings',
|
|
html: Ext.example.shortBogusMarkup,
|
|
border:false,
|
|
autoScroll:true,
|
|
iconCls:'settings'
|
|
}]
|
|
},{
|
|
region:'center',
|
|
margins:'35 5 5 0',
|
|
layout:'column',
|
|
autoScroll:true,
|
|
items:[{
|
|
columnWidth:.33,
|
|
baseCls:'x-plain',
|
|
bodyStyle:'padding:5px 0 5px 5px',
|
|
items:[{
|
|
title: 'A Panel',
|
|
html: Ext.example.shortBogusMarkup
|
|
}]
|
|
},{
|
|
columnWidth:.33,
|
|
baseCls:'x-plain',
|
|
bodyStyle:'padding:5px 0 5px 5px',
|
|
items:[{
|
|
title: 'A Panel',
|
|
html: Ext.example.shortBogusMarkup
|
|
}]
|
|
},{
|
|
columnWidth:.33,
|
|
baseCls:'x-plain',
|
|
bodyStyle:'padding:5px',
|
|
items:[{
|
|
title: 'A Panel',
|
|
html: Ext.example.shortBogusMarkup
|
|
},{
|
|
title: 'Another Panel',
|
|
html: Ext.example.shortBogusMarkup
|
|
}]
|
|
}]
|
|
}]
|
|
});
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
|
|
</body>
|
|
</html> |