345161974

浏览: 60766 次
性别:
来自: 上海

最近访客更多访客>>

mr891127

侯庆忠

chrisisgoodegg

lovehong123

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Extjs+Grails教程系列1（Extjs环境搭配及HelloWorld程序）

博客分类：

Grails EXT CSS JavaScript HTML

这一些列的博文，权当是我对自己学Extjs的路子的一个回顾总结了。如今，在上海这家公司，我学了两个星期，把Extjs学了差不多，后来跟着工程师多多少少的积累了很多Extjs这块的经验，现在准备写篇系列博文，将自己学Extjs的历程分享给大家。由于本人涉世不深，难免诸多错误，所以，文章的Bug，还请各路高手不吝指出，谢谢。

Extjs简介：http://baike.baidu.com/view/1350145.htm?fr=ala0_1_1

为避免废话，本人不多讲Extjs的理论，注重动手能力这块的培养。

Extjs下载

在Extjs的官方网站上可以找到Extjs的产品下载地方：http://www.sencha.com/products/js/download.php

本人下载Extjs3.2.1版本，更高的版本，Extjs给商业化了，得掏钱，我们学习，就用这个免费的吧。

下载过后，解压到磁盘任意处：我解压在C盘根目录下面，结构如下：

其中简单介绍下目录内容：

adapter：放置了很多其他的类库，比如jquery，prototype等等；

docs：Extjs的帮助文档；

examples：Extjs自带的N多例子，我们可以从这里开始自己的Extjs摸索之路；

pkgs：ExtJs各种组件的代码库，当使用相关组件是，就需要引入这个目录中的组件实现库；

resource：放置了Extjs很多的CSS，图片之类的东西；

src：是Extjs的源码，因为Extjs是开源的js框架；

参考：

Extjs的HelloWorld

首先，让我们看下这几个文件：

1：Extjs目录下resources下面的css目录下面的ext-all.css ，这个是Extjs的css样式表；

2：Extjs目录下面adapter目录里面的ext-base.js,这个是Extjs的最基础的js文件；

3：Extjs目录下面的ext-all.js 文件和ext-all-debug.js 文件

记住这几个文件，那么下面，我们只需将他们引入到我们的HTML代码中即可。

我自己随便在Extjs目录下adapter 目录里面建立个文件夹myself ,然后在myself里面新建立一个网页，叫test.html

首先，一个简单的HTML页面是这样子的：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title id='title'>HTML Page setup Tutorial</title>
    </head>
    <body>
    </body>
</html>

然后，我们开始引入Extjs，首先，必须先引入Extjs的CSS样式表，我的引入之后是这样子的：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title id='title'>HTML Page setup Tutorial</title>
		<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"></link>

    </head>
    <body>
    </body>
</html>

接着，我们引入ext-base.js，代码如下：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title id='title'>HTML Page setup Tutorial</title>
		<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"></link>
		<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>

    </head>
    <body>
    </body>
</html>

最后，我们引入ext-all.js或者 ext-all-debug.js，那么，最终，我们的页面就是这样子的：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title id='title'>HTML Page setup Tutorial</title>
		<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"></link>
		<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="../../ext-all.js"></script>

    </head>
    <body>
    </body>
</html>

这样子，我们这个页面就可以把Extjs给轻轻松松的加载进来了，下面，我们要做的就是调用Extjs的库，去做一个Helloworld的程序。我们只需在body里面加上下面这几行即可。

<script type="text/javascript">
			Ext.onReady(function(){
				Ext.Msg.alert('祝贺你','成功了') ;
			}) ;
</script>

那么，最终我们的页面是这样子的，test.html

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title id='title'>HTML Page setup Tutorial</title>
		<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"></link>
		<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="../../ext-all.js"></script>
    </head>
    <body>
		<script type="text/javascript">
			Ext.onReady(function(){
				Ext.Msg.alert('祝贺你','成功了') ;
			}) ;
		</script>

    </body>
</html>

运行之后，我们可以看到，一个简单的弹窗出现在我们眼前，如下：