Ext入门的第一个程序(1)
1、Ext是什么?
extjs是集UI和ajax框架与一身的,界面又好看,又有很强的ajax交互功能,适合不会做漂亮页面的程序员用的,缺点就是太大了,要导入近800KB左右的js和css文件,这对于web应用来说是一个比较大的开销
2、常见的一段代码和他们的效果
Ext.onReady(function(){Ext.Msg.alert("Title","Hi baby.");
});
Ext.onReady(function() {v = new eoms.form.Validation({form:'theform'});});
Ext.onReady(function(){ref = new Ext.LoadMask(Ext.getBody(), {msg:"正在刷新数据请稍后..." }); Ext.MessageBox.buttonText.ok = "确定";Ext.MessageBox.buttonText.cancel = "取消";var menubar = new Ext.Toolbar({cls : 'oli-panel-header',items:['当前位置:', '-',{id:'bbbzd1',text:'发起考试',iconCls: 'bbbzd1',handler:function(){try{top.ScreenCtl()}catch(e){}}},'->', { id:'save',iconCls: 'save',text:'保存',handler:function(){save();}}, '-',{id:'addnew',iconCls: 'addnew',text:'继续添加',handler:function(){addNew();}}, '-', {id:'back',iconCls: 'back',text:'返回',handler:function(){back()}},'-']});menubar.render('riskAlarmBar');});
上述效果图类似下面的,一般的系统中,刚进入就是 一个列表的页面,列表上面有标题,右上角有按钮,类似如下的
3.具体的使用方法
要使用ExtJS,先要得到ExtJS库文件,ExtJS库文件可以到ExtJS官网下载,地址是www.extjs.com/products/gxt/download.php,把下载得到的ZIP压缩文件解压,可以得到以下内容,
adapter:负责将里面提供第三方底层库(包括Ext自带的底层库)映射为Ext所支持的底层库。build: 压缩后的ext全部源码(里面分类存放)。 docs: API帮助文档。exmaples:提供使用ExtJs技术做出的小实例。resources:Ext UI资源文件目录,如CSS、图片文件都存放在这里面。source: 无压缩Ext全部的源码(里面分类存放) 遵从Lesser GNU (LGPL) 开源的协议。Ext-all.js:压缩后的Ext全部源码。ext-all-debug.js:无压缩的Ext全部的源码(用于调试)。ext-core.js:压缩后的Ext的核心组件,包括sources/core下的所有类。ext-core-debug.js:无压缩Ext的核心组件,包括sources/core下的所有类。
得到ExtJS库文件后,就可以将extjs应用到页面当中了。应用extjs需要在页面中引入extjs的样式及extjs库文件,样式文件为resources/css/ext-all.css,extjs的js库文件主要包含两个,adapter/ext/ext-base.js及ext-all.js,其中ext-base.js表示框架基础库,ext-all.js是 extjs的核心库。adapter表示适配器,也就是说可以有多种适配器,因此,可以把adapter/ext/ext-base.js换成 adapter/jquery/ext-jquery-adapter.js,或adapter/prototype/ext-prototype- adapter.js等。
因此,要使用ExtJS框架的页面中一般包括下面几句:
一般情况下我们就使用下面的三个:
<link rel="stylesheet" type="text/css" href="F:/extjs/ext-all-2.2.css" />
<script type="text/javascript" src="F:/extjs/ext-base-2.2.js"></script>
<script type="text/javascript" src="F:/extjs/ext-all-2.2.js"></script>
在ExtJS库文件及页面内容加载完后,ExtJS会执行Ext.onReady中指定的函数,因此可以用,一般情况下每一个用户的ExtJS应用都是从Ext.onReady开始的,使用ExtJS应用程序的代码大致如下:
<script type="text/javascript">
function fn(){
alert("Ext已经加载");
}
Ext.onReady(fn);</script>
或者:
<script type="text/javascript">
function fn(){
alert("Ext已经加载");
}
Ext.onReady(function(){
alert("Ext已经加载");
});</script>
下面我们写一个简单的代码程序:弹出警告对话框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title> ext_exsample </title></head><link rel="stylesheet" type="text/css" href="F:/extjs/ext-all-2.2.css" />
<script type="text/javascript" src="F:/extjs/ext-base-2.2.js"></script>
<script type="text/javascript" src="F:/extjs/ext-all-2.2.js"></script><script type="text/javascript">
Ext.onReady(
function(){
Ext.MessageBox.alert("标题","内容");
}
);
</script><body></body>
</html>
效果如下:
例子二:弹出窗体
<script>
Ext.onReady(function () {
//弹出警告对话框.
//Ext.MessageBox.alert("hello", "Hello ,Hyey.wl Come to ExtJS World!");
//弹出Window窗体.
var win = new Ext.Window({ title: "Hello", width: 300, height: 200, html: '<h1>Hello Easy ExtJS Open Source Window</h1>' });
win.show();
});
</script>
效果如下:
这只是一个简单的实例,要想做出复杂的功能还需要学习很多知识,在后续中将介绍ExtJS类库和组件介绍,希望大家继续关注,一起研究,共同进步!
转载于:https://www.cnblogs.com/dyllove98/p/3228508.html
Ext入门的第一个程序(1)相关推荐
- Android Studio 教程:入门开发第一个程序
Android Studio 教程:入门开发第一个程序 2018.09.11 14:30 16005浏览 开发第一应用 可以开发属于自己的应用,是否有点小激动?好吧!让我们开始,首先点击Start a ...
- 程序员入门的第一个程序,打印输出 “ HelloWorld “
程序员入门的第一个程序,打印输出 " HelloWorld " HelloWorld 中文意思是"你好世界".因为 The C Programming Lang ...
- python windows窗口置顶_Python入门:第一个程序“Hello, world”
本文主要内容 安装Python 使用IDLE和基础交互模式 编写一个简单的程序 使用IDLE的Python shell窗口 本章将介绍Python和IDLE的下载.安装和启动过程,IDLE是Pytho ...
- 【Spring 4.0】Spring入门之第一个程序HelloWorld实现
一.什么是Spring? Spring Framework 是一个开源的Java/Java EE全功能栈(full-stack)的应用程序框架,以Apache License 2.0开源许可协议的形式 ...
- NS3入门:第一个程序first.cc
运行 环境配置 在VMware虚拟环境当中运行first.cc 首先安装虚拟机,然后配置环境:参考文章 NS3详细安装教程 安装完成之后,进入终端,运行以下代码 首先进入文件夹当中: cd tarba ...
- Android Studio 教程:入门开发第一个程序,附超全教程文档
1.虚拟设备管理. 2.同步工程的Gradle文件,一般在Gradle配置被修改的时候需要同步一下. 3 .项目结构,一些项目相关的属性配置. 4.Android SDK管理 5.Genymontio ...
- 程序员入门第一个程序
程序员入门的第一个程序,也是我写的第一个程序:
- Shiro第一个程序:官方快速入门程序Qucickstart详解教程
目录 一.下载解压 二.第一个Shiro程序 1. 导入依赖 2. 配置shiro配置文件 3. Quickstart.java 4. 启动测试 三.shiro.ini分析 四.Quickstart. ...
- c语言如何输入汉字_C语言入门的第一个小程序
大部分程序员入门的第一个小程序都是Hello World,还记得当时大一的时候,我室友还特意为了这个发了个说说,现在想起来好有意思,哈哈好了废话不多说,直接干. (PS:如果学过自动忽略) #incl ...
最新文章
- Uipath 学习栏目基础教学:13、Uipath调用python代码
- 天池 在线编程 订单分配(回溯)
- HDOJ 4734 数位DP
- LuoguP2700逐个击破【并查集/生成树/正难则反】By cellur925
- java标准化试题_标准化考试系统Java
- bch码原理基于matlab,BCH码编译码matlab仿真
- 如何用 Python 翻译语言?
- java 中英日期转换器_Java SimpleDateFormat中英文时间格式化转换详解
- python编写摇骰子游戏_python摇骰子猜大小的小游戏
- Flink SQL语法检查
- MOBA移动游戏性能分析报告:渲染、UI和逻辑代码是性能头号杀手!
- 给测试实习生,新人的小小建议
- 《娱乐至死》读书笔记(part6)--教育的目的是让学生们摆脱现实的奴役,而现在的年轻人为了适应现实而改变自己
- android app 用什么语言开发的
- 最新消息 CV四小龙之一 依图科创板上市“中止”
- STM32单片机报错error: #20: identifier “TIM2_IRQn“ is undefined
- C语言循环四要素是那些,基于信息化的c语言中循环语句的教学设计探讨
- 两线制4-20mA环路供电热电阻信号变送器(DIN导轨安装式)
- 一年吃掉1万亿,网红食品里的大生意
- 基于matlab的脉冲多普勒测距、测速、实现测速以及测距功能