<!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. printf 输出格式设置\033[47\033[5m 与-8.8s

    摘要:在使用linux终端命令的时候,我们可以看到像more命令,它的显示方式与一般的字符串不同,是用了反显.同样,linux C下printf还有很多其他不常见的格式化输出形式.本文主要为你盘点这些 ...

  2. <Jmeter入门不放弃>之<1.认识jmeter>

    大家这里参考学习的时候,我就不在这里配截图了,因为需要你打开工具根据文档自己去找,,才有印象,大家一定要启动JMeter! 一.Jmeter是什么 由 Apache 组织开发,基于JAVA压力测试工具 ...

  3. Delphi直接读取XmL

    有时,只需要用XML作一些小的应用,比如只是简单地保存日志或者一些配置,这时我们只需要直接读写XML就好,效率第一. Delphi盒子有一个直接读写XML文件 (例子和代码),其核心函数为下面两个函数 ...

  4. AcWing 230. 排列计数 水题（组合数+错排）打卡

    题目:https://www.acwing.com/problem/content/232/ #include<bits/stdc++.h> #define ll long long #d ...

  5. python字符串比较大小

    zfill函数 xs = ['] print (sorted(xs))

  6. SQL Server2012创建连接服务器到ORACLE11G

    做ETL,肯定少不了经常会从不同的数据库直接进行数据的操作,为了更好的进行跨库操作,SQL SERVER 2012拥有LinkedServer功能.前段时间写了个SQL SERVER同种数据库直接的链 ...

  7. Codeforces 578B "Or" Game (前缀和 + 贪心)

    Codeforces Round #320 (Div. 1) [Bayan Thanks-Round] 题目链接:B. "Or" Game You are given \(n\) ...

  8. vue实现轮播效果

    vue实现轮播效果 效果如下:(不好意思,图有点大:) 功能:点击左侧图片,右侧出现相应的图片:同时左侧边框变颜色. 代码如下:(也可以直接下载文件) <!DOCTYPE html> &l ...

  9. 2019秋季学期第2周Java学习总结

    本周在第一周接触认识Java后对该编程语言有了进一步了解,明白了Java的类型:包括Application程序,Applet程序.知道了一个Java程序的关键字(public class).主方法(p ...

  10. Android/IOS APP界面设计之尺寸规范

    1.尺寸以及分辨率 iPhone的界面尺寸不用多说,640*960是基本OK的,也可以是适应5S的640*1136,马上iPhone 6也快来了(随便吐槽一下网上曝的真机谍照,真是丑到离谱...),只 ...