Ext 面板(Panel)

蒋永宁
2023-12-01
<!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>

 

转载于:https://www.cnblogs.com/hpx2020/p/10782602.html

 类似资料: