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 相关文章推荐
JS模块与命名空间的介绍
Mar 22 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
Nov 03 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 Javascript
如何在JS中实现相互转换XML和JSON
Jul 19 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
Aug 28 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
Feb 16 Javascript
Angular 输入框实现自定义验证功能
Feb 19 Javascript
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 Javascript
微信小程序服务器日期格式化问题
Jan 07 Javascript
解决Element中el-date-picker组件不回填的情况
Nov 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加密解密类代码
2011/11/27 PHP
php实现多张图片上传加水印技巧
2013/04/18 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
PHP实现会员账号单唯一登录的方法分析
2019/03/07 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
CL vs ForZe BO5 第二场 2.13
2021/03/10 DOTA
利用javascript查看html源文件
2006/11/08 Javascript
js自定义事件代码说明
2011/01/31 Javascript
jQuery参数列表集合
2011/04/06 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
jquery简单实现图片切换效果的方法
2015/05/12 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
Angularjs自定义指令实现分页插件(DEMO)
2017/09/16 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
axios如何利用promise无痛刷新token的实现方法
2019/08/27 Javascript
js 图片懒加载的实现
2020/10/21 Javascript
[05:05]DOTA2亚洲邀请赛 战队出场仪式
2015/02/07 DOTA
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
python 字典修改键(key)的几种方法
2018/08/10 Python
用Python逐行分析文件方法
2019/01/28 Python
Windows平台Python编程必会模块之pywin32介绍
2019/10/01 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
python实现udp聊天窗口
2020/03/31 Python
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
大学生职业生涯规划书模板
2014/01/03 职场文书
授权委托书范文
2014/07/31 职场文书
助残日活动总结
2014/08/27 职场文书
小学班主任工作总结2015
2015/04/07 职场文书
小人国观后感
2015/06/11 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript
浅谈react useEffect闭包的坑
2021/06/08 Javascript
MySQL七大JOIN的具体使用
2022/02/28 MySQL
python 安全地删除列表元素的方法
2022/03/16 Python