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了。
相关推荐
ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS...ExtJS快速入门 ExtJS快速入门 ExtJS快速入门ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门
目录 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 ...28. extJs 2.0学习笔记(ext.js篇) 77
Extjs4.0学习笔记,以下是部分介绍: xtjs4,创建Ext组件有了新的方式，就是Ext.create(....)，而且可以使用动态加载JS的方式来加快组件的渲染，我们再也不必一次加载已经达到1MB的ext-all.js了，本文介绍如何在EXTJS4...
extjs框架、实例。从入门到深入的全部例子
EXTJS框架简介里包含各种EXT框架案例，快速上手EXT之宝典
EXTjs自己的入门笔记
extjs学习笔记, 对应的书籍是extjs in action 没有看完...呵呵
Extjs框架基础.pptExtjs框架基础.ppt
ExtJS 也就是 Ext 框架 官方网址为 www extjs com ExtJS 是一个 Ajax 框架 是一个用 javascript 写的 用于在客户端创建丰富多彩的 web 应用程序界面 ExtJS 可以用来开发 RIA Rich Internet Application 富互联网应用...
extjs入门 extjs入门 extjs入门 extjs入门 extjs入门
Extjs 5 学习笔记,在网上下载整理好的。
ExtJS4.2入门案例 博客：http://blog.csdn.net/coco2d_x2014/article/details/52986835
基于ThinkPHP和ExtJS框架开发的全功能CRM企业管理软件系统PHP源码|ERP管理系统源码
ExtJs框架与API,讲解详细，功能强大。
ExtJs框架系列之filetree,很有用的源码
Extjs4开发笔记(二)——框架的搭建 Extjs4开发笔记(五)——动态grid Extjs4开发笔记(四)——实现登录功能 Extjs4开发笔记（一）——准备工作 关于Extjs4开发笔记（二）的补充说明 在Extjs4应用中使用Ext.Loader ====...
ExtJs学习笔记，共30讲 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 8. Ext.data.JsonReader篇二 15 ...
ExtJS是一个很不错的Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力。ExtJS是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java...
extjs 简单框架搭建