一、开发工具配置

 

1、http://www.eclipse.org/downloads/下载Eclipse，解压。

        2、http://spket.com/download.html下载Plugin，解压后覆盖到Eclipse的目录。

       3、启动Eclipse，选择window→proference→spket→javascriptprofiles→new (输入Ext JS4.2.1)

    4、Add libary(选择ExtJS)。

  5、Add file(选择ext-all-dev.js)，注意整个路径不能出现中文。

    6、选中Ext JS 4.2.1，设置默认。

7、将 js默认打开方式设为 spket。(如果不成功，请重复检查上面的步骤，重点检查第6步，设置默认成功之后字体明显变黑)

  8、重启Eclipse。

        9、新建javascript文件，输入Ext+. 则会出现自动提示

如果没有出现自动提示则右击你的JS文件,有个Open with - 选择spket JavaScript Editor。 如果仍旧没有出现提示则可以通过在项目文件上点击右键,选择“Reload Javascript Profiles”菜单，对javascript文件重新加载。

二、ExtJS开发环境搭建：

(1)  下载Ext开发包,下载地址：http://extjs.org.cn/

(2)  将Ext开发包copy到eclipse项目的/WebRoot目录下

注意：不需要整个Ext开发包全部导入，这样很容易造成eclipse卡死，因为eclipse会自动检测js的合法性，会占用大量的检测时间、cpu和内存。通常普通的开发只需要用到\extjs-4.2.1\resources文件包、\extjs-4.2.1\ext-all.js这两个资源就可以,需要中文化再导入\extjs-4.2.1\locale\ext-lang-zh_CN.js 就可以了

 

(3) 在web页面中通过<script>标签引入ext的库文件。(注意引入顺序)

   Extjs4.0开始比以往有些变化，用起来麻烦不小。与以前的引入三个文件不同，现在的4.0只要引用两个文件就行了。    

  1. <link rel="stylesheet" type="text/css" href="extjs-4.2.1/resources/css/ext-all.css">  // 引入样式文件
  2. <script type="text/javascript" src="extjs-4.2.1/bootstrap.js" ></script>
  3. <script type="text/javascript" src="ext-4.2.1/locale/ext-lang-zh_CN.js"></script>   //  中文化

(4) 调用Ext.onReady()初始化组件

       <script>
           Ext.onReady(function(){
            …///在这里面创建及使用ext控件
            });
        </script>

 

三、hello word 实例

hellowrod.js

  1. (function()
  2. {
  3. Ext.onReady(function()
  4. {
  5. Ext.Msg.alert("hello wrod!");  //弹出hellowrod对话框 （实例化组件）                                                                                 }                                                                                                                                                                                                                                                                                                                 })();

html代码

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Insert title here</title>
  6. <link rel="stylesheet"  type="text/css" href="./css/test.css">
  7. <link rel="stylesheet"  type="text/css" href="./js/ext-4.2.1-gpl/resources/css/ext-all.css">//资源样式文件
  8. <script type="text/javascript" src="./js/ext-4.2.1-gpl/bootstrap.js"></script>
  9. <script type="text/javascript" src="./js/ext-4.2.1-gpl/locale/ext-lang-zh_CN.js"></script>//中文化
  10. <script type="text/javascript" src="./js/helloword.js"></script>
  11. </head>
  12. <body>
  13. </body>
  14. </html>
  1. <pre code_snippet_id="170450" snippet_file_name="blog_20140125_1_6261797"></pre>
  2. <pre></pre>
  3. <pre></pre>
  4. <pre></pre>
 
 

eclipse+spket+Extjs4.2.1开发环境搭建的更多相关文章

  1. spark-windows（含eclipse配置）下本地开发环境搭建

    spark-windows(含eclipse配置)下本地开发环境搭建   >>>>>>注意:这里忽略JDK的安装,JDK要求是1.8及以上版本,请通过 java  ...

  2. Hadoop项目开发环境搭建（Eclipse\MyEclipse + Maven）

    写在前面的话 可详细参考,一定得去看 HBase 开发环境搭建(Eclipse\MyEclipse + Maven) Zookeeper项目开发环境搭建(Eclipse\MyEclipse + Mav ...

  3. [转]MonkeyRunner在Windows下的Eclipse开发环境搭建步骤(兼解决网上Jython配置出错的问题)

    MonkeyRunner在Windows下的Eclipse开发环境搭建步骤(兼解决网上Jython配置出错的问题)   网上有一篇shangdong_chu网友写的文章介绍如何在Eclipse上配置M ...

  4. 转载 Elasticsearch开发环境搭建（Eclipse\MyEclipse + Maven）

    概要: 1.使用Eclipse搭建Elasticsearch详情参考下面链接 2.Java Elasticsearch 配置 3.ElasticSearch Java Api(一) -添加数据创建索引 ...

  5. Elasticsearch开发环境搭建（Eclipse\MyEclipse + Maven）

    前提是, Elasticsearch 编程API入门系列---说在前面的话 Eclipse下Maven新建项目.自动打依赖jar包(包含普通项目和Web项目) setting.xml配置文件 如何在M ...

  6. ExtJS4.x 开发环境搭建

    需要的资源 ExtJS4.2 eclipse 开发环境搭建 在项目中国需要引用的文件: eclipse中有报错.需要处理的是ext-lang-zh_CN.js,中文编码不能识别.右键->属性-& ...

  7. Eclipse中Python开发环境搭建

    Eclipse中Python开发环境搭建  目 录  1.背景介绍 2.Python安装 3.插件PyDev安装 4.测试Demo演示 一.背景介绍 Eclipse是一款基于Java的可扩展开发平台. ...

  8. Eclipse swt开发环境搭建

    原料: eclipse swt.下载链接为: Eclipse 4.6.2 Release Build: 4.6.2 配置说明: Developing SWT applications using Ec ...

  9. Win7+Eclipse+Hadoop2.6.4开发环境搭建

    Hadoop开发环境搭建 感谢参考网站:http://www.cnblogs.com/huligong1234/p/4137133.html 一.软件准备 JDK:jdk-7u80-windows-x ...

随机推荐

  1. php 网页 301 跳转

    php 跳转 if('http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'] =="http://www.nikemalaysia.co ...

  2. Spark相关错误汇总

    前面介绍了Spark开发环境的搭建,下面将在实际开发过程中遇到的一些问题汇总一下: 1.Exception in thread "main" com.typesafe.config ...

  3. oracle应用-表空间.用户名.权限

    oracle 数据库应用 虽然代码少但是很实用! --01.表空间create tablespace tp_hrdatafile 'E:\tp_hr01.dbf' size 10M, 'E:\tp_t ...

  4. SWFUpload - JQuery上传插件

    首先,大家可以去SWF的官网下载相关Demo或者源码. 官方地址:http://code.google.com/p/swfupload/ 官方Demo:http://demo.swfupload.or ...

  5. Python里的编码问题

    马克一篇 http://bbs.chinaunix.net/archiver/tid-1163613.html http://www.openhome.cc/Gossip/Python/ImportI ...

  6. 基于.NET的CAD二次开发学习笔记一：CAD开发入门

    1.AutoCAD .NET API由不同的DLL文件组成,它们提供用于访问图形文件或AutoCAD应用程序的包含丰富的类.结构.方法和事件.每一个DLL文件都定义不同的使用基于功能的库组织组件的命名 ...

  7. HTML5 LocalStorage 本地存储

    HTML5 LocalStorage 本地存储 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就 ...

  8. Xcode下的批量编辑

    说明:目前为止我找到三种查找与替换功能,如果有更多的方式,请在下面留言 第一种:我们常用的查找以及查找与替换功能 在Windows下,使用Ctrl+f 快捷键查找.用Ctrl+h来进行查找与替换功能. ...

  9. CentOS下解压缩命令

    ——————————————— .tar 解包:tar xvf FileName.tar 打包:tar cvf FileName.tar DirName (注:tar是打包,不是压缩!) —————— ...

  10. 当C++多继承遇上类型转换[转]

      1 由来 客户用陈旧的VC++6.0进行项目开发,有一块功能需要我来实现.让一个早就习惯了VS2013的人去使用C++支持不太好的VC6去做开发实在是非常不爽,于是另辟蹊径,打算使用VC++201 ...