Let's Go!

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

上一篇 / 下一篇 2011-03-15 11:00:13 / 个人分类：JAVA学习&编程相关

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

　　首先，打开myeclipse，安装开发extjs利器IDE(Spket)。选择help->Install/Update还是看图吧：
　　
　　点击New Remote Site...
　　
　　然后按OK就行了，接下来就是finish了
　　安装成功以后打开Window->Preferences就可以看到Spket了。
　　接下来就是点开Spket->javaScript. Profiles如下图：
　　
　　点New...，在Name对话框中输入extjs。
　　
　　点OK
　　选中extjs点击右下方的Default，然后点Add Library，选择ExtJS
　　
　　然后选中ExtJS，点Add File，找到已经下载到本地的ext文件，我的是ext-2.3.0中的source中的ext.jsb
　　
　　打开之后可以看到下面的界面：
　　
　　点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\MyEclipse6.5\eclipse\links,

D:\Program Files\Genuitec\MyEclipse 8.x Latest\dropins （我用的这个）

在目录中创建一个文本文件，文件名为："spket.1.6.18.link",用记事本打开文件，输入内容：path=E:\\extjs\\ext-2.3.0\\spket-1.6.18;
　　4.重新启动MyEclipse,如果安装成功，在Window->Preferences中会出现Spket的选项。
　　5.下面的图能说明问题
　　
　　然后，打开MyEclipse，file->new选择Web Service Project(Optional Maven Support),
　　
　　新建一个工程命名为（ch01):
　　
　　在ch01目录下的WebRoot下创建一个文件夹example:
　　
　　
　　在example目录下新建一个helloworld.html:
　　
　　
　　接下来这步很重要，大家要注意：
　　从本地文件里复制ext-2.3.0到WebRoot目录下。
　　文件结构如下：
　　
　　下面是helloworld.html的代码：要包含这三个类(这个很重要）：
　　

　　而且这三个类先后的顺序不能改。大家自己弄时，路径根据自己的路径要调整，这个是很容易错的地方。
　　最后，有MyEclipse中MyEclipse下的
　　
　　，启动服务器（可以是MyEclipse自带的tomcat，也可以是自己安装在本地的tomcat）。
　　
　　然后在它的右边把你的工程重新部署一下，然后打开浏览器，在地址栏输入：http://localhost:8080/ch01/example/helloworld.html回车就行了。
　　运行结果：
　　

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

来源：http：//www.08.la/news2010/newshtml/YeJieDongTai/KaiFa/18233.html

hello.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>hello.html</title>

    <meta. http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta. http-equiv="description" content="this is my page">
    <meta. http-equiv="content-type" content="text/html; charset=UTF-8">

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

    

</head>

<body>
    This is my HTML page. <br>
    <script>
    Ext.onReady(function () {
    //弹出警告对话框.
    //Ext.MessageBox.alert("hello", "Hello ,Hyey.wl Come to ExtJS World!");
    //弹出Window窗体.
    var win = new Ext.Window({ title: "Hello", width: 300, height: 200, html: '<h1>Hello Easy ExtJS Open Source Window</h1>' });
    win.show();
});
</script>

</body>
</html>