<!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', 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时，且返程交通压力要高于出程。 ' + ' ' + '具体来看，5月1日出程方向，全国高速易拥堵路段为G78汕昆高速昆明段（龙升服务区-马郎收费站），全天拥堵延时指数7.9，平均车速仅为每小时11千米，其次是G20青银高速滨州、济南段（岱溪河大桥-绣江河大桥），G15沈海高速深圳段（排榜立交-惠盐荷坳收费站北3千米）等。 ' + ' ' + '5月4日返程，全国高速易拥堵缓行路段为G40沪陕高速上海段（北横引河桥-上海长江隧道），其次是G4W广澳高速中山、广州段（十顷沥桥-坦尾互通），G15沈海高速深圳段（坑梓收费站-水荷立交）。', renderTo : 'e' }) }) </script> </body> </html>