ext之border布局三


<html>

<head>

<title></title>
<link rel="stylesheet" type="text/css" href="../../ext-2.2/resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-2.2/ext-all-debug.js"></script>

<script>
Ext.onReady(function(){
//表格
var myData = [['张三', '测试', '2006-1-1'], ['李四', '测试一', '2006-5-6'], ['王五', '测试二', '2007-12-1'], ['刘六', '测试三', '2006-12-1'], ['张三', '测试四', '2007-6-1'], ['李四', '测试五', '2007-7-1'], ['刘六', '测试六', '2007-8-1'], ['张三', '测试七', '2007-9-1'], ['李四', '测试八', '2007-10-1'], ['王五', '测试九', '2007-11-1'], ['刘六', '测试六', '2007-8-1'], ['张三', '测试七', '2007-9-1'], ['李四', '测试八', '2007-10-1'], ['王五', '测试九', '2007-11-1'], ['刘六', '测试十', '2007-8-1'], ['张三', '测试十一', '2007-9-1'], ['李四', '测试十二', '2007-10-1'], ['王五', '测试十三', '2007-11-1'], ['刘六', '测试十四', '2007-8-1'], ['张三', '测试十五', '2007-9-1'], ['李四', '测试十六', '2007-10-1'], ['王五', '测试十七', '2007-11-1'], ['刘六', '测试十八', '2007-8-1']];


var ds = new Ext.data.Store({

proxy: new Ext.data.MemoryProxy(myData),

reader: new Ext.data.ArrayReader({}, [{
name: 'sender'
}, {
name: 'title'
}, {
name: 'sendtime'
}])

});

ds.load();


var colModel = new Ext.grid.ColumnModel([{
header: '发送人',
width: 100,
sortable: true,
dataIndex: 'sender'
}, {
id: 'title',
header: '标题',
width: 100,
sortable: true,
dataIndex: 'title'
}, {
header: '发送时间',
width: 75,
sortable: true,
dataIndex: 'sendtime'
}]);


//北
var north_item = new Ext.Panel({
title: '北north',
region: 'north',
contentEl: 'north-div',
split: true,
border: true,
collapsible: true,
height: 50,
minSize: 50,
maxSize: 120
});

//
var south_item = new Ext.Panel({
title: 'south',
region: 'south',
contentEl: 'south-div',
split: true,
border: true,
collapsible: true,
height: 50,
minSize: 50,
maxSize: 120
});

//
var west_item = new Ext.Panel({

title: 'west',
region: 'west',
contentEl: 'west-div',
split: true,
border: true,
collapsible: true,
width: 120,
minSize: 120,
maxSize: 200


});

//中间的中间,表格
var grid_item = new Ext.grid.GridPanel({

region: 'west',

el: 'center-center',

title: '条目列表',

ds: ds,

cm: colModel,

autoScroll: true,
split: true,

collapsible: true,

titlebar: true,

height: 200,
width: 200,
minSize: 100,

maxSize: 400


});


//中间的南边
var center_south_item = new Ext.Panel({


region: 'center',

contentEl: 'center-south',

title: '内容标题',

split: true,

collapsible: true,

titlebar: true,


collapsedTitle: '内容'

});
//中间
var center_item = new Ext.Panel({

region: 'center',

layout: 'border',

items: [grid_item, center_south_item]


});
//
new Ext.Viewport({

layout: "border",

items: [north_item, south_item, west_item, center_item]

});

});
</script>
</head>

<body>
<div id="north-div">
north
</div>
<div id="south-div">
south
</div>
<div id="west-div">
west
</div>
<div id='center-center'>
</div>
<div id='center-south'>
</div>
</body>
</html>



[img]http://lym6520.iteye.com/upload/attachment/78021/c1382fb0-e3ca-3abd-ae00-c0071a9301b9.gif[/img]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值