第二章 弹出窗体

上节学习了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入门学习系列(二)弹出窗体的更多相关文章

  1. Ext入门学习系列(三)复杂自定义窗体

    通过前2节的学习,基本掌握了Ext的语法和运行原理,可以作出一些简单的应用.本节我们一起来完成复杂点的对话框操作,因为在实际项目中经常要用到确认对话框等多种操作,然后根据客户的选择作出不同的响应. 一 ...

  2. Ext入门学习系列(四)面板控件

    第四章 使用面板 上节学习了Ext复杂对话框,更进一步了解了Ext的运行机制.本章重点来了解Ext所有控件的基础——面板控件. 一.Ext的面板是什么? 同样先来看看几个效果: 基本面板,点击右上角小 ...

  3. Ext入门学习系列(五)表格控件(3)

    上节学习了Ext中如何绑定服务器端传递的数据.分别用asp.net和asp.net MVC.PHP.XML为例.本节主要介绍绑定之后的分页功能. 一.Ext的表格控件如何绑定? 分页是Ext自带的一个 ...

  4. Ext入门学习系列(五)表格控件(2)

    上节学习了Ext中表格控件,从创建,到定义数据源.绑定显示,大体明白了一个基本的表格控件是怎么实现的.而我们用表格控件多用于从各种数据源接收数据并显示出来,并不是写死的.本章我们就不同数据源的不同实现 ...

  5. Ext入门学习系列(五)表格控件(1)

    上节学习了Ext面板控件,为后面的各个控件学习奠定基础,在此基础上本章将学习网络开发最期待的功能——表格控件. 我们都知道网络编程语言中,除了.net其他的基本没有提供网格控件,而最近的asp.net ...

  6. RabbitMQ入门学习系列(二),单生产者消费者

    友情提示 我对我的文章负责,发现好多网上的文章 没有实践,都发出来的,让人走很多弯路,如果你在我的文章中遇到无法实现,或者无法走通的问题.可以直接在公众号<爱码农爱生活 >留言.必定会再次 ...

  7. Bootstrap3.0入门学习系列

    Bootstrap3.0入门学习系列规划[持续更新]   前言 首先在此多谢博友们在前几篇博文当中给与的支持和鼓励,以及在回复中提出的问题.意见和看法. 在此先声明一下,之前在下小菜所有的随笔文章中, ...

  8. Asp.Net MVC5入门学习系列⑦

    原文:Asp.Net MVC5入门学习系列⑦ 接着上篇结尾所说,如果开发中刚才遇到Model需要添加或者减少字段/属性的话,但是刚好你也利用EF的Code frist通过Model生存的数据库,这时改 ...

  9. scrapy爬虫学习系列二:scrapy简单爬虫样例学习

    系列文章列表: scrapy爬虫学习系列一:scrapy爬虫环境的准备:      http://www.cnblogs.com/zhaojiedi1992/p/zhaojiedi_python_00 ...

随机推荐

  1. 回车,根据编码获取相应记录,然后再将这录绑定到AutoList

    问题描述: 回车后,根据编码获取相应记录,然后再将这录绑定到AutoList(我们自定义控件,其实就是下拉列表),回车事件是用jquery ajax实现,这样在后台给AutoList绑定数据源,如果不 ...

  2. C语言基础(转载自大海笔记)

    # C语言基础2015年03月26日10:04:411.    语言排行榜C——java——objective-C2.    进制:进制:进位机制.用普通的话讲,应该为人为的定义一种度量来标识一样东西 ...

  3. (转载)Unity3d摄像机Camera参数详解

    1. Clear Flags:清除标记.决定屏幕的哪部分将被清除.一般用户使用对台摄像机来描绘不同游戏对象的情况,有3中模式选择: Skybox:天空盒.默认模式.在屏幕中的空白部分将显示当前摄像机的 ...

  4. 原生JS的对象常用操作总结

       前端时间写了篇怎么判断js对象相等的文章,一直在期待大神给点消息,无奈一直杳无音讯,还是自己写个函数来进行判断,下面总结一些常用的对象操作的方法.    咋们来个先抑后扬的方式,先放出几个基本的 ...

  5. [原创] zabbix学习之旅一:源码安装

    zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案.zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系统管理员快速定位/解决存 ...

  6. 1020: [SHOI2008]安全的航线flight - BZOJ

    Description在设计航线的时候,安全是一个很重要的问题.首先,最重要的是应采取一切措施确保飞行不会发生任何事故,但同时也需要做好最坏的打算,一旦事故发生,就要确保乘客有尽量高的生还几率.当飞机 ...

  7. PAT-乙级-1044. 火星数字(20)

    1044. 火星数字(20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 火星人是以13进制计数的: 地球人的 ...

  8. GameAdmin

    username:root e-mail :123@qq.com password:123

  9. 跨平台Unicode与UTF8互转代码

    参考来源:http://blog.csdn.net/flying8127/article/details/1598521 在原来原基础上,将代码整理,并加强安全性. 并按照WindowsAPI设计, ...

  10. hdu 4336 Card Collector 容斥原理

    读完题目就知道要使用容斥原理做! 下面用的是二进制实现的容斥原理,详见:http://www.cnblogs.com/xin-hua/p/3213050.html 代码如下: #include< ...