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类库和组件介绍,希望大家继续关注,一起研究,共同进步!

Ext入门的第一个程序(1)的更多相关文章

  1. Hibernate 入门的第一个程序

    一. Hibernate介绍     Hibernate是基于对象/关系映射(ORM,Object/Relational Mapping)的一个解决方案.ORM方案的思想是将对象模型表示的对象映射到关 ...

  2. windows驱动编程入门(第一个程序)

    1. 工具 vc6.0 WINDDK 3790.1830 Dbgview 驱动加载工具InstDrv32位/64位中文版 2. 代码 first.c /// /// @file first.c /// ...

  3. 【 D3.js 入门系列 — 1 】 第一个程序 HelloWorld

    记得以前刚上大一学 C 语言的时候,写的第一个程序就是在控制台上输出 HelloWorld .当时很纳闷,为什么要输出这个.老师解释说所有学编程入门的第一个程序都是在屏幕上输出 HelloWorld, ...

  4. java第一个程序——Hello World

    Hello World 如果没有下载jdk以及配置环境变量的萌新请自行百度,教程非常的详细(参考:https://jingyan.baidu.com/article/6dad5075d1dc40a12 ...

  5. SLAM+语音机器人DIY系列:(二)ROS入门——4.如何编写ROS的第一个程序hello_world

    摘要 ROS机器人操作系统在机器人应用领域很流行,依托代码开源和模块间协作等特性,给机器人开发者带来了很大的方便.我们的机器人“miiboo”中的大部分程序也采用ROS进行开发,所以本文就重点对ROS ...

  6. Java入门——编写并运行第一个程序

    Java入门——编写并运行第一个程序 摘要:本文主要介绍如何使用Java语言编写并通过DOS运行简单的程序. 编写简单的程序 在D盘新建一个文本文档,输入如下代码: class Hello { pub ...

  7. CodeIgniter框架入门教程——第一课 Hello World!

    本文转载自:http://www.softeng.cn/?p=45 今天开始,我将在这里连载由我自己编写的<CodeIgniter框架入门教程>,首先,这篇教程的读着应该是有PHP基础的编 ...

  8. unix 网路编程(卷一)第一个程序编译过程

    unix卷一去年暑假买的到现在才开始看无比惭愧,而且惭愧第一个程序就断断续续弄了几天,要好好写程序了,马上要找工作了,下面介绍下把本书第一个程序跑起来的过程: 搜各种博客 我用系统的是ubuntu 1 ...

  9. 【C语言探索之旅】 第三课:你的第一个程序

    内容简介 1.课程大纲 2.第一部分第三课:你的第一个程序 3.第一部分第四课预告:变量的世界 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答案.还会带大家用C语言编写三个 ...

随机推荐

  1. jQuery-弹窗登录

    在jQuery中实现弹窗常要用到的方法有: width()  :元素的宽度 outerWidth()  元素的宽度 盒子的padding+border 总的宽度 scrollTop()  鼠标滚轮自上 ...

  2. apache-php安装mysql简单方法

    1.启用mysql功能,在php.ini中 extension=php_mysql.dll extension=php_mysqli.dll 2. 修改extension_dir = "ex ...

  3. A Script Pro nginx URL重写规则无法播放MP4解决方法

    I am using nginx and I have already add the line location /file/ { rewrite ^/-]+)/([-]+)/([^/]*)/([- ...

  4. C#.NET Winform 通用开发框架

    C/S系统开发框架-企业版 V4.0 (Enterprise Edition) 简介: http://www.csframework.com/cs-framework-4.0.htm 视频下载: 百度 ...

  5. 将Excel导入到数据中

    常用的方式的有两种: 1. 通过 Microsoft.Jet.OLEDB.4.0 或  Microsoft.ACE.OLEDB.12.0 Microsoft.ACE.OLEDB.12.0 需要安装 A ...

  6. Adobe Acrobat XI Pro 两种破解方式 Keygen秘钥 license替换 亲测有效

    大家平时看paper比较多的话想必都是用Adobe Acrobat而非Adobe Reader吧,其功能全面之处就不啰嗦了,下面给大家分享下Adobe Acrobat XI Pro的两种破解方式(两种 ...

  7. Unity的Profiler性能分析

    1. CPU Usage A. WaitForTargetFPS: Vsync(垂直同步)功能所,即显示当前帧的CPU等待时间 B. Overhead: Profiler总体时间-所有单项的记录时间总 ...

  8. hbase 0.96 单机伪分布式配置文件及遇到的问题 find命令

    http://www.apache.org/dyn/closer.cgi/hbase/ 国外的站点下载速度慢,可以考虑国内的镜像网站~ 前面已经部署好了hadoop2.2.0单机伪分布式.必须先安装h ...

  9. PHP中的MVC

    在PHP中使用MVC越来越流行了,特别是在一些开源的框架当中.MVC足以应对大多数的情况,但还有一些情况是其不太适合的,如比较简单的个人博客,对于只有几百篇文章量级的博客,使用MVC让人觉得有些太复杂 ...

  10. Web NFC API

    W3C Editor's Draft 29 December 2014 This version: http://www.w3.org/2012/nfc/web-api/ Latest publish ...