配置Extjs的开发环境

                                                                   配置Extjs的开发环境

                                                      (本篇博客为我的转载文,其中有些地方好像有问题,我自己是改过后才使用的,自己建议大家可以改改!!!)

配置开发ExtJS环境

ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用javascript写的,主要用于创建前端用户界面,与后台技术无关的前端RIA框架。

ExtJS的官方网站:http://www.sencha.com/products/extjs/ 

我们可以从官方网站上面下载到最新版的基于GPLv3开源的ExtJS,目前最新版是4.1.1a。如果要在商业项目中使用ExtJS,需要购买它的商业版授权,貌似不便宜的说!

下载ExtJS

访问官方网站,然后打开下载页面:http://www.sencha.com/products/extjs/download/

image

点击"Download for Ext JS 4.1.1a GPL"就可以下载到了。

如果要其它版本的ExtJS,可以在Related Downloads列表中找到相应的版本:

image

 

添加ExtJS引用

ExtJS是纯Javascript开发的,所以可以在任何Web项目中使用。作为演示,我这里就将其放在asp.net项目中。

首先将下载好的ExtJS压缩包解压,得到如下的目录:

image

初学者看到这么多文件夹和文件会不会有点眼晕~~

其实要做ExtJS的开发,不用把所有的文件都引入项目,只需要部分文件就可以了。这是我添加到项目中的文件:(个人建议,可以把所有的文件都放进去,毕竟放进去不会有错,只是不好找,但是按ctrl+F也容易找到)

image

locale目录存放的是ExtJS的语言包,我们在项目中需要中文的语言包:ext-lang-zh_CN.js

resources中存放的是皮肤和图片,都是些资源文件,我这里全部都添加到了项目中。你也可以根据自己的需要选择性的添加某一个皮肤样式的资源。

ext-all-debug.js 是ExtJS的可调试版本,方便开发人员进行调试。

ext-all.js 是发布版本。

在asp.net中,我们可以将这些引用放在一个模板页中,这样各个子页面就不需要分别引用了。我的ext.master的代码如下:

image

这是一个默认的master,只是添加了一些Ext的引用。

(以下是我的引用部分)

<%@ Page Language="C#"  %>

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title>江农教务管理</title>
    <link href="Ext3.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="Ext3.0/adapter/ext/ext-base.js" type="text/javascript"></script>
    <script src="Ext3.0/ext-all.js" type="text/javascript"></script> 
</head>

 

 

开始编码:Hello World

为了验证是否已经成功的引用ExtJS,我们来编写一个Helloworld程序进行验证。程序的目的是:在页面上创建一个ExtJS的Button,当点击Button时弹出Ext的提示窗口,在窗口内显示Helloworld。

首先要新建一个Helloworld.aspx页面,这个页面使用了我们上面的ext.master模板。

添加一个ExtJS的Button:

image

接下来为Button添加Handler,添加Handler的方法是直接在配置项中加入handler,修改后的代码如下:

image

运行这个页面,当页面加载完成以后,我们将看到如下内容:

image

点击确定按钮:

image

OK,如果你看到这个弹出窗口,说明你的Ext已经正常工作了……

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值