在myeclipse中如何搭配extjs的开发环境

 

 

 

首先,打开myeclipse,安装开发extjs利器IDE(Spket)。选择help->Install/Update还是看图吧:

2010071600481711.jpg

2010071600495127.jpg

点击New Remote Site...

2010071600581012.jpg

然后按OK就行了,接下来就是finish了

安装成功以后打开Window->Preferences就可以看到Spket了。

接下来就是点开Spket->javaScript Profiles如下图:

2010071612191110.jpg

点New...,在Name对话框中输入extjs。

2010071612200338.jpg

点OK

选中extjs点击右下方的Default,然后点Add Library,选择ExtJS

2010071612211661.jpg

然后选中ExtJS,点Add File,找到已经下载到本地的ext文件,我的是ext-2.3.0中的source中的ext.jsb

2010071612215151.jpg

 打开之后可以看到下面的界面:

2010071612224018.jpg

点OK就行了。

安装这个Spket还有一种方法如下:

1.首先手头上要有spket-1.6.18.zip文件,从www.spket.com这个网站可以下载到。

我现在使用的版本是1.6.18;

2.将spket-1.6.18.zip文件解压,复制文件夹所有目录,如:E:extjs\ext-2.3.0\spket-1.6.18,如果没有意外,下一级目录应该是eclipse,千万不要复制eclipse;

3.切换到eclipse所在目录,并进入links目录(如果不存在,自己创建一个),如:

D:\Program Files\MyEclipse 6.5\eclipse\links,在目录中创建一个文本文件,文件名为:“spket.1.6.18.link”,用记事本打开文件,输入内容:path=E:\\extjs\\ext-2.3.0\\spket-1.6.18;

4.重新启动MyEclipse,如果安装成功,在Window->Preferences中会出现Spket的选项。

5.下面的图能说明问题

2010071612224018.jpg

然后,打开MyEclipse,file->new选择Web Service Project(Optional Maven Support),2010071612481225.jpg

新建一个工程命名为(ch01):

2010071612491418.jpg

在ch01目录下的WebRoot下创建一个文件夹example:

2010071612493633.jpg

2010071612495029.jpg

在example目录下新建一个helloworld.html:

 2010071612500233.jpg

 2010071612501477.jpg

接下来这步很重要,大家要注意:

从本地文件里复制ext-2.3.0到WebRoot目录下。

文件结构如下:

2010071612580940.jpg

下面是helloworld.html的代码:

ContractedBlock.gif ExpandedBlockStart.gif helloworld.html
 
     
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
< html >
< head >
< title > helloworld </ title >

< link rel ="stylesheet" type ="text/css" href ="../ext-2.3.0/resources/css/ext-all.css" />
< script type ="text/javascript" src ="../ext-2.3.0/adapter/ext/ext-base.js" ></ script >
< script type ="text/javascript" src ="../ext-2.3.0/ext-all.js" ></ script >
< script type ="text/javascript" src ="helloworld.js" ></ script >
< script >
Ext.onReady(
function (){
Ext.MessageBox.alert(
' helloworld ' , ' Hello World. ' );
});
</ script >
</ head >
< body >
</ body >
</ html >

 

要包含这三个类(这个很重要):


 <link rel="stylesheet" type="text/css" href="../ext-2.3.0/resources/css/ext-all.css" />
    <script type="text/javascript" src="../ext-2.3.0/adapter/ext/ext-base.js"></script> 
    <script type="text/javascript" src="../ext-2.3.0/ext-all.js"></script>

而且这三个类先后的顺序不能改。大家自己弄时,路径根据自己的路径要调整,这个是很容易错的地方。

最后,有MyEclipse中MyEclipse下的2010071613090619.jpg,启动服务器(可以是MyEclipse自带的tomcat,也可以是自己安装在本地的tomcat)。2010071613165457.jpg

然后在它的右边把你的工程重新部署一下,然后打开浏览器,在地址栏输入:http://localhost:8080/ch01/example/helloworld.html回车就行了。

运行结果:

2010071613183862.jpg

当你看到那个很炫的Hello World的时候,说明你已经成功了。

 

 

 

转载于:https://www.cnblogs.com/lizhaoyi19890903/archive/2010/07/16/1778510.html

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值