正文
Extjs前端框架解决了什么问题
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
Extjs 作为一套企业级富客户端前端开发框架，主要解决了以下问题：
1、DOM
Ext.Element：
Ext.Element.get()快捷方式Ext.get()，只能以dom的id作为参数去获取Ext.Element对象（Ext.get返回的结果是Ext.Element对象的实例， .dom才是原生的dom）。在Ext中所有组件都是有Id的，这个Id可以是手动指定，也可以是Ext的Id生成机制自动生成。
Ext.DomHelper
主要是操作dom。
Ext.DomHelper.append()是一个很常用的方法，值得一提的是由于Ext采用了对象缓存机制，在MVC模式下在不同的tab切换的时候如果重新渲染dom，使用Ext.DomHelper.append()添加的元素不会丢失，但是使用原生或者其他框架（比如jq）就会丢失。这就是我说她像一个的老婆原因之一。看几个用法：
一、直接字符串
Ext.DomHelper.append(元素id,'<a href="#">你好</a>');
二、对象
Ext.DomHelper.append(元素id,{tag:ul,children:[{tag:li,html:'一个ul列表的第一项'},{...}]});
Ext.DomHelper.insertHtml()另一个很常用的方法
Ext.DomHelper.insertHtml(位置参数,dom,'<a href="#">你好</a>');
位置参数：beforeBegin、afterBegin、beforeEnd、afterEnd
Ext.DomHelper.overwrite(dom的id,'<a href="#">你好</a>');相当于原生的 .innerHtml="";所以是重写容器中的内容。
Ext.DomQuery 查找dom元素的利器
Ext.query('div')、Ext.query('[id="domId"]')、Ext.query('div：first-child').支持绝大部分的CSS3选择器
Ext.query() 是Ext.DomQuery.select()的快捷方式， 返回标准dom。
2. UI Component(组件)：UI组件丰富且方便扩展
部分组件class和xtype列表
类型 | Class (点击查看具体API) | xtype | 备注 |
| 容器 | Ext.container.Container | container | 基本容器 |
| Ext.container.Viewport | viewport | 自适应窗口 | |
| Ext.form.Panel | form | 表单 | |
| Ext.menu.Menu | menu | 菜单 | |
| Ext.panel.Panel | panel | 面板 | |
| Ext.grid.Panel | gridpanel、 grid | 网格面板 | |
| Ext.panel.Table | tablepanel | 表格面板 | |
| Ext.tab.Panel | tabpanel | Tab选项卡面板 | |
| Ext.toolbar.Toolbar | toolbar | 工具栏 | |
| Ext.tree.Panel | treepanel | 树形结构面板 | |
| Ext.window.Window | window | 窗口 | |
| 表单 | Ext.form.Panel | form | 表单 |
| Ext.form.field.Checkbox | checkboxfield、checkbox | 复选框 | |
| Ext.form.field.ComboBox | combobox、combo | Combo选择器 | |
| Ext.form.field.Date | datefield | 日期选择器 | |
| Ext.form.field.Display | displayfield | 只读文本字段 | |
| Ext.form.field.File | filefield、fileuploadfield | 文件上传 | |
| Ext.form.field.Hidden | hiddenfield、hidden | 隐藏项 | |
| Ext.form.field.HtmlEditor | htmleditor | Html编辑组件 | |
| Ext.form.field.Number | numberfield | 数字文本输入框 | |
| Ext.form.field.Radio | radiofield、radio | 单选框 | |
| Ext.form.field.Text | textfield | 文本输入框 | |
| Ext.form.field.TextArea | textareafield、textarea | 多行文本输入框 | |
| Ext.form.field.Time | timefield | 时间选择器 | |
| 工具栏 | Ext.toolbar.Toolbar | toolbar | 工具栏 |
| Ext.toolbar.Fill | tbfill | 右对齐分隔符 | |
| Ext.toolbar.Paging | pagingtoolbar | 分页工具栏 | |
| Ext.toolbar.Separator | tbseparator | 垂直分隔符 | |
| Ext.toolbar.Spacer | tbspacer | 空白分隔符 | |
| 菜单 | Ext.menu.Menu | menu | 菜单容器，可包含菜单组件、其他组件 |
| Ext.menu.CheckItem | menucheckitem | 切换复选框 | |
| Ext.menu.ColorPicker | colormenu | 颜色选择器 | |
| Ext.menu.DatePicker | datemenu | 日期选择器 | |
| Ext.menu.Separator | menuseparator | 分隔符 | |
| 其他 | Ext.button.Button | button | 普通按钮 |
| Ext.ProgressBar | progressbar | 进度条 | |
| Ext.slider.Slider | slider、sliderfield | 滑动条 |
容器层次结构：
3. Layout布局
ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor
另外，不常见的布局有：tab、vbox、hbox
4. 网络请求(通信)
Ajax交互方式 :Ext.Ajax.request（store的数据请求就是这种）
Form交互方式: formPanel.getForm().submit
formPanel.getForm().load() 加载数据
5、Utililty(工具库)
Ext.util.CSS：有效的控制样式表，可以多级的删除修改以及交换
Ext.util.ClickRepeater: 单击一次，如果不失去焦点。系统自动会去请求 主要用于挤房器和网络忙的时候请等待的功能
Ext.util.DelayedTask ：在规定的时间之后调用函数
Ext.util.Format ：格式化表示数值和日期等
Ext.util.MixedCollection对象集合类，可以增加对应的键值对，相当于java的一个Map集合，适合做缓存和静态常量，方便管理
Ext.util.TashRunner：主要操作的为线程，可以实现线程的运行和停止，多个线程之间互不影响，与java中的多线程机制相似
6、Templating(模板集成)
XTemplate是Extjs里面的模板组件.
Templete 是模板之意，就是定义一段 HTML 代码，并放置若干个{}作为占位符，可以实现部分逻辑，包括循环、判断等
运行时将数据填充到{}中去，从而实现UI和数据的分享。看来看去，和java中的MessageFormat及C#中的string.formate很像。
模板的使用为增加了代码的复杂度，并且把HTML代码与JS混全，要考虑一下再使用。
8、Routing(路由)：已经可以使用Ext.util.Histroy类来处理历史记录的变化 Extjs5中可以使用
Ext.define(‘DemoApp.controller.Main', {
extend : 'Ext.app.Controller', routes : {
'user/:id' : 'getUser'
}, getUser : function(id) {}
});
9. Event事件
Ext中的事件遵循树状模型，和事件相关的类主要有这么几个：
Ext.util.Observable、 Ext.lib.Event、Ext.EventManage，Ext.EventObject。
Ext使用Ext.lib.Event、Ext.EventManager和Ext.EventObject对原生浏览器事件进行了封装，最后给我们用的是一套统一的跨浏览器的通用事件接口。HTML元素本身已经支持事件，为什么基本上所有的主流JS框架都要实现自己的事件机制呢？一个最主要的原因是HTML元素对事件的处理是通过简单的单一绑定实现的，如果不进行封装，事件只能绑定到一个事件处理句柄。如下面代码所示：
var e = document.getElementById("test");
e.onclick = function() { alert("handler1") };
e.onclick = function() { alert("handler2") };
单击test按钮后会发现只会弹出一个显示"handler2"的提示框，因为第一个被覆盖。而使用像Ext、jQuery这样的框架就不用担心这个问题，同一个事件可以依次绑定多个事件处理句柄，如下代码所示：
Ext.onReady(function () {
var test = Ext.get("test");
test.on("click", function () {
alert("handler1");
});
test.on("click", function () {
alert("handler2");
});
});
Ext实现自己的事件机制，原因很多，比如为了兼容不同浏览器之间的差异等。Ext对原生浏览器事件的封装都在上面所说的几个类中。
10. 数据绑定及事件绑定: 双向数据绑定
一张图告诉你，如果进行数据绑定和事件绑定：
11. Architecture(架构)：MVVM
Ext JS提供了mvc和mvvm的应用程序框架支持，这两种架构方法都是关注于将应用程序代码和业务逻辑分离。每一种方法都有自己的优点
（M:Model）模型：这是为您的应用程序的数据。一组类(称为“模型”)定义了字段的数据(如用户模型的用户名和密码字段)。通过数据包模型知道如何展示自己,可以通过关系与其他模型关联。模型通常用于给存储提供数据的表格和其他组件。模型也是一个理想的选中为任何你可能需要的数据逻辑,比如验证、转换等。
（V：View）视图：一个视图是任何类型的组件,是视觉表示。例如,网格,树和面板都是考虑的观点。
（C：Controller）:控制器：控制器是用来使你的应用程序工作的视图逻辑的管理职责位置，这可能需要渲染视图、路由实例化模型,和任何其他类型的应用程序逻辑。
（vm: viewmodel）:视图模型是一个管理制定视图的数据管理器。它允许感兴趣的组件绑定和数据更改通知。
extjs优点：
1. 丰富的UI组件，且容易扩展，非常适合有复杂业务的企业应用系统。
2. 开发简单，支持MVVM，职责分工清楚明了，基本上纯JS代码，省心，省力。
3. 界面友好，基本不用美工设计
4. 跨浏览器，及版本上支持的不错。IE可以支持到IE8
extjs缺点：
1. 库比较大，比较适合内网运行。
2. 想修改界面样式，比较难
3. 学习的成本稍大一些。
4..比较难与外部模块进行自由组合。
附Ext API：http://docs.sencha.com/extjs/6.2.1/modern/Ext.html
