EXTjs框架
JS框架介绍
浩如烟海的JS框架，国内各大互联网公司基本也都有自己的框架。实在太多，不一一介绍，感兴趣的可以参考http://www.javascriptoo.com/此网站分类统计了js库，共32种，596个，当然不包括各大公司自己的JS库或者框架。面对N多成功的框架，优缺点对比，使用场景等，自己百度吧。反正公司是选择了extjs，无论什么原因，都得掌握这个框架。讨厌一个框架一个框架的学习，一定要转向业务发展。
extJS框架介绍
百度百科原话”无论是界面之美，还是功能之强，ext的表格控件都高居榜首”。看来重在表格了。“ExtJS可以用来开发RIA也即富客户端的AJAX应用，是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。Ext的UI组件模型和开发理念脱胎、成型于Yahoo组件库YUI和Java平台上Swing两者，并为开发者屏蔽了大量跨浏览器方面的处理。相对来说，EXT要比开发者直接针对DOM、W3C对象模型开发UI组件轻松”。难怪看起来像swing。Ext从2.x开始收费，不知道会不会收公司费用啊。不扯蛋了，百度百科介绍说是《ExtJS实用开发指南》够入门的了，那就看教程吧。
下载组件
大致看了一下4.0版本为了支持触屏，公司用的是3.3，先不关心版本差异，按照教程下载教程上面的2.0js包。
入门实例：
示例helloworld
还是教程实在，上代码：
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"/>
</script>
<script type="text/javascript" src="extjs/ext-all.js" /></script>
<script type="text/javascript" />
function fn()
{
alert("helloworld extlib");
}
Ext.onReady(fn);
</script>
无图无真相，截图为证：
当然也可以与java内部类类似写法，效果是一样的。
<script type="text/javascript" />
Ext.onReady(function fn()
{
alert("Hello extlib");
});
</script>
在页面显示一个窗口
上代码：
Ext.onReady(function fn()
{
var win = new Ext.Window({title:"hello",width:300,height:200,html:'<h1>Hello easyjf opensource</h1>'});
win.show();
});
截图，教程上面截图窗口有颜色，而实际上用IE谷歌都没有颜色。坑爹的教程，先不管那么多了，接着看。
EXTJS框架基础以及核心介绍
类库简介
好吧，了解一下原理吧，看看教程怎么说。EXTJS由一系列类库组成，页面加载EXTJS库后，就可以通过JAVASCRIPT调用EXTJS类以及控件实现需要的功能。这就是把浏览器当作了jvm，把Javascript当作java语言来用了嘛。
底层api(core目录下，主要是DomHelper.js与Element.js)提供了对DOM（平时见了很多很频繁的名词，一直没有细究，学习不认真啊，现在补习，当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树，http://www.w3school.com.cn/js/ js_htmldom.asp上面介绍的最清楚，此处不写了）的操作，查询，事件处理。Core目录截个图吧
控件(widgets)是指可以直接在页面中创建的可视化组件，比如面板，选项版，表格，树，窗口，菜单，工具栏，按钮等（就是仿swing嘛）。控件的源码位于目录widgets下。目录截图吧
实用工具Utils:有了核心底层包，有了界面展示,怎么又来个工具包呢？看看功能吧，可以方便实现数据内容格式化，JSON数据解码反解码，对Date,Array,Ajax请求，Cookie管理，CSS管理等功能，这些功能封装到底层API好像是不合理啊，果然是需要个工具包来处理这些事情。截图
EXTJS组件介绍
既然都封装成了组件，那就来看看组件吧。教程如是说：“组件大致可以分三大类，基本组件，工具栏组件，表单以及元素组件”，如下表格。
| 基本组件 |
||
| 类型 |
对应的类 |
|
| box |
Ext.BoxComponent |
具有边框属性的组件 |
| button |
Ext.Button |
按钮 |
| colorpalette |
Ext.ColorPalette |
调色板 |
| component |
Ext.Component |
组件 |
| container |
Ext.Container |
容器 |
| cycle |
Ext.CycleButton |
|
| dataview |
Ext.DataView |
数据显示视图 |
| datepicker |
Ext.DatePicker |
日期选择面板 |
| editor |
Ext.Editor |
编辑器 |
| editorgrid |
Ext.Grid.EditorGridPanel |
可编辑表格 |
| grid |
Ext.grid.Panel |
表格 |
| paging |
Ext.PagingToolbar |
工具栏中的间隔 |
| panel |
Ext.Panel |
面板 |
| progress |
Ext.ProgressBar |
进度条 |
| splitbutton |
Ext.SplitButton |
可分裂的按钮 |
| tabpanel |
选项面板 |
|
| treepanel |
Ext.ViewPort |
视图 |
| window |
Ext.Window |
窗口 |
| 工具栏组件 |
||
| Toolbar |
Ext.Toolbar |
工具栏 |
| Tbbutton |
Ext.Toolbar.Button |
按钮 |
| Tbfill |
Ext.Toolbar.Fill |
文件 |
| Tbitem |
Ext.Toolbar.Item |
工具条项目 |
| Tbseparator |
Ext.Toolbar.Separator |
工具栏分隔符 |
| Tbspacer |
Ext.Toolbar.Spacer |
工具栏分割空白 |
| Tbsplit |
Ext.Toolbar.SplitButton |
工具栏分隔按钮 |
| Tbtext |
Ext.Toolbar.TextItem |
工具栏文本项 |
| 表单以及字段组件 |
||
| Form |
Ext.FormPanel |
Form面板 |
| Checkbox |
Ext.form.Checkbox |
Checkbox 录入框 |
| Combo |
Ext.formComboBox |
Combo选项框 |
| Datefield |
Ext.form.DateField |
日期选择项目 |
| Field |
Ext.form.field |
表单字段 |
| Fieldset |
Ext.form.FieldSet |
表单字段组 |
| Hidden |
Ext.form.Hidden |
表单隐藏域 |
| Htmleditor |
Ext.form.HtmlEditor |
Html编辑器 |
| Numberfield |
Ext.form.NumberField |
数字编辑器 |
| Radio |
Ext.form. |
|
组件蛮多的，咋用呢？仿照java，使用new关键字呗。例如new Ext.Window();
上代码：坑爹的教程不把代码放到onReady()中，让我调试了那么久
Ext.onReady(function(){
var panel=new Ext.TabPanel({title:"hello",width:300,height:200,html:"Hello,easyjf open source"});
panel.render('hello');
});
HTML部分
<body>
<div id="hello" > </div>
</body>
再来一个面板例子，上源码（注意将相关文件都拷贝到项目中，否则样式太难调了）：
<html>
<head>
<script type="text/javascript" src="adapter/ext/ext-base.js"/> </script>
<script type="text/javascript" src="ext-all.js" /></script>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" />
Ext.onReady(function(){
var panel=new Ext.TabPanel({width:300,height:200,items:[new Ext.Panel( {title:"面板1",height:30}),new
Ext.Panel({title:"面板2",height:30}),new Ext.Panel({title:"面板3",height:30})]});
panel.render('hello');
});
</script>
</head>
<body>
<div id="hello" > </div>
</body>
</html>
截图为证：
只有样式还不够，要处理相应事件啊。上代码：
<script type="text/javascript" />
function a(){
alert("fanjf tmp");
}
Ext.onReady(function(){
Ext.get("btnAlert").on("click",a);
});
</script>
<body>
<input id="btnAlert" type="button" value="弹出框"/>
</body
上面一段的JS不太容易懂，其实就是下面代码的意思咯，这下容易理解了吧，不多解释。
<script type="text/javascript" />
function a(){
alert("fanjf tmp");
}
window.onload=function(){
document.getElementById("btnAlert").onclick=a;
}
</script>
好了，入门结束，具体的高级特性，需要看demo了。