<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第十三章：Ext 面板（Panel）</title>
<link rel="stylesheet" href="src/ext/resources/css/ext-all.css">
<!--ext-base 必须在ext-all之前引入-->
<script src="src/ext/ext-base.js"></script>
<script src="src/ext/ext-all.js"></script>
<!--<script src="src/ext/ext-lang-zh_CN.js"></script>-->
<style>
</style>
</head>
<body>
<div id="e">
</div>
<script>
Ext.onReady(function () {
var toolBarl = new Ext.Toolbar({
buttons : [{
text : '新建',
// handler 按钮事件
handler : function () {
Ext.Msg.alert('新建','新建操作演示')
}
},{
xtype :'tbseparator'
},{
text : '打开'
},{
text : '保存'
}]
})
// 分割线
var toolBar2 = new Ext.Toolbar({
buttons : [{
text: '上一步',
icon: 'src/ext/resources/images/default/dd/drop-add.gif',
cls : 'x-btn-text-icon'
},{
text : '下一步',
icon: 'src/ext/resources/images/default/dd/drop-yes.gif',
cls : 'x-btn-text-icon'
},'-',{
text : '退出'
}]
})
var panel2 = new Ext.Panel({
title : '最简单的Panel',
width: 400,
titleCollapse : false, // 表示是否收缩
collapsible : true,
cls : 'wo',
tbar : toolBarl,
bbar : toolBar2,
// tools 标题栏按钮
tools : [{
id : 'refresh',
/*
* handler event代表事件，toolEl工具元素，p代表面板
* */
handler : function (event, toolEl, p) {
p.getUpdater().update({
url:'section3.html',
scripts : true
})
}
},{
id : 'up',
handler : function (event, toolEl, p) {
p.collapse(true)
}
},{
id : 'down',
handler : function (event, toolEl, p) {
console.log(p)
}
},{
id : 'help',
handler : function (event, toolEl, p) {
Ext.Msg.alert('关于','本软件系椰子软件工作室出品')
}
},{
id : 'close',
handler : function (event, toolEl, p) {
p.hide()
}
}],
html: '《报告》预计，五一期间全国高速出程高峰时段为5月1日9时-12时，峰值出现在10时-11时。返程高峰时段是4日14时-20时，车流量最大的时段预计出现在16时-17时，且返程交通压力要高于出程。\n' +
'\n' +
'具体来看，5月1日出程方向，全国高速易拥堵路段为G78汕昆高速昆明段（龙升服务区-马郎收费站），全天拥堵延时指数7.9，平均车速仅为每小时11千米，其次是G20青银高速滨州、济南段（岱溪河大桥-绣江河大桥），G15沈海高速深圳段（排榜立交-惠盐荷坳收费站北3千米）等。\n' +
'\n' +
'5月4日返程，全国高速易拥堵缓行路段为G40沪陕高速上海段（北横引河桥-上海长江隧道），其次是G4W广澳高速中山、广州段（十顷沥桥-坦尾互通），G15沈海高速深圳段（坑梓收费站-水荷立交）。',
renderTo : 'e'
})
})
</script>
</body>
</html>
