Ext入门学习系列(二)弹出窗体
第二章 弹出窗体
上节学习了Ext的环境搭建和最基本的一个操作——弹出对话框,作为一个引子,本节讲述如何弹出一个新窗体,从实例讲解Ext的基本运行原理。
一、Ext的窗体长什么样?
先来看看几个效果,相信随着学习的深入,大家会被Ext的绚丽所征服。下面就是Ext弹出的几个基本窗体:
我们可以发现弹出的2个窗体比我们传统的网页漂亮多了,同时更有价值的是还能随意切换风格。那么类似于这种窗体到底是怎么弹出的呢?
二、Ext弹出窗体思路
在环境搭建正确的情况下,页面中引入也正确,就可以按照以下思路进行编写代码:
第一步:先搭建基本代码架子,如
function start(){
//这里写具体代码
}
Ext.onReady(start);//入口函数
</script>
第二步:new对象,同时传入相应的参数。常见的参数有标题(title),高(height),宽(width),内容(html)等。这些参数全部用花括弧括起来,各个参数中间用英文逗号隔开。参考代码如下:
之后在构造函数中传入参数:
说明:其中html 属性是可以写和解析html标签的,可以在里面修饰字体等。
最后,让这个窗体对象显示出来,调用他的show()方法:
然后,运行网页,得到的效果如下:
,这个窗体默认是可以拖动的,拖动默认效果是有阴影和背景变色功能的。本例完整代码下如:
<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入门学习系列(二)弹出窗体相关推荐
- RabbitMQ入门学习系列(二),单生产者消费者
友情提示 我对我的文章负责,发现好多网上的文章 没有实践,都发出来的,让人走很多弯路,如果你在我的文章中遇到无法实现,或者无法走通的问题.可以直接在公众号<爱码农爱生活 >留言.必定会再次 ...
- HFSS入门学习(二)
HFSS入门学习(二) 本文是在前一篇文章:HFSS入门学习(一)链接:https://blog.csdn.net/and_future/article/details/108930315 的基础之上 ...
- Asp.Net MVC5入门学习系列⑤
Asp.Net MVC5入门学习系列⑤ 原文:Asp.Net MVC5入门学习系列⑤ 检查VS生产的编辑方法和编辑窗体 前面我们一步使用强类型,然后创建Controller(控制器)的时候,VS默认已 ...
- Asp.Net MVC5入门学习系列⑥
Asp.Net MVC5入门学习系列⑥ 原文:Asp.Net MVC5入门学习系列⑥ 接着上次的篇幅,我们这篇手动来写一个查询的流程代码! 搜索/查询 流程功能的实现 那现在要做搜索(查询)功能我们第 ...
- android 原生开发 3d地图 下载_arcgis api 3.x for js 入门开发系列二不同地图服务展示(附源码下载)...
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- android 初学者实现 popupwindow的自动弹出,Android popupWindow弹出窗体实现方法分析
本文实例讲述了Android popupWindow弹出窗体实现方法.分享给大家供大家参考,具体如下: 1. 建立popupwindow显示的布局页面(普通的view任意布局) android:lay ...
- 图机器学习(GML)图神经网络(GNN)原理和代码实现(前置学习系列二)
图机器学习(GML)&图神经网络(GNN)原理和代码实现(PGL)[前置学习系列二] 上一个项目对图相关基础知识进行了详细讲述,下面进图GML networkx :NetworkX 是一个 P ...
- Linux学习系列二:Linux中的常用命令
这个系列的Linux教程主要参考刘遄老师的<Linux就该这么学>.用的系统是RHEL8,如果遇见一些命令出现问题,请首先检查自己的系统是否一致,如果不一致,可网上查一下系统间某些命令之间 ...
- ajax入门学习(二)小案例Demo1
(尊重劳动成果,转载请注明出处:http://blog.csdn.net/qq_25827845/article/details/55823800冷血之心的博客) ajax入门学习(一) ajax入门 ...
最新文章
- visual studio code 里调试运行 Python代码
- 五种计算机编程语言注定要衰落,牛逼的你怎么看呢???
- openssl lhash 数据结构哈希表
- ScrollView如何判断滑动到底部以及getHeight()方法与getMeasuredHeight()方法的一些理解
- html网页显示时中文乱码
- 【C/C++】使用PDFLIB创建一个带中文的pdf文件
- oracle静默安装集群,Oracle RAC 静默安装实践
- 无需软件,笔记本自带wifi功能,几条命令轻松搞定
- foxmail邮件服务器端口,Foxmail设置教程
- java 封包_封包和解包简介
- java-assured_rest-assured之获取响应数据(Getting Response Data)
- 【回眸】有显示器如何设置串口登录树莓派4B
- Java 调用阿里云小蜜示例代码
- VB全局HOOK写游戏盗号木马
- pwn题堆利用的一些姿势 -- IO_FILE
- 银行客户画像搭建与应用
- ecshop smarty php,ecshop的smarty基础普及知识
- 文献阅读:SimCSE:Simple Contrastive Learning of Sentence Embeddings
- GSMA MWC19巴塞罗那圆满落下帷幕
- LaTeX插图命令使用教程(简单例子+清晰代码)(论文排版)