您的位置：首页 > 其它

Ext之Viewport

2015-09-18 16:39 92 查看
1、一个html页面只能有一个Viewport

2、viewport常用border布局：用region的north、south、west、east

3、可以一起使用html布局和viewport布局，注意contentEl的使用

4、效果：



5、代码、

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>08.layout</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="localXHR.js"></script>
<script type="text/javascript">
Ext.onReady(function(){

// 表格配置开始
//......

var grid = new Ext.grid.GridPanel({
store: store,
columns: columns,
title: 'center-north',
region: 'north'
});
// 表格配置结束

// 树形配置开始
var tree = new Ext.tree.TreePanel({
store: store,
title: 'west',
region: 'west',
split: true,
border: true,
collapsible: true,
width: 120,
minSize: 80,
maxSize: 200
});
// 树形配置结束

// 表单配置开始
var form = new Ext.form.FormPanel({
defaultType: 'textfield',
labelAlign: 'right',
title: 'form',
labelWidth: 50,
frame:true,
width: 220,

title: 'center-center',
region: 'center',

items: [{
fieldLabel: '文本框',
anchor: '90%'
}],
buttons: [{
text: '按钮'
}]
});
// 表单配置结束

// 布局开始
var viewport = new Ext.Viewport({
layout:'border',
items:[{
region: 'north',
contentEl: 'north-div',
height: 80,
bodyStyle: 'background-color:#BBCCEE;'
},{
region: 'south',
contentEl: 'south-div',
height: 20,
bodyStyle: 'background-color:#BBCCEE;'
},tree,{
region: 'center',
split: true,
border: true,
layout: 'border',
items: [grid,form]
}]
});
// 布局结束

});
</script>
</head>
<body>
<script type="text/javascript" src="../../examples/shared/examples.js"></script>
<div id="north-div">标题栏：viewport加panel实现复杂布局</div>
<div id="south-div">状态栏：Copyright by www.mossle.com</div>
</body>
</html>


Done！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航