您的位置：首页 > Web前端 > JavaScript

extjs4 多个panel 列布局

2014-12-02 12:09 411 查看

单纯的设置layout：column 好像不行，感觉extjs4跟以前不太一样

找了一个panel 横向布局的例子

<html>
<head>
<title>Column Layout</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<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" src="../../bootstrap.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',
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,
defaults: {
layout: 'anchor',
defaults: {
anchor: '100%'
}
},
items: [{
columnWidth: 1/3,
baseCls:'x-plain',
bodyStyle:'padding:5px 0 5px 5px',
items:[{
title: 'A Panel',
html: Ext.example.shortBogusMarkup
}]
},{
columnWidth: 1/3,
baseCls:'x-plain',
bodyStyle:'padding:5px 0 5px 5px',
items:[{
title: 'A Panel',
html: Ext.example.shortBogusMarkup
}]
},{
columnWidth: 1/3,
baseCls:'x-plain',
bodyStyle:'padding:5px',
items:[{
title: 'A Panel',
html: Ext.example.shortBogusMarkup
},{
title: 'Another Panel',
html: Ext.example.shortBogusMarkup
}]
}]
}]
});
});
</script>
</head>
<body>
</body>
</html>

大小: 89.6 KB

查看图片附件

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航