Exjs 入门篇


Posted in Javascript onApril 07, 2010

看到Extjs如此绚丽的界面,突然有种莫名的冲动来学习下!

Extjs是从yui-ext发展来的一套ajax控件,是一套完整的富客户端解决方案,也因为功能完整,ext-all.js有400多k(最新的extjs3.2.0 有600多k),以为是基于js和css的功能实现,对客户端机器性能也有一定的要求,比如对ie6以下版本的不支持。

下面开始Extjs的学习(本人也是刚学,希望大家提出文中出现的问题)。"Hello World"是当今程序语言经典的入门程序,很多教科书上都是用"Hello World"来引领我们进入精彩的程序世界。

在进行是用Extjs框架开发应运程序前,必须将Extjs资源包导入到你的项目中来,最新的Extjs开发包版本为3.2.0,在Extjs官方网站可以进行下载,网址为www.extjs.com/download。下载完成后,进行解压,解压后的结构图如下所示。

Exjs 入门篇

下载了Extjs开发包后,我们就可以可以Extjs的开发了,首先我们打开VS2008,新建一个工程,我就取名为Com.KimiYang.Web。建完工程后,将刚才解压后的Extjs开发包拷到到项目中来。目录adapter,resources和文件ext-all.js必须拷到项目中来。我在工程的根目录新建了文件夹Extjs3.2.0,然后将以上文件夹及文件拷到文件夹Extjs3.2.0来。目录结构如下图所示:

Exjs 入门篇

现在我们开始写"Hello World"程序,我们直接写在页面Default.aspx上面了,打开Default.aspx页面。要使用Extjs开发应用程序,仅仅将Extjs开发导入到项目是不够的,还需要在页面中引用相应文件。最核心的文件有以下3个:resources/css/ext-all.css(控制界面样式,不引入次样式,将直接导致页面混乱),adapter/ext/ext-base.js和ext-all.js(这两个文件是包含了Extjs的所有功能),除了以上3个文件必须引入外,对于中国的开发者还必须引入一个文件:Extjs3.2.0/src/locale/ext-lang-zh_CN.js(中文翻译)。以上几个文件引用时有先后次序的,不然将导致程序出错。以下为"Hello World"代码,当用户打开页面时候,将弹出一个对话框,显示Hello Wold。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Com.KimiYang.Web._Default" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
<title>无标题页</title> 
<link href="Extjs3.2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> 
<link href="Extjs3.2.0/resources/css/xtheme-gray.css" rel="stylesheet" type="text/css" /> 
<script src="Extjs3.2.0/adapter/ext/ext-base.js" type="text/javascript"></script> 
<script src="Extjs3.2.0/ext-all.js" type="text/javascript"></script> 
<script src="Extjs3.2.0/src/locale/ext-lang-zh_CN.js" type="text/javascript"></script> 
<script type="text/javascript" language="javascript"> 
function openMsg() 
{ 
Ext.MessageBox.alert('状态', 'Hello World' , 'showResult'); 
} 
Ext.onReady(openMsg); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
</div> 
</form> 
</body> 
</html>

执行上面代码,将出现如下效果。

Exjs 入门篇

     首先在定义了一个方法openMsg,此方法的功能就是弹出一个 Extjs的对话框,Ext.onReady()是使用Extjs的入口,只有当Extjs框架加载完成后,才会执行Ext.onReady里面的函数

Javascript 相关文章推荐
mouse_on_title.js
Aug 25 Javascript
一个JS翻页效果
Jul 23 Javascript
javascript中的if语句使用介绍
Nov 20 Javascript
动态显示可输入的字数提示还可以输入的字数
Apr 01 Javascript
DIV+CSS+jQ实现省市联动可扩展
Jun 22 Javascript
JS中的==运算: [''] == false —&gt;true
Jul 24 Javascript
JavaScript创建对象的七种方式(推荐)
Jun 26 Javascript
vue select二级联动第二级默认选中第一个option值的实例
Jan 10 Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
Jun 28 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
Jan 07 Javascript
javascript window.opener的用法分析
Apr 07 #Javascript
JS的反射问题
Apr 07 #Javascript
Extjs在exlipse中设置自动提示的方法
Apr 07 #Javascript
JavaScript Distilled 基础知识与函数
Apr 07 #Javascript
javascript setTimeout()传递函数参数(包括传递对象参数)
Apr 07 #Javascript
javascript在事件监听方面的兼容性小结
Apr 07 #Javascript
javascript 程序库的比较(一)之DOM功能
Apr 07 #Javascript
You might like
php下使用curl模拟用户登陆的代码
2010/09/10 PHP
PHP数组交集的优化代码分析
2011/03/06 PHP
PHP Global变量定义当前页面的全局变量实现探讨
2013/06/05 PHP
php实现水仙花数的4个示例分享
2014/04/08 PHP
PHP微信支付实例解析
2016/07/22 PHP
PHP PDOStatement::getAttribute讲解
2019/02/01 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
jquery随意添加移除html的实现代码
2011/06/21 Javascript
关于跨站脚本攻击问题
2011/12/22 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
2013/09/26 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
2014/04/07 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
JS实现探测网站链接的方法【测试可用】
2016/11/08 Javascript
详解jquery选择器的原理
2017/08/01 jQuery
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
vue项目中使用Svg的方法
2018/10/24 Javascript
vue-cli配置全局sass、less变量的方法
2019/06/06 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
python批量修改文件名的实现代码
2014/09/01 Python
Python with语句上下文管理器两种实现方法分析
2018/02/09 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
Python实现打印实心和空心菱形
2019/11/23 Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
2020/03/14 Python
Pycharm创建文件时自动生成文件头注释(自定义设置作者日期)
2020/11/24 Python
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
商务英语毕业生自荐信范文
2013/11/08 职场文书
资源环境与城市管理专业推荐信
2013/11/30 职场文书
高三政治教学反思
2014/02/06 职场文书
合作投资意向书
2014/04/01 职场文书
群众路线党员个人剖析材料
2014/10/08 职场文书
护士求职自荐信
2015/03/25 职场文书
付款证明格式范文
2015/06/19 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python