`

Ext入门

Ext 
阅读更多

 

1、ExtJS入门

1.1、ExtJS构成及如何引用

ExtJS是用于进行RIA应用开发中前端界面开发的JavaScript库。ExtJS的组成,


 

 

具体包括：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所指出的函数的执行。


  • 大小: 19.2 KB
分享到：
| 如何阅读别人的代码
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics