Ext 面板（Panel）

<!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>
猜你喜欢
