ExtJS从零开始（1）-Hello World...

前言：

奥 Hello World 还需要说明什么吗

一 ExtJS4.2.1简单说明

1 下载地址 http://www.sencha.com/products/extjs

2 目录结构说明解压后如下图

doc 官方开发文档

examples 官方示例

locale 国际化JS文件中文环境引用 ext-lang-zh_CH.js

resources ExtJS框架自身的CSS与资源文件如背景图片等

这里需要注意的 resources > css > ext-all.css 这个文件决定了使用ExtJS的样式表皮肤如果需要更换皮肤则直接修改此文件的引用就可以了参考源码如下

1 @import '../ext-theme-neptune/ext-theme-neptune-all.css';

View Code

src ExtJS未压缩前的源代码

bootstrap.js ExtJS库的引导文件根据当前的环境变量是否为调试模式比如可以判断URL的IP 来判断引用ext-all.js 或者是 ext-all-dev.js 参考源码如下

 1 /*
 2 This file is part of Ext JS 4.2
 3 
 4 Copyright (c) 2011-2013 Sencha Inc
 5 
 6 Contact:  http://www.sencha.com/contact
 7 
 8 GNU General Public License Usage
 9 This file may be used under the terms of the GNU General Public License version 3.0 as
10 published by the Free Software Foundation and appearing in the file LICENSE included in the
11 packaging of this file.
12 
13 Please review the following information to ensure the GNU General Public License version 3.0
14 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
15 
16 If you are unsure which license is appropriate for your use, please contact the sales department
17 at http://www.sencha.com/contact.
18 
19 Build date: 2013-05-16 14:36:50 (f9be68accb407158ba2b1be2c226a6ce1f649314)
20 */
21 /**
22  * Load the library located at the same path with this file
23  *
24  * Will automatically load ext-all-dev.js if any of these conditions is true:
25  * - Current hostname is localhost
26  * - Current hostname is an IP v4 address
27  * - Current protocol is "file:"
28  *
29  * Will load ext-all.js (minified) otherwise
30  */
31 (function() {
32     var scripts = document.getElementsByTagName('script'),
33         localhostTests = [
34             /^localhost$/,
35             /\b(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(:\d{1,5})?\b/ // IP v4
36         ],
37         host = window.location.hostname,
38         isDevelopment = null,
39         queryString = window.location.search,
40         test, path, i, ln, scriptSrc, match;
41 
42     for (i = 0, ln = scripts.length; i < ln; i++) {
43         scriptSrc = scripts[i].src;
44 
45         match = scriptSrc.match(/bootstrap\.js$/);
46 
47         if (match) {
48             path = scriptSrc.substring(0, scriptSrc.length - match[0].length);
49             break;
50         }
51     }
52 
53     if (queryString.match('(\\?|&)debug') !== null) {
54         isDevelopment = true;
55     }
56     else if (queryString.match('(\\?|&)nodebug') !== null) {
57         isDevelopment = false;
58     }
59 
60     if (isDevelopment === null) {
61         for (i = 0, ln = localhostTests.length; i < ln; i++) {
62             test = localhostTests[i];
63 
64             if (host.search(test) !== -1) {
65                 isDevelopment = true;
66                 break;
67             }
68         }
69     }
70 
71     if (isDevelopment === null && window.location.protocol === 'file:') {
72         isDevelopment = true;
73     }
74 
75     document.write('<script type="text/javascript" charset="UTF-8" src="' + 
76         path + 'ext-all' + (isDevelopment ? '-dev' : '') + '.js"></script>');
77 })();

View Code

ext-all.js ExtJS核心文件

ext-all-dev.js ExtJS调试模式下引用的主文件

二新建WEB项目 WebRoot下新建extjs文件夹存放extjs的项目引用文件然后复制ExtJS文件夹下面必须的文件到extjs文件夹下面最终如下图

三在WebRoot根目录新建对应index.jsp的index.js文件 来存放对应的ExtJS代码，具体应用中，我们应该在WebRoot文件夹下面新建scritps>XXX包>对应XXX页面并于index.js文件中编写如下代码

 1 /**
 2  * 
 3  * 
 4  * 
 5  * 深圳市钝力信息技术科技有限公司－软件版权申明
 6  * 
 7  * 
 8  * 
 9  * 深圳市钝力信息技术科技有限公司
10  * 
11  * 未经 深圳市钝力信息技术科技有限公司许可，任何个人和组织不得以任何形式非法复制或传播本程序的
12  * 
13  * 任何部分。违者将追究其法律责任。
14  * 
15  * 
16  * 
17  * RCSfile: 对应index.jsp的Extjs代码
18  * 
19  * Revision: 1.0
20  * 
21  * Date: 2014-2-25
22  * 
23  * Author: Hunter.yin(尹当)
24  * 
25  * 
26  * 
27  * Log:
28  */
29 
30 Ext.onReady(function() {
31             Ext.Msg.alert('hello', 'hELLO WORLD');
32         });

View Code

四在index.jsp页面引用ExtJS框架文件及对应的index.js 如下

 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 2 <%
 3     String path = request.getContextPath();
 4     String basePath = request.getScheme() + "://"
 5             + request.getServerName() + ":" + request.getServerPort()
 6             + path + "/";
 7 %>
 8 
 9 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
10 <html>
11 <head>
12 <base href="<%=basePath%>">
13 
14 <title>My JSP 'index.jsp' starting page</title>
15 <meta http-equiv="pragma" content="no-cache">
16 <meta http-equiv="cache-control" content="no-cache">
17 <meta http-equiv="expires" content="0">
18 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
19 <meta http-equiv="description" content="This is my page">
20 
21 <!-- 引入ExtJS框架样式 -->
22 <link rel="stylesheet" type="text/css" href="ExtJS4.2.1/resources/css/ext-all.css">
23 
24 <!-- 引用中文环境文件 -->
25 <script type="text/javascript" src="ExtJS4.2.1/locale/ext-lang-zh_CN.js"></script>
26 
27 <!-- 引用extjs 引导文件 -->
28 <script type="text/javascript" src="ExtJS4.2.1/bootstrap.js"></script>
29 
30 <!-- 引用index.jsp 对应的index.js -->
31 <script type="text/javascript" src="index.js"></script>
32 </head>
33 
34 <body>
35 </body>
36 </html>

View Code

五将web项目部署到应用服务器 这里采用的是Tomcat 并访问：http:localhost:8080/web项目名称一切顺利的话将看到如下我的国际化文件出现了问题所以按钮是 ok

补充：附件下载

作者寄望：

因本人是在一路学习ExtJS cnblogs上面ExtJS从零开始系列文章是我整理记录我使用ExtJS的过程

或者我的方法实现有更加好的方式如看到文章的朋友们有任何的意见与建议欢迎批评与指正一起进步

posted on 2014-02-25 23:03 逆流(Mr.尹) 阅读(845) 评论(0) 编辑收藏举报