<!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. 在Delphi中使用系统对应文件类型的图标

    在应用程序的编写中,组合框(ComboBox).列表框(ListBox).等常见的部件,通常不仅要用于显示文字,而且还要显示其与文字相关的图标.在一般的Windows应用程序中,这些图标的显示都要随列 ...

  2. LG1017 进制转换：负数进制

    题目描述 我们可以用这样的方式来表示一个十进制数: 将每个阿拉伯数字乘以一个以该数字所处位置的(值减1)为指数,以10为底数的幂之和的形式.例如:123可表示为 1×102+2×101+3×1001\ ...

  3. PHP基础知识总结（五） php面试题

    1.Ajax跨域 json:数据交换格式,{"name":"wangtianle"} jsonp:非官方跨域数据交换协议,可以通过动态添加<script/ ...

  4. activemq学习总结 （转）Java消息队列--ActiveMq 实战

    转:https://www.cnblogs.com/jaycekon/p/6225058.html 感谢作者 ActiveMQ官网下载地址:http://activemq.apache.org/dow ...

  5. Losing session data in ASP.NET

    Losing session data in ASP.NET By default Response.Redirect terminates thread execution and there mi ...

  6. thinkphp 连接postgresql

    PHP连接: php.ini中将extension=php_pgsql.dll前面的分号去掉extension=php_pdo_pgsql.dll前面的分号去掉,然后设置extension_dir指向 ...

  7. 93、R语言教程详解

    加载数据 > w<-read.table("test.prn",header = T) > w X.. X...1 1 A 2 2 B 3 3 C 5 4 D 5 ...

  8. ng-repeat高级用法

    ng-repeat高级用法: 遍历数组: <li ng-repeat="item in array">{{item}}</li> 遍历对象: key:对象的 ...

  9. STL中六大组件

    1)容器(Container),是一种数据结构,如list,vector,和deques ,以模板类的方法提供.为了访问容器中的数据,可以使用由容器类输出的迭代器: 容器(container)用于存放 ...

  10. 修改maven包本地默认位置

    前言 这段时间上岸了,就有时间整理电脑的资料(强迫症重度患者),就向maven以及gradle的仓库位置动手了. 目的 改变maven的默认位置 步骤 修改maven的配置文件setting.xml( ...