ExtJS入门案例
1、下载extjs-4.1.1.zip和ExtJs4.1.0API中文版V0.4Beta.rar，然后解压。下载地址http://pan.baidu.com/s/1qW1eLkw
2、打开MyEclipse，新建项目javaweb项目extjs，在项目WebRoot下新建JS文件夹，把extjs-4.1.1文件夹里的ext-all.js复制到项目JS文件夹和resources文件夹复制到项目WebRoot下。
3、修改index.jsp，改为如下内容
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>extjs入门案例</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="resources/css/ext-all-gray.css">
<script type="text/javascript" src="JS/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
var store=Ext.create('Ext.data.TreeStore',{
root:{
expanded:true,
children:[
{
text:"菜单1",
expanded:true,
children:[
{text:"子菜单1",leaf:true}
]
},
{
text:"菜单2",leaf:true
}
]
}
});
var viewport=new Ext.Viewport({
layout:'border',
renderTo:Ext.getBody(),
items:[{
title:'extjs入门案例',
region:'north',
height:100,
minsize:100,
maxsize:120
},{
title:'菜单',
width:120,
store:store,
region:'west',
rootVisible:false,
xtype:'treepanel',
split:true,
border:true,
collapsible:true,
minsize:120,
maxsize:200,
listeners:{
itemclick:function(view,record,item,index,e,eOpts){
alert(index);
}
}
},Ext.create('Ext.panel.Panel',{
id:'center',
title:'table',
layout:'border',
region:'center'
})]
})
});
</script>
</body>
</html>
4、把项目发布到tomcat,并启动tomcat服务器。
5、打开浏览器，输入http://localhost:8080/extjs,如果出现如下内容则入门案例开发成功。
6、打开ExtJs4.1.0API中文版V0.4Beta文件夹，双击index.html,出现如下界面界面。
7、以Ext.data.TreeStore为例，说明如何查看开发文档。在index.html搜索框输入Ext.data.TreeStore，出现如下界面。configs配置项properties属性methods方法events事件。单击configs，选择root配置项，即可查看root如何配置。
