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继承的实现代码
Aug 05 Javascript
HTML中的setCapture和releaseCapture使用介绍
Mar 21 Javascript
Javascript全局变量var与不var的区别深入解析
Dec 09 Javascript
node.js 使用ejs模板引擎时后缀换成.html
Apr 22 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
Dec 04 Javascript
jQuery实现的简单提示信息插件
Dec 08 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
Jul 05 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 Javascript
bootstrap精简教程_动力节点Java学院整理
Jul 14 Javascript
详解Vue取消eslint语法限制
Aug 04 Javascript
在小程序开发中使用npm的方法
Oct 17 Javascript
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
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自动识别文字编码并转换为目标编码的方法
2015/08/08 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
PHP获取不了React Native Fecth参数的解决办法
2016/08/26 PHP
php多进程模拟并发事务产生的问题小结
2018/12/07 PHP
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
js动态删除div元素基本思路及实现代码
2014/05/08 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
JavaScript观察者模式(经典)
2015/12/09 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
2016/01/12 Javascript
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
如何在vue里添加好看的lottie动画
2018/08/02 Javascript
vue 移动端注入骨架屏的配置方法
2019/06/25 Javascript
webpack是如何实现模块化加载的方法
2019/11/06 Javascript
基于JavaScript伪随机正态分布代码实例
2019/11/07 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
谈谈python中GUI的选择
2018/03/01 Python
linux安装Python3.4.2的操作方法
2018/09/28 Python
python3去掉string中的标点符号方法
2019/01/22 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
Python集中化管理平台Ansible介绍与YAML简介
2019/06/12 Python
对python 调用类属性的方法详解
2019/07/02 Python
PIL图像处理模块paste方法简单使用详解
2019/07/17 Python
Python values()与itervalues()的用法详解
2019/11/27 Python
python实现控制台输出彩色字体
2020/04/05 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
生物技术专业研究生自荐信
2013/09/22 职场文书
营销与策划应届生求职信
2013/11/04 职场文书
电子商务专业学生的自我鉴定
2013/11/28 职场文书
毕业生个人的求职信范文
2013/12/03 职场文书
保护环境建议书
2014/03/12 职场文书
三好学生事迹材料
2014/12/24 职场文书
浅谈Python项目的服务器部署
2021/04/25 Python
python 实现的截屏工具
2021/05/08 Python