Skip to content

Instantly share code, notes, and snippets.

@jgrocha

jgrocha/column.html

Created April 24, 2014 09:48
Show Gist options
  • Save jgrocha/11248633 to your computer and use it in GitHub Desktop.
Save jgrocha/11248633 to your computer and use it in GitHub Desktop.
Download ZIP
ExtJS Three column layout inside tabpanel
Raw
column.html
<html>
<head>
<title>Column Layout</title>
<!-- GC -->
<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;
}
.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" src="../../examples/shared/include-ext.js"></script>
<script type="text/javascript" src="../../examples/shared/options-toolbar.js"></script>
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
<script type="text/javascript">
Ext.require(['*']);
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(Ext.create('Ext.state.CookieProvider'));
var viewport = Ext.create('Ext.Viewport', {
layout : 'border',
items : [{
region : 'west',
title : 'West',
split : true,
width : 200,
minWidth : 175,
maxWidth : 400,
collapsible : true,
margin : '35 0 5 5',
layout : {
type : 'accordion',
animate : false
},
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',
margin : '35 5 5 0',
xtype : 'tabpanel',
items : [{
title : 'testing',
layout : 'column',
autoScroll : true,
defaultType : 'container',
items : [{
columnWidth : 1 / 3,
padding : '5 0 5 5',
items : [{
title : 'A Panel',
html : Ext.example.shortBogusMarkup
}]
}, {
columnWidth : 1 / 3,
padding : '5 0 5 5',
items : [{
title : 'A Panel',
html : Ext.example.shortBogusMarkup
}]
}, {
columnWidth : 1 / 3,
padding : 5,
items : [{
title : 'A Panel',
html : Ext.example.shortBogusMarkup
}, {
margin : '5 0 0 0',
title : 'Another Panel',
html : Ext.example.shortBogusMarkup
}]
}]
}]
}]
});
});
</script>
</head>
<body></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment