ExtJS学习（1）：demo

ExtJS是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。
ExtJS发布包目录
adapter：负责将里面提供第三方底层库（包括Ext自带的底层库）映射为Ext所支持的底层库。
　　build：压缩后的ext全部源码(里面分类存放)。
　　docs： API帮助文档。
　　exmaples：提供使用ExtJs技术做出的小实例。
　　resources：Ext UI资源文件目录，如CSS、图片文件都存放在这里面。
　　source：无压缩Ext全部的源码(里面分类存放) 遵从Lesser GNU （LGPL）开源的协议。
　　Ext-all.js：压缩后的Ext全部源码。
　　ext-all-debug.js：无压缩的Ext全部的源码(用于调试)。
　　ext-core.js：压缩后的Ext的核心组件，包括sources/core下的所有类。
　　ext-core-debug.js：无压缩Ext的核心组件，包括sources/core下的所有类。
应用extjs需要在页面中引入extjs的样式及extjs库文件，样式文件为resources/css/ext-all.css，extjs的js库文件主要包含两个，adapter/ext/ext-base.js及ext-all.js，其中ext-base.js表示框架基础库，ext-all.js是extjs的核心库。adapter表示适配器，也就是说可以有多种适配器，因此，可以把adapter/ext/ext-base.js换成adapter/jquery/ext-jquery-adapter.js，或adapter/prototype/ext-prototype-adapter.js等。

index.jsp 代码如下

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ext welcome you</title>

//Ext.onReady(btn);

Ext.onReady(
function () {
Ext.MessageBox.alert('ExtButton', 'ExtButton');
}
);

</script>

</head>
<body>
<h1>Ext welcome you</h1>
<div id="hello_in"> </div>
<script type="text/javascript">
var panel = new Ext.TabPanel( {
  width :300,
  height :200,
  items : [ new Ext.Panel( {
   title :"111111111",
   height :30,
   html :'<h1>Hello,aaaaaaaaaaaaaaaa</h1>'
  }), new Ext.Panel( {
   title :"2222222222",
   height :30,
   html :'<h1>Hello,bbbbbbbbbbbbbb</h1>'
  }), new Ext.Panel( {
   title :"33333333333333",
   height :30,
   html :'<h1>Hello,cccccccccccc</h1>'
  }) ]
});
panel.render("hello_in");
</script>
</body>
</html>

柳德才
13691193654
18942949207
QQ：422157370
[email protected]
湖北-武汉-江夏-庙山

ExtJS学习（1）：demo

ExtJS学习（1）：demo

你可能感兴趣的:(ExtJS学习（1）：demo)