ExtJS 4.x 第一搞,经典的Hello World !!!
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="${param.basePath}/ext-4.1resources/css/ext-all.css" />
<script type="text/javascript" src="${param.basePath}/ext-4.1/ext-all.js"></script>
一直等着ExtJS 4.1才来,我才愿意用4版,原因:
- 4和3有很大的区别, 4.1之前怀疑,有bug,才上来的东东,难免的
- 官方的文档,和大家讨论实践的文档,出于项目的安全,这是必须的,不能冒失;
总的说,就是为了项目
最近太忙太累,今天先来个简单的Hello World程序,永远经典;
环境介绍:
我是搞java的,所以肯定是java环境,后续的代码,都会以extjs的源码做参考演变成项目的应用 ;
开发工具:不推荐用myeclipse,也不推荐Intellij idea
用什么?
netbeans.当前是7.01版,11月28号7.1正式版出来;
netbeans.org可以下,免费的,
选择的原因就是两点,一是速度快,用过的人都知道,二是代码提示,把extjs库加到项目里,他会自己的检索,并根据源码提示输入的代码,这东西也不是全好,缺点就是他的构建项目的方式我不喜欢,再则就是缓存文件,他缓存到了用户目录,不多说这个,有问题可以在这里留言 ,或到群里问:
群号:29521319
创建一个项目,目录和myeclipse差不多,有web,有src/java,"java"目录不喜欢自己删吧,我没要这级目录;
我的目录结构如下:
项目根:
web目录:
除了ext-4.1是库文件,其它全是空目录,只是先列出来,而已,include下面有个extjs的引用,源码如下 :
ext-core-top.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="${param.basePath}/ext-4.1/resources/css/ext-all.css" />
<script type="text/javascript" src="${param.basePath}/ext-4.1/ext-all.js"></script>
为了方便后面,后面的所有页面引用核心库时,只需要引用这个文件即可,
${param.basePath}为路径参数 ,可不传,目录层级深度不同时传个路径就比较方便了;
好习惯很重要: (-_-)
好了,上第一例:
HelloWolrd.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EXTJS 4.1 Test</title>
<jsp:include page="include/ext-core-top.jsp" flush="true">
<jsp:param value="./" name="basePath" />
</jsp:include>
<script type='text/javascript'>
Ext.onReady(function(){
Ext.create('Ext.Button', {//Ext.create相当于前版的new ExtButton
text: '点击我',
renderTo: Ext.getBody(),//按钮加到页面
handler: function() {
alert('You clicked the button!');//原生态的js
Ext.Msg.alert('You clicked the button!'); //Ext 的alert,有主题效果的,比较漂亮,有参数加配置的,今天就用这点
}
});
});
</script>
</head>
<body>
</body>
</html>
找个服务器,我用的tomcat;
配置一个server.xml
<Context path="" docBase="D:\MyEclipse9\GwtJSClient\web\" reloadable="true"/>
运行测试:
注意,要用firefox+firebug
不用的人,建议不要搞js了
http://localhost:8080/
成功,晚安!!!