Ext入门学习系列（二）弹出窗体
第二章 弹出窗体
上节学习了Ext的环境搭建和最基本的一个操作——弹出对话框，作为一个引子，本节讲述如何弹出一个新窗体，从实例讲解Ext的基本运行原理。
一、Ext的窗体长什么样？
先来看看几个效果，相信随着学习的深入，大家会被Ext的绚丽所征服。下面就是Ext弹出的几个基本窗体：
我们可以发现弹出的2个窗体比我们传统的网页漂亮多了，同时更有价值的是还能随意切换风格。那么类似于这种窗体到底是怎么弹出的呢？
二、Ext弹出窗体思路
在环境搭建正确的情况下，页面中引入也正确，就可以按照以下思路进行编写代码：
第一步：先搭建基本代码架子，如
<script type="text/javascript">
function start(){
//这里写具体代码
}
Ext.onReady(start);//入口函数
</script>
第二步：new对象，同时传入相应的参数。常见的参数有标题(title)，高(height)，宽(width)，内容(html)等。这些参数全部用花括弧括起来，各个参数中间用英文逗号隔开。参考代码如下：
var win = new Ext.Window();
之后在构造函数中传入参数：
var win = new Ext.Window({ title: "测试标题", height: 300, width: 500, html: "<h1>测试内容</h1>" });
说明：其中html 属性是可以写和解析html标签的，可以在里面修饰字体等。
最后，让这个窗体对象显示出来，调用他的show()方法：
win.show();
然后，运行网页，得到的效果如下：
，这个窗体默认是可以拖动的，拖动默认效果是有阴影和背景变色功能的。本例完整代码下如：
<HTML>
<HEAD>
<TITLE>弹出窗体</TITLE>
<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />
<script type="text/javascript" src="Ext/ext-base.js"></script>
<script type="text/javascript" src="Ext/ext-all.js"></script>
<script type="text/javascript" src="Ext/ext-lang-zh_CN.js" charset="utf-8"></script>
</HEAD>
<script type="text/javascript">
function start(){
var win = new Ext.Window({ title: "测试标题", height: 300, width: 500, html: "<h1>测试内容</h1>" });
win.show();
}
Ext.onReady(start);//程序入口
</script>
<BODY>
</BODY>
</HTML>
三、总结：
WINDOW对象是一种特殊的面板,专用于程序中的"视窗"（window）。Windows默认下是 可拖动的、浮动的，并提供若干特定的行为如：最大化、复原、事件。还有很多其他的属性和事件，本章暂时不做详述，由于课程刚刚开始，后面会提供API文档，大家使用到了可以参考，实现功能更加强大的弹出窗体。
本章代码下载
Ext入门学习系列（二）弹出窗体的更多相关文章
- Ext入门学习系列（三）复杂自定义窗体
通过前2节的学习,基本掌握了Ext的语法和运行原理,可以作出一些简单的应用.本节我们一起来完成复杂点的对话框操作,因为在实际项目中经常要用到确认对话框等多种操作,然后根据客户的选择作出不同的响应. 一 ...
- Ext入门学习系列（四）面板控件
第四章 使用面板 上节学习了Ext复杂对话框,更进一步了解了Ext的运行机制.本章重点来了解Ext所有控件的基础——面板控件. 一.Ext的面板是什么? 同样先来看看几个效果: 基本面板,点击右上角小 ...
- Ext入门学习系列（五）表格控件（3）
上节学习了Ext中如何绑定服务器端传递的数据.分别用asp.net和asp.net MVC.PHP.XML为例.本节主要介绍绑定之后的分页功能. 一.Ext的表格控件如何绑定? 分页是Ext自带的一个 ...
- Ext入门学习系列（五）表格控件（2）
上节学习了Ext中表格控件,从创建,到定义数据源.绑定显示,大体明白了一个基本的表格控件是怎么实现的.而我们用表格控件多用于从各种数据源接收数据并显示出来,并不是写死的.本章我们就不同数据源的不同实现 ...
- Ext入门学习系列（五）表格控件（1）
上节学习了Ext面板控件,为后面的各个控件学习奠定基础,在此基础上本章将学习网络开发最期待的功能——表格控件. 我们都知道网络编程语言中,除了.net其他的基本没有提供网格控件,而最近的asp.net ...
- RabbitMQ入门学习系列(二)，单生产者消费者
友情提示 我对我的文章负责,发现好多网上的文章 没有实践,都发出来的,让人走很多弯路,如果你在我的文章中遇到无法实现,或者无法走通的问题.可以直接在公众号<爱码农爱生活 >留言.必定会再次 ...
- Bootstrap3.0入门学习系列
Bootstrap3.0入门学习系列规划[持续更新] 前言 首先在此多谢博友们在前几篇博文当中给与的支持和鼓励,以及在回复中提出的问题.意见和看法. 在此先声明一下,之前在下小菜所有的随笔文章中, ...
- Asp.Net MVC5入门学习系列⑦
原文:Asp.Net MVC5入门学习系列⑦ 接着上篇结尾所说,如果开发中刚才遇到Model需要添加或者减少字段/属性的话,但是刚好你也利用EF的Code frist通过Model生存的数据库,这时改 ...
- scrapy爬虫学习系列二：scrapy简单爬虫样例学习
系列文章列表: scrapy爬虫学习系列一:scrapy爬虫环境的准备: http://www.cnblogs.com/zhaojiedi1992/p/zhaojiedi_python_00 ...
随机推荐
- 传统ASP.NET开发和MVC的设计思想
传统ASP.NET开发 第一步:客户端请求服务器: 第二步:服务器从数据库取得数据处理后响应给客户端页面. MVC的设计思想 第一步:客户端请求控制器(里面的一个方法): 第二步:控制器从数据库里取得 ...
- easy ui 异步上传文件，跨域
easy ui 跨域上传文件,代码如下: 1.html代码:(这段代码是个win窗体,我在点击上传图片按钮然后弹出一个上传图片的窗体,选择图片再进行上传,这样在form提交时,提交的参数会少一点.) ...
- 微软Hololens学院教程-Hologram 230-空间场景建模（Spatial mapping ）【微软教程已经更新，本文是老版本】
这是老版本的教程,为了不耽误大家的时间,请直接看原文,本文仅供参考哦!原文链接:https://developer.microsoft.com/EN-US/WINDOWS/HOLOGRAPHIC/ho ...
- vncserver 添加用户
1.在vncserver设置登录用户的信息 #vi /etc/sysconfig/vncservers VNCSERVERS="1:root 2:wt" 此处添加用户 ...
- 【数学】[BZOJ 3884] 上帝与集合的正确用法
Description 根据一些书上的记载,上帝的一次失败的创世经历是这样的: 第一天, 上帝创造了一个世界的基本元素,称做“元”. 第二天, 上帝创造了一个新的元素,称作“α”.“α”被定义为“元” ...
- sql删除wordpress没用的postmeta记录
支持多作者的wordpress博客,有时需要审核他们的文章内容,虽然UGC(User-generated content)整体是好的,但是也要控制一下质量,实在不相关或spam的文章就要毫不手软的删除 ...
- 在线学习SQL语句？没问题~~
以前弄得少,没注意.. http://sqlfiddle.com/ CREATE TABLE Presidents ( Id INT UNSIGNED NOT NULL AUTO_INCREMENT, ...
- POJ3282+模拟
模拟题 /* 模拟 注意:相同一边的车有先后顺序! */ #include<stdio.h> #include<string.h> #include<stdlib.h&g ...
- codeforces #313 div1 C
同BZOJ 3782 上学路线 QAQ 还比那个简单一点 把坐标(1,1)-(n,m)平移成(0,0)-(n-1,m-1) 设dp[i]表示从(1,1)出发第一次经过障碍且到达第i个障碍的方案数 首先 ...
- HeadFirst设计模式之RMI介绍
一.使用步骤 1.generate stubs and skeletons:Run rmic on the remote implementation class 如:D:\Workspaces\My ...