<!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>

Ext 面板（Panel）的更多相关文章

  1. [转载]ExtJs4 笔记（10） Ext.tab.Panel 选项卡

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...

  2. 【extjs】 extjs5 Ext.grid.Panel 搜索示例

    先看效果图: 页面js: <script type="text/javascript"> /** * 日志类型 store * */ var logTypeStore ...

  3. 【extjs】 ext5 Ext.grid.Panel 分页,搜索

    带有分页,搜索的grid. <%@page language="java" contentType="text/html; charset=UTF-8" ...

  4. Ext.tree.Panel Extjs 在表格中添加树结构，并实现节点移动功能

    最近在用Extjs 做后台管理系统,真的非常好用.总结的东西分享一下. 先展示一下效果图 好了,开始吧! 首先说一下我的创建结构: 一.构造内容 这个函数中包括store的创建,treePanel的创 ...

  5. 初识Sencha Touch：面板Panel

    HTML代码: <!doctype html> <html> <head> <meta charset="utf-8"> <t ...

  6. ExtJs4 笔记（10） Ext.tab.Panel 选项卡

    本篇讲解选项卡控件. 一.基本选项卡 首先我们来定义一个基本的选项卡控件,其中每个Tab各有不同,Tab的正文内容可以有三种方式获取: 1.基本方式:通过定义html和items的方式. 2.读取其他 ...

  7. Javascript - ExtJs - Ext.form.Panel组件

    FormPanel组件(Ext.form.FormPanel) logogram:Ext.form.Panel | xtype:form Ext.form.Panel.配置 frame }//旗下所有 ...

  8. ExtJS 4 在Ext.tab.Panel中使用Ext.ux.IFrame打开url指向的网页

    ext-4.2.1.883\examples\ux\IFrame.js ext-4.2.1.883\examples\ux\TabCloseMenu.js 复制到 \Scripts\ext-4.2.1 ...

  9. ExtJs 学习之开篇（三）Ext.grid.Panel表格中的处理

    Ext.grid.Panel Ext.create('Ext.grid.Panel',{        title:'测试表格',        width:400,        height:20 ...

随机推荐

  1. 带你认识SATA、mSATA 、PCIe和M.2四种接口

    http://mst.zol.com.cn/615/6150989.html 犹记得当年Windows7系统体验指数中,那5.9分磁盘分数,在其余四项的7.9分面前,似乎已经告诉我们机械硬盘注定被时代 ...

  2. 如何在html中添加引用公共模块文件

    1.首先需要修改apache的配置文件: 打开httpd.conf 搜索“AddType text/html .shtml” 搜索结果: AddType text/html .shtml .html ...

  3. eclipse导入工程时出现大红色感叹号（转）

    转载文章:http://blog.csdn.net/xiaotaibai2008/article/details/6365334 因为也遇到了同样的问题,所以google了以下,希望对于我这个小菜鸟有 ...

  4. 2019ccpc秦皇岛/Gym102361 D - Decimal 签到

    题意: 给定n,判断1/n是否在十进制下无限循环 题解:判断n的是否包含除2,5以外的因数即可 #include<iostream> #include<cstdio> #inc ...

  5. Oracle架构实现原理、含五大进程解析(图文详解)

    目录 目录 前言 Oracle RDBMS架构图 内存结构 系统全局区SGA 高速缓存缓冲区数据库缓冲区 日志缓冲区 共享池 其他结构 进程结构 用户连接进程 用户进程User Process Ser ...

  6. angular5 清除定时器

    ngOnDestroy 在指令被销毁前,将会调用 ngOnDestory 方法.它主要用于执行一些清理操作,比如:移除事件监听.清除定时器.退订 Observable 等. 调用方法 1. impor ...

  7. 避开PCB假八层结构的温柔陷阱---浅谈六层板的叠层

    https://blog.csdn.net/qijitao/article/details/51505611 作者:王辉东   一博科技高速先生团队队员 在<PCB的筋骨皮>一文中,我们提 ...

  8. 递归中，调用forEach方法问题

    1 function traverse(objNmae,obj,url){ url = url || objNmae; if(typeof obj === "object" ){ ...

  9. Eureka 系列（02）Eureka 一致性协议

    目录 Eureka 系列(02)Eureka 一致性协议 0. Spring Cloud 系列目录 - Eureka 篇 1. 服务发现方案对比 1.1 技术选型 1.2 数据模型 2. Eureka ...

  10. SpringMVC 与axis2 的整合（服务器端）

    1,新建一个web project项目,项目的目录 如下: 2,导入需要的jar包,本例用的是axis2 1.7.3版本. 3,创建接口. package com.dsdl.hcm.webServic ...