ExtJS 4.x 第一搞,经典的Hello World !!!_extjs4 部署 springboot-CSDN博客

本文链接：https://blog.csdn.net/flash8627/article/details/6970622

<%@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

运行测试:

注意,要用firefox+firebug

不用的人,建议不要搞js了

http://localhost:8080/

成功,晚安!!!