1、ExtJS入门
1.1、ExtJS构成及如何引用
ExtJS是用于进行RIA应用开发中前端界面开发的JavaScript库。ExtJS的组成,
![](http://dl.iteye.com/upload/attachment/536992/e13a98f9-4d5c-35dd-94d2-a91721f1f416.jpg)
具体包括:Core, UI, Remoting, Data
Services, Drag and Drop and Utilities。
ExtJS是开放源码的,可以从以下的站点下载ExtJS包,其中包含了完整的ExtJS的API文档:www.extjs.com。由于ExtJS已经纳入到http://www.sencha.com/中,你应该从http://www.sencha.com/上下载ExtJS包。
现在得到ext-x.x.x.zip文件后(其中的x.x.x表示版本号),解压该文件到你愿意的任何一个文件夹下即可。此处记载下文中,我们假设你解压ExtJS的目录为”extjs”。
为了能够在页面中使用ExtJS,必须将ExtJS至少两个相关的JavaScript文件和一个CSS文件包含到页面文件中:
<link rel="stylesheet"
type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript"
src="extjs/adapter/ext/ext-base.js"> </script>
<script type="text/javascript"
src="extjs/ext-all-debug.js"> </script>
注意,ext-all-debug.js文件是包含了调试信息的,当不需要这些调试信息时,建议使用ext-all.js文件代替ext-all-debug.js文件。
如果需要显示中文信息,例如,“yes/no”显示为“是/否”,则需要在引入上面的文件后,还需要引入语言包文件:
<script type="text/javascript" src="extjs/src/locale/ext-lang-zh_CN.js"></script>
由于ExtJS使用了一个基本的1×1的像素来构建ExtJS需要的基本的图标,因此,需要在程序的开头部分立即通过ExtJS的BLANK_IMAGE_URL属性来指明该像素文件所在的位置。ExtJS本身附带有这个文件,因此,可以使用下面的语句来使用ExtJS自带的像素文件:
Ext.BLANK_IMAGE_URL =
'extjs/resources/images/default/s.gif';
1.2、典型的ExtJS应用程序
以下是一个典型的基于ExtJS的页面程序。包括两个文件:hello.html和hello.js,文件内容如下。
hello.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Ext JS in Action Chapter 01 | Hello World Window</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '/extjs/resources/images/default/s.gif';
</script>
<script type="text/javascript" src="hello.js"></script>
</head>
<body>
</body>
</html>
hello.js:
function buildWindow() {
var win = new Ext.Window({
id : 'myWindow',
title : 'My first Ext JS Window',
width : 300,
height : 150,
layout : 'fit'
});
win.show();
highlightWindow.defer(1000);
}
function highlightWindow() {
var win = Ext.getCmp('myWindow');
var winBody = win.body;
winBody.highlight();
}
Ext.onReady(buildWindow);
在基于ExtJS的页面应用程序中,页面文件中的Ext.onReady函数的参数指明的函数是ExtJS程序执行的入口,这也是所有基于ExtJS的页面应用程序必须遵循的,因为,Ext.onReady函数屏蔽了浏览器的差异,可以在页面文档下载完毕后触发Ext.onReady所指出的函数的执行。
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0053/6992/e13a98f9-4d5c-35dd-94d2-a91721f1f416-thumb.jpg)
- 大小: 19.2 KB
分享到:
相关推荐
Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-...
ext入门教程ext入门教程ext入门教程ext入门教程ext入门教程ext入门教程ext入门教程ext入门教程ext入门教程
【标题】:“EXT入门程序登录例子” EXT是一个强大的JavaScript库,用于构建富客户端Web应用程序。这个入门程序是一个基于EXTJS的登录示例,它在不依赖数据库的情况下展示了用户登录的基本功能。EXTJS以其丰富的...
### ext入门必学知识点详解 #### 一、Ext框架概览与起源 **知识点1:Ext框架起源** Ext最初作为YUI(Yahoo User Interface Library)的扩展存在,名为YUI.Ext,随后发展成为一个独立的JavaScript框架,不再依赖于...
【EXT入门必学】 EXT,全称为Ext JS,是一个强大的JavaScript库,专为企业级Web应用设计,能够构建具有复杂布局和美观界面的应用程序。EXT最初是YUI(Yahoo! User Interface Library)的一个扩展,名为YUI.Ext,但...
Ext入门电子书.rar,不错的入门教材.
【Ext入门学习】 ExtJS是一个JavaScript框架,专为构建具有丰富用户界面的Web应用程序而设计。它最初由Jack Slocum开发,受到了Java Swing等技术的启发,且最初基于Yahoo! User Interface Library (YUI)。ExtJS允许...
EXT入门经典让我们共同进入EXT时代和谐进步
《Ext 入门学习》 ExtJS 是一款强大的JavaScript框架,专为构建功能丰富的Web应用程序界面而设计。它支持RIA(Rich Internet Applications)的开发,利用AJAX技术实现富客户端体验。由Jack Slocum开发,最初基于YUI...
EXT中文手册(很不错的ext入门书籍)
EXT入门 EXT是一个基于JavaScript的富客户端开发框架,主要用于构建桌面级的Web应用程序。它提供了丰富的组件库,包括数据网格、图表、表单等,使得开发者可以创建出具有高度交互性和美观界面的应用。EXT的核心是...
ext入门一步一步来,从引入文件开始。小白选手最爱!
使用ext,mvc模式,开发的ext入门手册,包括介绍,布局案例,组件使用案例,组件查询案例,grid数据操作案例,是对ext的总结技术文档以及实例。
ext入门手册.pdf
本文将围绕“EXT入门:登陆验证表单提交”这一主题,深入探讨EXTJS中实现登录表单验证的基本步骤和原理。 EXTJS允许我们通过其丰富的组件库创建美观且功能丰富的表单,包括输入框、按钮等元素。在登录场景中,我们...
很不错的ext 中文资料 非常不错的ext 入门资料
EXT 入门CHM { Ext官方中文教程列表 }