文档章节

eclipse+spket+Extjs4.2.1开发环境搭建

 南風
发布于 2014/08/20 11:56
字数 645
阅读 246
收藏 9

一、开发工具配置


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

        2http://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只要引用两个文件就行了。    

[javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片

  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

[javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片

  1. (function()  

  2.     {  

  3.      Ext.onReady(function()  

  4.      {  

  5.         Ext.Msg.alert("hello wrod!");  // 弹出hellowrod对话框 (实例化组 件)                                                                                 }                                                                                                                                                                                                                                                                                                                 }) ();   

                                                            
html代码

 [html] view plaincopyprint?在CODE上查看代码片派生到我的代码片

  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.   

  7.   

  8. <link rel="stylesheet"  type="text/css" href="./css/test.css">  

  9. <link rel="stylesheet"  type="text/css" href="./js/ext-4.2.1-gpl/resources/css/ext-all.css">//资源样式文件  

  10. <script type="text/javascript" src="./js/ext-4.2.1-gpl/bootstrap.js"></script>  

  11. <script type="text/javascript" src="./js/ext-4.2.1-gpl/locale/ext-lang-zh_CN.js"></script>//中文化  

  12. <script type="text/javascript" src="./js/helloword.js"></script>  

  13. </head>  

  14. <body>  

  15. </body>  

  16. </html>  

[javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片

  1. <pre code_snippet_id="170450" snippet_file_name="blog_20140125_1_6261797"></pre>  

  2. <pre></pre>  

  3. <pre></pre>  

  4. <pre></pre> 


本文转载自:

共有 人打赏支持
粉丝 0
博文 21
码字总数 880
作品 0
东莞
私信 提问
为什么用Docker,Docker究竟有什么用呢

近年来,Docker越来越火爆,一大堆新概念,轻量级虚拟机,集装箱等概念,眼光缭乱。 慢慢也尝试用vagrant+docker搭建开发环境 和 服务器也用docker搭建测试环境,再逐步正式环境也用上docke...

小和
2016/11/03
73
2
Symbian开发系列 - 入门篇

要开始我的Symbian开发之旅了, 先收集一些相关资料,如Symbian概述, 开发平台搭建, 参考书籍与网络资源. 【基础】 什么是Symbian 学习Symbian的基本概念 Symbian操作系统 Symbian 入门 【转】...

长征2号
2017/08/09
0
0
Vagrant 打造跨平台的开发环境

两个项目开发下来,因团队环境不一样,整合修bug成为了一件苦差事。虽然后来搭建了一台测试服务器,但是有时候受网络原因,还是不能连接到测试服务器上。因团队成员能力和习惯都不一样,有的...

cjp路人
2014/08/24
0
0
便携式开发环境搭建平台--Coffer

Coffer支持创建孤立和便携式开发环境的轻量级平台。让开发人员搭建相似的开发环境变得容易,但是建议不要用在实际的生产环境中。 适用环境: Python 3 Linux or MacOS 特性: 支持创建孤立的...

匿名
2016/08/03
235
0
区块链以太坊各种学习资料官方文档白皮书汇总

区块链技术和以太坊开发学习的资料如以太坊白皮书,官方文档;web3.js,Solidity,Truffle,geth中文文档;以太坊,IPFS开发环境搭建,私有链搭建,开发部署等资源汇总整理如下: 1.适合区块链新手的以...

笔阁
04/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Gradle 提速:每天为你省下一杯喝咖啡的时间

摘要: ### 前言 作为一名 Android 开发同学,当你的工程和代码达到一定规模的时候,相信你一定遇到过编译速度过慢的问题。比如: ![](https://user-gold-cdn.xitu.io/2018/11/6/166e7021c0...

阿里云官方博客
13分钟前
0
0
在 PHPStorm 中如何对远程服务使用 xdebug 进行断点调试

1. 安装 xdebug 1.1. 下载、安装 ➜ ~ wget https://xdebug.org/files/xdebug-2.4.1.tgz➜ ~ tar zxf xdebug-2.4.1.tgz➜ ~ cd xdebug-2.4.1➜ ~ phpize➜ ~ ./configure --with-ph......

whoru
15分钟前
1
0
看完这篇文章还不懂Python装饰器?

1、必备 2.需求来了 初创公司有N个业务部门,1个基础平台部门,基础平台负责提供底层的功能,如:数据库操作、redis调用、监控API等功能。业务部门使用基础功能时,只需调用基础平台提供的功...

糖宝lsh
21分钟前
3
0
Bytom合约预编译

比原项目仓库: Github地址:https://github.com/Bytom/bytom Gitee地址:https://gitee.com/BytomBlockchain/bytom 在开发合约的过程中你们有没有遇到一些问题呢?比如编译合约的过程中不能...

比原链Bytom
23分钟前
2
0
supervisor安装配置

supervisor安装配置 安装 wget -c https://files.pythonhosted.org/packages/44/60/698e54b4a4a9b956b2d709b4b7b676119c833d811d53ee2500f1b5e96dc3/supervisor-3.3.4.tar.gztar -zxvf su......

jackmanwu
48分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部