<!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. Django中object.all是什么东西

    前言 先抛出一个问题.银行就相当于一个数据库,你去银行取钱存钱办卡销卡,是你告诉银行柜员方便还是你自己去操作电脑办卡取卡方便?(你还不一定会,假设自动存款机还没发明),object在数据库中就相当于银 ...

  2. tomcat7以下线程控制

    web server允许的最大线程连接数还受制于操作系统的内核参数设置,通常Windows是2000个左右,Linux是1000个左右. 1.编辑tomcat安装目录下的conf目录下的server. ...

  3. Emgucv图像处理工具

    此工具是当年自己在学习Emgucv的时候,慢慢积累的,包含了常用的图像处理算法,非常适合新人学习,现放出源码,由于是以前做的,功能不全. 当时Emgucv的学习资料非常之少,没有一本书是讲Emgucv ...

  4. leetcode上的一些栈、队列问题

    20-有效的括号 思路:主要考察栈的一些基本操作,像push()(将数据压入栈顶).top()(取栈顶的数据但不删除).pop()(直接删除栈顶的元素).empty()(判断栈是否为空).这题就是先把 ...

  5. java集合框架面试要点整理

  6. #define学习

    C语言中数据有常量和变量,其中定义常量主要有两种方法,这里主要学习#define定义常量的方法. 1.#define定义数字宏常量 例子如下: 1 2 3 4 5 6 7 8 9 10 #includ ...

  7. git操作的日常用法

    参考博客:  https://blog.csdn.net/afei__/article/details/51567155# 最近一段时间总结一些git在个人日常开发当中用到的方法, 并记录下来, 同时 ...

  8. 简单了解Redis

    redis是什么 redis是一种支持key-value等多种数据结构的存储系统,可用于缓存,事件发布,消息队列等场景,支持多种数据类型 string.hash.list.set.zset.而且基于内 ...

  9. 在已有QT项目中添加多个UI布局界面

    1.在工程中右键->添加新文件,按图选择 2.选择窗口部件 3.创建UI控制类 注意上图红框中命名按实际需要定义,否则后期改动要修改UI文件参数 4.修改UI文件,框1是窗口部件父类,框2是UI ...

  10. Selenium3 + Python3自动化测试系列十二——窗口截图与关闭浏览器

    窗口截图 自动化用例是由程序去执行的,因此有时候打印的错误信息并不十分明确.如果在脚本执行出错的时候能对当前窗口截图保存,那么通过图片就可以非常直观地看出出错的原因.WebDriver提供了截图函数g ...