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 相关文章推荐
Jquery实现带动画效果的经典二级导航菜单
Mar 22 Javascript
JavaScript中的字符串操作详解
Nov 12 Javascript
浅析jquery的作用与优势
Dec 02 Javascript
解释&amp;&amp;和||在javascript中的另类用法
Jul 28 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 Javascript
Vue搭建后台系统需要注意的问题
Nov 08 Javascript
Vue的click事件防抖和节流处理详解
Nov 13 Javascript
Vue.js实现大屏数字滚动翻转效果
Nov 29 Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 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实现的oracle分页函数实例
2016/01/25 PHP
Yii框架用户登录session丢失问题解决方法
2017/01/07 PHP
javascript replace方法与正则表达式
2008/02/19 Javascript
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
javascript innerText和innerHtml应用
2010/01/28 Javascript
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
javascript中删除指定数组中指定的元素的代码
2011/02/12 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
jQuery 实现左右两侧菜单添加、移除功能
2018/01/02 jQuery
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
javascript 数组精简技巧小结
2020/02/26 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
python挖矿算力测试程序详解
2019/07/03 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
2020/06/22 Python
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
几个MySql的面试题
2013/04/22 面试题
经理秘书求职自荐信范文
2014/03/23 职场文书
个人评语大全
2014/05/04 职场文书
车辆委托书范本
2014/10/05 职场文书
计划生育工作总结2015
2015/04/03 职场文书
二手房购房意向书
2015/05/09 职场文书
工作后的感想
2015/08/07 职场文书
2016中秋节晚会开场白
2015/11/26 职场文书
golang fmt格式“占位符”的实例用法详解
2021/07/04 Golang