<!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. cookie的使用说明

    cookie的英文意思是饼干的意思,实质上是键值对组成的字典.就是说你访问某一个网址,服务器给你一个东西,你收到东西,并且贴上了一个标签.下次你访问服务器的时候,请求带有标签.这样服务器给你之后,就会 ...

  2. linux c（一）Helloworld

    终端的屏幕上输入命令如下: 使用vi helloworld.c打开helloworld.c文件,写下如下代码:

  3. 2018icpc南京/gym101981 A Adrien and Austin 博弈

    题意: n个连续排列的石子,每次只许拿连续的(中间没有空格)的k个,问你谁必胜 题解: 简单博弈,特判总数为0,k=1两种情况,其他情况先拿必胜,方法是拿掉中间的,然后对方怎么拿你镜面拿就行. #in ...

  4. ASP.NET Core学习——7

    多环境ASP.NET Core介绍了支持在多种环境中管理应用程序行为的改进,如开发(devlopment),预演(staging)和生成(production).环境变量用来指示应用程序正在运行的环境 ...

  5. HTML5: HTML5 内联 SVG

    ylbtech-HTML5: HTML5 内联 SVG 1.返回顶部 1. HTML5 内联 SVG HTML5 支持内联 SVG. 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Ve ...

  6. (61)C# 可枚举类型和迭代器

    一.可枚举类型 枚举器-Enumerator  是一个只读且只能在值序列向前移动的游标 枚举器需要实现下列接口之一 System.Collections.IEnumerator System.Coll ...

  7. PHP的安装配置

    一.安装 PHP的安装可以很简单的使用yum命令进行安装. #添加php7.0源(这是centos7的命令,centos6.5的命令不同,不要照搬)rpm -Uvh https://dl.fedora ...

  8. cesium清除选定事件

    cesium清除选定事件 此处的案例不一定适合你的项目,但可以给你一个思路.清除选定,就是还原你选中之前的状态.比如你点击一个面高亮,面的颜色发生改变:并且会弹出一个divPoint框.此时的清除选定 ...

  9. zoom:1总结

    zoom:1确实帮我们解决了不少ie下的bug,但是它的来龙去脉,又有多少人知道呢? 所以我老生常谈,说一下它的来龙去脉. Zoom属性是IE浏览器的专有属性, 它可以设置或检索对象的缩放比例.先来一 ...

  10. CSS 中的各种居中 (水平、垂直)

    导读: CSS 的居中有水平居中和垂直居中,这两种居中又分为行内元素居中和块级元素居中.根据父.子元素的高度是否清楚,又会使得不同的居中用不同方法.本文就其中一些情况做下简单说明,以作笔记之用,仅供大 ...