Ext JS是一个流行的JavaScript框架，用于创建健壮的企业级web和移动应用程序。该框架提供了一组丰富的高性能且经过全面测试的预构建UI组件（140多个）。其中包括菜单、图标、按钮、传送带、滑块等等。此外，外部JS提供最快的JavaScript网格之一，并支持各种图表和D3可视化，使您能够构建数据丰富的应用程序。它还设计为跨浏览器兼容。这意味着你用Ext JS创建的应用程序可以在现代浏览器上无缝运行。 当使用Ext JS或任何其他框架创建web应用程序时，数据管理至关重要。它允许高效的数据存储、检索、操作和管理。在Ext JS应用程序中，数据模型和存储用于处理和管理数据。 本教程将全面介绍如何在Ext JS框架中使用模型和存储来管理数据和状态。
作为开发人员，你必须知道一致的UI内容设计的重要性。在当今世界，保持一致的UI设计是至关重要的，在这个世界上，所有其他企业都有在线业务。这种需要是因为UI组件设计会让你的用户和客户迷失方向、沮丧和困惑。假设你有一个不同按钮风格、菜单和颜色的网站。这是失去用户参与度和客户的最快方式。
在这篇博客中，我们将专注于实现一致格式化的用户界面组件。如果你是一个用户界面设计师，你不应该错过阅读本指南直到最后。我们还将探索一致的用户界面如何帮助我们获得更高的满意度。所以，让我们开始实现最佳UI组件设计的旅程。读完这篇文章。
如果你厌倦了花费无数时间从头开始设计和设计 Web 应用程序，或者发现维护 UI 的一致性和可扩展性具有挑战性，并且您点头同意，那么 UI 组件库就是您的最终解决方案。在本文中，我们将探讨使用 UI 组件库来设计 Web 应用程序样式的 7 个令人信服的理由。
UI 组件库是一种软件工具或系统，它提供了一组用于构建前端应用程序和网站的即用型组件。这些库提供了预先设计和预先构建的用户界面元素，可以快速集成到您的项目中，例如按钮、表单、菜单等。开发人员可以利用这些现成的组件来提高一致性、用户界面，并通过使用 UI 组件库加快开发过程。
新项目需要从服务器下载本地化资源，如果继续使用快速模板的本地化策略就很尴尬了，绝不可能等待本地化资源全部下载后再去加载项目，得另想办法。
在研究过了《Internationalization & Localization with Sencha Ext JS》一文后，终于有思路了。
文章的思路是通过重写Ext.Component来导入本地化数据，但前提还是要先加载好本地化资源，要解决这个问题不难，在本地化资源加载完成后，使用Ext.fireEvent出发一个本地化已准备好的事件就行了，而在Ext.Component的构造函数或初始化函数内，判断本地化是否已经准备好，如果准备好，直接执行本地化操作，如果还没准备好，就监听事件等待本地化资源加载。
思路有了就可以实现了，先完成本地化资源服务类。
在 MVC 架构中，大部分类是 Model（模型）、View（视图）或 Controller（控制器）。用户与视图交互，视图显示模型中保存的数据，由控制器根据需要更新视图和模型来响应交互。
View 和 Model 之间通常没有直接联系，因为控制器指导着两者的更新。通常来说，在 MVC 架构中 Controller 包含了大部分的应用程序逻辑，而 View 几乎没有什么业务逻辑。 Model 则主要是数据的接口，包含着用于管理数据变化的业务逻辑。
MVC 的目标是清晰地定义应用中每个类的职能，使它们能够有效地解耦，为应用程序的测试和维护提供便利，并提高代码的复用性。
使用Classic工具包的日期字段，在表单提交的时候，获取的是日期字段的提交值，也就是会在表单提交的时候会将值转换为与定义的格式相符的值。而在Modern工具包中，提交的值是原始值，也就是带有时区属性的日期值，如果在服务器端不进行时区转换，那么日期值就不是预想的值。
要解决Modern工具包中的这个问题，如果不想重写任何基类，就只能在提交前或在服务器端对值进行处理，这无疑增加了代码量。最简单直接的办法就是重写Ext.field.Panel的getValues方法，具体重写代码如下：
首先来看看xtype的定义。在ExtJS的官方文档中是这样对它进行定义的：
This property provides a shorter alternative to creating objects than using a full class name. Using xtype is the most common way to define component instances, especially in a container.
也就是说，在定义一个类的时候，如果我们指定了它的xtype，那么我们就可以通过这个xtype，而不是类型的全名来创建这些类型。例如对于下面的布局声明：
Sencha Ext JS 6.6已经支持NPM包和开放工具。Ext JS 6.6现在可以通过NPM包让开发人员使用已经相当熟悉的异常简单的工作流。现在，Ext JS开发人员可以是强大的开放式工具来快速生成、构建和更新Ext JS应用程序。Ext JS 6.6还带来了一些主要的增强，如新的现代工具包组件、新的美丽的可访问主题、现代工具包本地化、高级路由和几个Ext JS组件和框架的增强。
Ext JS 6.6 的亮点
Ext JS 6.6通过NPM和开放工具从根本上改变了Ext JS应用程序的生成和创建。此版本中的新功能包括:
Ext JS的NPM包：Ext JS标准和白金用户现在可以直接从Sencha的NPM存储库获取组件、主题和框架的NPM包。
ExtGen：新的开放工具，可以让你通过回答问题的方式来生成新的Ext JS应用程序，并提供了几个新的应用程序模版。
ExtBuild：新的开放工具，用来生成和分发应用程序
新的现代工具包组件：基于材料设计规范的时间字段以及时间面板组件以提供时间视图。
新的美丽的石墨主题可以让可访问性应用程序令人大吃一惊。
增强了对现代工具包的本地化支持。
高级Ext JS路由功能的增强。
增强了仪表组件，并提高了显示间隔值的能力。
当你要创建一个网页时， 经常会发现，你知道怎样用原生的html来创建，却不知道如何使用浩如烟海的ext组件来实现。本文将介绍一些使用ext组件创建html的一些技巧。
接着前面两节， 我们来开始第三节
事件 Events
让我们给组件添加一个click事件。下面这个例子是添加事件的基本方式，很容易理解：
首先让我们用一个简单的例子了解一下组件是如何渲染的:
/** The renderTo config option specifies a parent DOM element for
* rendering the component.
* For brevity it is not shown in the remaining examples.
new Ext.Component({renderTo: 'component-demo' });
今天碰到一个问题，当点击某一行数据，显示详情时，由于详情又有四个子tab，每个子tab都是一个表格，有各种各样的请求，当点击该行数据显示详情时，所有的数据同时加载，导致页面卡顿，此时做ExtjS的性能优化是很重要的。
通过研究，了解了一下ExtJs的性能优化和前端的性能优化：
extJs性能优化：
1.尽量不适用panel，而去使用基类container，因为panel是一个比较大的组件，附加了一些不必要的属性。
2.在页面渲染之后，尽量不要再去修改页面，从而避免页面reflow或者repaint。
3.减少要加载的东西，少加载少解析、晚加载晚解析
4.不必要的情况下，不要使用事件监听，在监听store的load时间的时候，应该监听一次。
5.避免组件封装
