<!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. OC学习篇之---@class关键字的作用以及#include和#import的区别

    前一篇文章说到了OC中类的三大特性:http://blog.csdn.net/jiangwei0910410003/article/details/41707161今天我们来看一下在学习OC的过程中遇 ...

  2. Jetson Nano系列教程1:烧写系统镜像

    下载镜像 NVIDIA官方为Jetson Nano Developer Kit (后面统称为Jetson Nano了)提供了SD卡版本的系统镜像,并且根据JetPack版本不断得在更新.所以你可以直接 ...

  3. 再次安装双linux系统及kali的grub修复!

    打算下学期不带笔记本,平时编程上网本就够了,也就看看一般的算法,于是那上网本装centos7和kali,上网本是APU,但是这两个版本的linux都支持的不错. 先安装centos,由于熟悉了linu ...

  4. linux删除指定文件夹中某个文件除外的其他文件

    # shopt -s extglob # rm -fr !(file1) 如果是多个要排除的,可以这样: # rm -rf !(file1|file2) 首先科普下shopt -s extglob B ...

  5. JavaScript 获取时间,时间戳

    一. 动态获取js时间 1.方法一:最简单的写法,直接输出时间到页面 <!DOCTYPE html> <html> <head> <title>< ...

  6. 52、saleforce 第一篇

    View the Schema 1.点击setup 2.在QuickFind and Search中输入Schema Builder 先点击clear all 去除所有现实的UML,然后选择Line_ ...

  7. ES6 基础内容介绍

    参考博客: https://www.cnblogs.com/libin-1/p/6716470.html 一.新的变量声明方式 let/const 与var不同,新的变量声明方式带来了一些不一样的特性 ...

  8. 把数字翻译成字符串 --剑指offer 46题

    # 给一个字符串,按如下规则把它翻译成字符串:1翻译成a,2翻译成b,...25翻译成z:一个数可以有多种翻译方式,比如122可以翻译成abb和kb还可以翻译成aw即3种翻译方式.计算一个数字有几种翻 ...

  9. MVC,MVP 和 MVVM 的图示(转载)

    MVC,MVP 和 MVVM 的图示   作者: 阮一峰 日期: 2015年2月 1日 复杂的软件必须有清晰合理的架构,否则无法开发和维护. MVC(Model-View-Controller)是最常 ...

  10. Anjular的ng-repeat

    Anjular的ng-repeat不会循环一个二维集合中的一维集合.举个例子:集合 list=  {1,2,{0,1,2},23,222},small={0,1,2},使用ng-repeat" ...