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