Ext JS是一个流行的JavaScript框架，它为使用跨浏览器功能构建Web应用程序提供了丰富的UI。 Ext JS基本上用于创建桌面应用程序它支持所有现代浏览器，如IE6 +，FF，Chrome，safari 6+ 等。而sencha，sencha touch的另一个产品用于移动应用程序。
Ext JS基于MVC / MVVM架构。 最新版本的Ext JS 6是一个单一的平台，可以用于桌面和移动应用程序，而不需要为不同的平台提供不同的代码。
Ext JS的第一个版本是由Jack Slocum在2006年开发的。它是一组实用程序类，它是YUI的扩展。 他将该库命名为YUI-ext。
Ext JS 2.0版于2007年发布。此版本具有用于桌面应用程序的新API文档，但功能有限。 此版本与以前版本的Ext JS没有向后兼容性。
Ext JS版本3.0是在2009年发布的。这个版本添加了新的功能作为图表和列表视图，但是以速度为代价。 它向后兼容2.0版本。
Ext JS 3发布后，Ext JS的开发人员面临着提高速度的主要挑战。 Ext JS 4.0版本发布于2011年。它具有完整的修订结构，其后是MVC架构和一个快速的应用程序。
Ext JS版本5.0是在2014年发布的。这个版本的主要变化是将MVC架构改为MVVM架构。 它包括在启用触摸的设备上构建桌面应用程序的功能，双向数据绑定，响应式布局和更多功能。
Ext JS 6合并了Ext JS（用于桌面应用程序）和sencha touch（用于移动应用程序）框架。
这些是Ext JS的突出特性
Sencha Ext JS是业务级Web应用程序开发的领先标准。 Ext JS提供了为桌面和平板电脑构建强大应用程序所需的工具。
Sencha IDE Plugins
Sencha Inspector
Sencha Inspector是一个调试工具，帮助调试器调试任何问题，同时开发。尝试在线选项
我们已经在线设置了ExtJS编程环境，以便您可以在线编译和执行所有可用的示例。 它给你对你正在阅读的信心，并使您能够使用不同的选项验证程序。 随意修改任何示例并在线执行。
请尝试以下示例:
<!DOCTYPE html><html> <head> <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet"> <script src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script type="text/javascript"> Ext.onReady(function() { Ext.create('Ext.Panel', { renderTo: 'helloWorldPanel', height: 100, width: 200, title: 'Hello world', html: 'First Ext JS Hello World Program' }); }); </script> </head> <body> <div id="helloWorldPanel"></div> </body></html>
本节将指导您如何在机器上下载和设置Ext JS。 请按照步骤设置环境。
从sencha https://www.sencha.com下载Ext JS库文件的试用版本 。 您将从您的注册邮件ID上的网站获取试用版，这将是一个名为ext-6.0.1-trial的压缩文件夹。
解压缩文件夹，你会发现各种JavaScript和CSS文件，你将包括在我们的应用程序。 主要包括以下文件:
您可以在文件夹 ext-6.0.1-trial ext-6.0.1 build下找到的（1）Javascript文件 JS文件是:
| 文件和描述 |
|---|
| ext.js 这是核心文件，其中包含运行应用程序的所有功能。 |
| ext-all.js 此文件包含在文件中没有注释的所有缩小的代码 |
| ext-all-debug.js 这是ext-all.js的未分级版本，用于调试目的。 |
| ext-all-dev.js 此文件也未分级，用于开发目的，因为它包含所有注释和控制台日志，以检查任何错误/问题 |
| ext-dev.js 这个文件用于生产目的，主要是因为它比任何其他小得多。 |
您可以将这些文件添加到您的项目JS文件夹，或者您可以给出文件驻留在系统中的直接路径。
（2）CSS文件有多个基于主题的文件，您可以在文件夹 ext-6.0.1-trial ext-6.0.1 build classic theme-classic resources theme-classic-all.css
如果我们要使用桌面应用程序，那么我们可以使用文件夹 ext-6.0.1-trial ext-6.0.1 build classic下的经典主题
如果我们要使用移动应用程序，那么我们将使用现代主题，可以在文件夹 ext-6.0.1-trial ext-6.0.1 build modern下找到
这些库文件将添加到Ext JS应用程序中，如下所示:
<html> <head> <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet"> <script src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script type ="text/javascript" src = "app.js" > </script> </head></html>您将在app.js文件中保留ExtJS应用程序代码。
CDN是内容交付网络，您不需要下载Ext JS库文件，您可以直接添加ExtJS的CDN链接到您的程序，如下所示:
<html> <head> <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet"> <script src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script type ="text/javascript" src = "app.js" > </script> </head></html>注：本手册里所有的在线运行代码都使用了如上的CDN，在某些情况下CDN加载较慢会导致在线运行代码的效果展示较慢或者不展示（如果CDN失效的话），这里小编建议使用本地环境开发避免这种情况！如果发现CDN失效，请及时通过纠错进行反馈！
因为它是一个用于开发Web应用程序的JavaScript框架，在我们的项目中，我们将有HTML，JS文件和编写您的Ext JS程序，您将需要一个文本编辑器。 市场上甚至有多个IDE可用。 但现在，您可以考虑以下之一：
记事本：在Windows机器上，您可以使用任何简单的文本编辑器，如记事本（推荐用于本教程），记事本++，sublime。
Eclipse：是由Eclipse开源社区开发的一个IDE，可以从
http://www.eclipse.org/下载。
Ext JS支持跨浏览器兼容性，它支持所有主要浏览器：
您可以使用任何浏览器运行Ext JS应用程序。
命名约定是标识符要遵循的一组规则。
它使得代码对于其他程序员也更可读和可理解。
Ext JS中的命名约定遵循标准JavaScript约定，这不是强制性的，而是遵循的良好做法。
它应该遵循camel case语法命名类，方法，变量和属性。
如果name与两个单词组合，则第二个单词将始终以大写字母开头。 doLayout（），StudentForm，firstName等。
| 名称 | 惯例 |
|---|---|
| Class Name | 它应该以大写字母开头，然后是camel case E.g. StudentClass |
| Method Name | 它应该以小写字母开头，然后是camel case E.g. doLayout() |
| Variable Name | 它应该以小写字母开头，然后是camel case E.g. firstName |
| Constant Name | 它应该是只有大写，例如 E.g. COUNT, MAX_VALUE |
| Property Name | 它应该以小写字母开头，然后是camel case e.g. enableColumnResize = true |
Ext JS遵循MVC / MVVM架构。
MVC - 模型视图控制器体系结构（版本4）
MVVM - 模型视图Viewmodel（版本5）
这种架构不是强制要求的，但最好的做法是遵循这种结构，使您的代码高度可维护和组织。
----------src----------resources-------------------CSS files-------------------Images----------JavaScript--------------------App Folder-------------------------------Controller------------------------------------Contoller.js-------------------------------Model------------------------------------Model.js-------------------------------Store------------------------------------Store.js-------------------------------View------------------------------------View.js-------------------------------Utils------------------------------------Utils.js--------------------------------app.js-----------HTML files
Ext JS应用程序文件夹将驻留在您的项目的JavaScript文件夹中。
应用程序将包含控制器，视图，模型，存储，实用程序文件与app.js.
app.js:程式流程开始的主要入口，应该使用< script> 标签。 应用程序调用应用程序的控制器的其余功能。
Controller.js:它是Ext JS MVC架构的控制器文件。 这包含应用程序的所有控制，事件侦听器的最大功能的代码。 它具有为该应用程序中使用的所有其他文件定义的路径，例如store，view，model，require，mixins。
View.js:它包含应用程序的界面部分，显示给用户。 Ext JS使用各种UI丰富的视图，可以根据需要在这里扩展和自定义。
Store.js:它包含本地缓存的数据，它将在模型对象的帮助下在视图上呈现。 存储使用代理获取数据，代理具有为服务定义的路径以获取后端数据。
Model.js:它包含绑定要查看的商店数据的对象。 它有后端数据对象到视图dataIndex的映射。 在store的帮助下获取数据。
Utils.js:它不包括在MVC架构中，但是最好的做法是使代码清晰，不太复杂，更加可读。 我们可以在这个文件中编写方法，并在控制器或视图渲染器中调用它们。 这对代码可重用性目的也很有帮助。
在MVVM架构中，控制器被ViewModel替代。
ViewModel:在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者。ViewModel是连接View和Model的中间件。
例如，如果我们在UI中的两三个地方使用一个模型对象，如果我们在UI的一个地方更改值，其他地方的UI的值也会相应的做出改变。
它使开发人员更加轻松和简单，因为不需要额外的编码绑定数据。
本章列出了在Ext JS中首先编写Hello World程序的步骤:
在我们选择的编辑器中创建index.htm页面。 将所需的库文件包含在html页面的head部分，如下所述:
index.htm
<!DOCTYPE html><html> <head> <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="external nofollow" target="_blank" rel="stylesheet"> <script src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" ></script> <script type="text/javascript"> Ext.onReady(function() { Ext.create('Ext.Panel', { renderTo: 'helloWorldPanel', height: 200, width: 600, title: 'Hello world', html: 'First Ext JS Hello World Program' }); }); </script> </head> <body> <div id="helloWorldPanel" /> </body></html>Ext.onReady（）方法将在Ext JS准备好渲染Ext JS元素时调用。
Ext.create（）方法用于在Ext JS中创建对象，这里我们创建一个简单的面板类Ext.Panel的对象。
Ext.Panel是Ext JS中用于创建面板的预定义类。
每个Ext JS类都有不同的属性来执行一些基本的功能。
Ext.Panel类有以下各种属性:
renderTo 是此面板必须呈现的元素。 'helloWorldPanel'是Index.html文件中的div id。
Height 和宽度属性用于提供面板的自定义尺寸。
Title 属性是为面板提供标题。
Html 属性是要在面板中显示的html内容。
在标准浏览器中打开index.htm文件，您将在浏览器上获得以下输出。
Ext JS 是一个 JavaScript 框架，它具有面向对象编程的功能。
Ext 是封装 Ext JS 中所有类的命名空间。
在 Ext JS 中定义类
Ext 提供了 300 多个类，我们可以用于各种功能。
Ext.define（）用于在 Ext JS 中定义类。
语法:
Ext.define(class name, class members/properties, callback function);类名称是根据应用程序结构的类名称。 appName.folderName.ClassName
studentApp.view.StudentView。
类属性/成员 - 定义类的行为。
回调函数是可选的。 当类正确加载时，会调用它。
Ext JS 类定义示例
Ext.define(studentApp.view.StudentDeatilsGrid, { extend : 'Ext.grid.GridPanel', id : 'studentsDetailsGrid', store : 'StudentsDetailsGridStore', renderTo : 'studentsDetailsRenderDiv', layout : 'fit', columns : [{ text : 'Student Name', dataIndex : 'studentName' },{ text : 'ID', dataIndex : 'studentId' },{ text : 'Department', dataIndex : 'department' }]});创建对象
像其他基于 OOPS 的语言一样，我们也可以在 Ext JS 中创建对象。
不同的方式创建对象在 Ext JS。
使用 new 关键字:
var studentObject = new student();studentObject.getStudentName();使用 Ext.create（）:
Ext.create('Ext.Panel', { renderTo : 'helloWorldPanel', height : 100, width : 100, title : 'Hello world', html : 'First Ext JS Hello World Program' });Ext JS 中的继承
继承是将类 A 中定义的功能用于类 B 的原理。
在 Ext JS 继承可以使用两种方法 。
Ext.extend:
Ext.define(studentApp.view.StudentDetailsGrid, { extend : 'Ext.grid.GridPanel', ...});这里我们的自定义类 StudentDetailsGrid 使用 Ext JS 类 GridPanel 的基本功能。
使用 Mixins:
Mixins 是在没有扩展的情况下在类 B 中使用类 A 的不同方式。
mixins : { commons : 'DepartmentApp.utils.DepartmentUtils'},Mixins 我们添加在控制器中，我们声明所有其他类，如存储，视图等。在这种方式，我们可以调用 DepartmentUtils 类，并在控制器或在这个应用程序中使用其功能。
Ext JS中的容器是我们可以添加其他容器或子组件的组件。
这些容器可以具有多个布局以将部件布置在容器中。
我们可以从容器和其子元素添加或删除组件。
Ext.container.Container是Ext JS中所有容器的基类。
| 编号 | 描述 |
|---|---|
| 1 | Components inside Container 此示例显示如何在容器内定义组件 |
| 2 | Container inside container 此示例显示如何使用其他组件定义容器内的容器 |
有各种类型的容器Ext.panel.Panel，Ext.form.Panel，Ext.tab.Panel和Ext.container.Viewport是Ext JS中经常使用的容器。 下面是显示如何使用这些容器的示例。
| 编号 | 容器类型和说明 |
|---|---|
| 1 | Ext.panel.Panel 此示例显示一个Ext.panel.Panel容器 |
| 2 | Ext.form.Panel 此示例显示一个Ext.form.Panel容器 |
| 3 | Ext.tab.Panel 此示例显示一个Ext.tab.Panel容器 |
| 4 | Ext.container.Viewport 此示例显示一个Ext.container.Viewport容器 |
布局是元素在容器中排列的方式。 这可以是水平的，垂直的或任何其他。 Ext JS在其库中定义了不同的布局，但我们也可以编写自定义布局。
| 编号 | 布局和描述 |
|---|---|
| 1 | Absolute 此布局允许使用容器中的XY坐标定位项目。 |
| 2 | Accordion 此布局允许将所有项目以堆栈方式（一个在另一个之上）放在容器内。 |
| 3 | Anchor 此布局为用户提供了相对于容器大小给出每个元素的大小的特权。 |
| 4 | Border 在此布局中，各种面板嵌套并由边界分隔。 |
| 5 | Auto 这是默认布局决定元素的布局，基于元素的数量。 |
| 6 | Card(TabPanel) 此布局以制表符方式排列不同的组件。 选项卡将显示在容器的顶部。每次只有一个选项卡可见，每个选项卡被视为不同的组件。 |
| 7 | Card(Wizard) 在这个布局中，每次元素来到完整的容器空间。 向导中将有一个底部工具栏用于导航。 |
| 8 | Column 此布局是要在容器中显示多个列。 我们可以定义列的固定宽度或百分比宽度。 百分比宽度将基于容器的完整大小计算。 |
| 9 | Fit 在此布局中，容器用单个面板填充，并且当没有与布局相关的特定要求时，则使用该布局。 |
| 10 | Table 由于名称意味着此布局以HTML表格式在容器中排列组件。 |
| 11 | vBox 这种布局允许元素以垂直方式分布。 这是最常用的布局之一。 |
| 12 | hBox 这种布局允许元素以水平方式分布。 |
ExtJS UI由一个或多个名为Components.Ext的widget组成.JS具有定义的各种UI组件，可以根据您的要求进行定制。
| 编号 | 方法＆说明 |
|---|---|
| 1 | Grid 网格组件可用于以表格格式显示数据。 |
| 2 | Form 窗体小部件是从用户获取数据。 |
| 3 | Message Box 消息框基本上用于以警报框的形式显示数据。 |
| 4 | Chart 图表用于以图形格式表示数据。 |
| 5 | Tool tip 任何事件发生时，工具提示用于显示一些基本信息。 |
| 6 | Window 这个UI部件是创建一个窗口，当任何事件发生时应该弹出。 |
| 7 | HTML editor HTML编辑器是非常有用的UI组件之一，用于对用户输入的字体，颜色，大小等数据进行样式设置。 |
| 8 | Progress bar 显示后端工作的进度。 |
拖放功能是为使开发人员轻松工作而添加的强大功能之一。拖动操作基本上是在某些UI元素上的点击手势，同时按住鼠标按钮并移动鼠标。 在拖动操作后释放鼠标按钮时，会发生放置操作。
将类拖放到可拖动目标。
var dd = Ext.create('Ext.dd.DD', el, 'imagesDDGroup', { isTarget: false });添加拖放目标类到drappable目标
var mainTarget = Ext.create('Ext.dd.DDTarget', 'mainRoom', 'imagesDDGroup', { ignoreSelf: false });| 方法 | 描述 |
| startDrag(int x, int y) | 开始拖放事件，参数是x和y的坐标值。 |
| onDrag(Event t) | 正在拖放事件，当拖放一个对象时触发，参数是mousemove鼠标移动事件。 |
| onDragDrop(Event e, String|DragDrop[] id) | 正在放下事件，当一个对象放到另一个DragDrop对象上时触发，第一个参数是mouseup鼠标放开事件，第二个参数表示drop的目标位置。如果是在POINT模式下，就会传入目标元素的id；如果是在INTERSECT模式下，则会传入放下目标的拖放对象数组。 |
| endDrag(Event e) | 拖放结束事件，在拖放操作结束之后触发，参数是mouseup鼠标放开事件。 |
| onDragEnter(Event e, String|DragDrop[] id) | 进入drop区域事件，拖放过程中首次触碰到drop区域时触发。第一个参数是mousemove鼠标移动事件，第二个参数表示drop目标位置。如果是在POINT模式下，就会传入目标元素的id；如果是在INTERSECT模式下，则会传入放下目标的拖放对象数组。 |
| onDragOut(Event e, String|DragDrop[] id) | 离开drop区域事件，拖放过程中从drop区域离开时触发。第一个参数是mousemove鼠标移动事件，第二个参数表示drop目标位置。如果是在POINT模式下，就会传入目标元素的id；如果是在INTERSECT模式下，则会传入放下目标的拖放对象数组。 |
| onDragOver(Event e, String|DragDrop[] id) | 在drop区域中拖放移动事件，当在drop区域拖放移动时触发。第一个参数是mousemove鼠标移动事件，第二个参数表示drop目标位置。如果是在POINT模式下，就会传入目标元素的id；如果是在INTERSECT模式下，则会传入放下目标的拖放对象数组。 |
| onInvalidDrop(Event e) | 不能drop事件，不在drop区域移动时触发，参数是mousemove鼠标移动事件。 |
| onMouseDown(Event e) | 鼠标按下事件，参数是mousedown鼠标按下事件。 |
| onMouseUp(Event e) | 鼠标放开事件，参数是mouseup鼠标放开事件。 |
下面是一个简单的例子
<!DOCTYPE html><html><head> <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="external nofollow" target="_blank" rel="stylesheet"> <script src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" ></script> <script type="text/javascript"> Ext.application({ launch: function() { var images = Ext.get('images').select('img'); Ext.each(images.elements, function(el) { var dd = Ext.create('Ext.dd.DD', el, 'imagesDDGroup', { isTarget: false }); }); } }); var mainTarget = Ext.create('Ext.dd.DDTarget', 'mainRoom', 'imagesDDGroup', { ignoreSelf: false }); </script> <style> #content{ width:600px; height:400px; padding:10px; border:1px solid #000; } #images{ float:left; width:40%; height:100%; border:1px solid Black; background-color:rgba(222, 222, 222, 1.0); } #mainRoom{ float:left; width:55%; height:100%; margin-left:15px; border:1px solid Black; background-color:rgba(222, 222, 222, 1.0); } .image{ width:64px; height:64px; margin:10px; cursor:pointer; border:1px solid Black; display: inline-block; } </style></head><body> <div id="content"> <div id="images"> <img src = "/extjs/images/1.jpg" class = "image" /> <img src = "/extjs/images/2.jpg" class = "image" /> <img src = "/extjs/images/3.jpg" class = "image" /> <img src = "/extjs/images/4.jpg" class = "image" /> <img src = "/extjs/images/5.jpg" class = "image" /> <img src = "/extjs/images/6.jpg" class = "image" /> <img src = "/extjs/images/7.jpg" class = "image" /> <img src = "/extjs/images/8.jpg" class = "image" /> </div> <div id="mainRoom"></div> </div></body></html>
在在线环境下没有配置图片的正确路径，所以图片不能正常显示，但这并不影响功能的展示。
在Extjs的拖放的帮助下，我们可以将数据从网格移动到网格和网格到窗体。下面是在网格和窗体之间移动数据的例子。
Ext.js提供了许多要在您的应用程序中使用的主题。 你可以添加不同的主题的经典主题，看到输出的差异，这是简单地通过替换主题CSS文件，如下所述。
考虑你最初的Hello World应用程序。 从应用程序中删除以下CSS:
https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css添加以下CSS以使用海王星主题:
https://cdn.bootcss.com/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css要查看效果，请尝试以下程序:
<!DOCTYPE html><html> <head> <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" rel="external nofollow" target="_blank" rel="stylesheet"> <script src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script type="text/javascript"> Ext.onReady(function() { Ext.create('Ext.Panel', { renderTo: 'helloWorldPanel', height: 200, width: 600, title: 'Hello world', html: 'First Ext JS Hello World Program' }); }); </script> </head> <body> <div id="helloWorldPanel" /> </body></html>这会产生以下结果:
考虑你最初的Hello World应用程序。 从应用程序中删除以下CSS:
https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css添加以下CSS以使用海王星主题:
https://cdn.bootcss.com/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css要查看效果，请尝试以下程序:
<!DOCTYPE html><html> <head> <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css" rel="external nofollow" target="_blank" rel="stylesheet" /> <script src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script type="text/javascript"> Ext.onReady(function() { Ext.create('Ext.Panel', { renderTo: 'helloWorldPanel', height: 200, width: 600, title: 'Hello world', html: 'First Ext JS Hello World Program' }); }); </script> </head> <body> <div id="helloWorldPanel" /> </body></html>这会产生以下结果:
考虑你最初的Hello World应用程序。 从应用程序中删除以下CSS:
https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css添加以下CSS以使用Triton主题:
https://cdn.bootcss.com/extjs/6.0.0/classic/theme-triton/resources/theme-triton-all.css要查看效果，请尝试以下程序:
<!DOCTYPE html><html> <head> <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-triton/resources/theme-triton-all.css" rel="external nofollow" target="_blank" rel="stylesheet"> <script src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script type="text/javascript"> Ext.onReady(function() { Ext.create('Ext.Panel', { renderTo: 'helloWorldPanel', height: 200, width: 600, title: 'Hello world', html: 'First Ext JS Hello World Program' }); }); </script> </head> <body> <div id="helloWorldPanel" /> </body></html>这会产生以下结果:
考虑你最初的Hello World应用程序。 从应用程序中删除以下CSS:
https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css添加以下CSS以使用灰色主题:
https://cdn.bootcss.com/extjs/6.0.0/classic/theme-gray/resources/theme-gray-all.css要查看效果，请尝试以下程序:
<!DOCTYPE html><html> <head> <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-gray/resources/theme-gray-all.css" rel="external nofollow" target="_blank" rel="stylesheet" /> <script type="text/javascript" src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script type="text/javascript"> Ext.onReady(function() { Ext.create('Ext.Panel', { renderTo: 'helloWorldPanel', height: 200, width: 600, title: 'Hello world', html: 'First Ext JS Hello World Program' }); }); </script> </head> <body> <div id="helloWorldPanel" /> </body></html>这会产生以下结果:
事件是在类发生的时候触发的。 例如，当一个按钮被点击或元素被渲染之前/之后。
Ext JS提供了用于在Ext JS文件中编写事件和自定义事件的侦听器属性。
在Ext JS中编写侦听器
我们将通过在面板中添加listen属性来将监听器添加到上一个程序中，如下所示:
<!DOCTYPE html><html> <head> <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet" /> <script type="text/javascript" src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script type="text/javascript"> Ext.onReady(function(){ Ext.create('Ext.Button', { renderTo: Ext.getElementById('helloWorldPanel'), text: 'My Button', listeners: { click: function() { Ext.MessageBox.alert('Alert box', 'Button is clicked'); } } }); }); </script> </head> <body> <p> Please click the button to see event listener </p> <div id = 'helloWorldPanel' /> <!-- panel will be rendered here-- > </body></html>这会产生以下结果:
这样我们可以在listeners属性中写多个事件。
同一个侦听器中的多个事件
<!DOCTYPE html><html> <head> <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet" /> <script type="text/javascript" src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script type="text/javascript"> Ext.onReady(function(){ Ext.get('tag2').hide() Ext.create('Ext.Button', { renderTo: Ext.getElementById('helloWorldPanel'), text: 'My Button', listeners: { click: function() { this.hide(); }, hide: function() { Ext.get('tag1').hide(); Ext.get('tag2').show(); } } }); }); </script> </head> <body> <div id = "tag1">Please click the button to see event listener.</div> <div id = "tag2">The button was clicked and now it is hidden.</div> <div id = 'helloWorldPanel' /> <!-- panel will be rendered here-- > </body></html>运行效果如下：
在前面的写事件的方法中，我们在创建元素时在侦听器中写入事件。
也可以在之后的代码中使用附加事件监听的方式:
<!DOCTYPE html><html> <head> <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet" /> <script type="text/javascript" src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script type="text/javascript"> Ext.onReady(function(){ var button = Ext.create('Ext.Button', { renderTo: Ext.getElementById('helloWorldPanel'), text: 'My Button' }); // This way we can attach event to the button after the button is created. button.on('click', function() { Ext.MessageBox.alert('Alert box', 'Button is clicked'); }); }); </script> </head> <body> <p> Please click the button to see event listener </p> <div id = 'helloWorldPanel' /> <!-- panel will be rendered here-- > </body></html>运行结果如下：
我们可以在ext JS中编写自定义事件，并使用fireEvent方法触发事件，下面的示例解释了如何编写自定义事件。
<!DOCTYPE html><html> <head> <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet" /> <script type="text/javascript" src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script type="text/javascript"> Ext.onReady(function(){ var button = Ext.create('Ext.Button', { renderTo: Ext.getElementById('helloWorldPanel'), text: 'My Button', listeners: { myEvent: function(button) { Ext.MessageBox.alert('Alert box', 'My custom event is called'); } } }); Ext.defer(function() { button.fireEvent('myEvent'); }, 5000); }); </script> </head> <body> <p> The event will be called after 5 seconds when the page is loaded. </p> <div id = 'helloWorldPanel' /> <!-- panel will be rendered here-- > </body></html>运行结果如下（为了节省展示时间，图中效果使用2秒的定时器）：
一旦页面被加载并且文档准备就绪，UI页面与按钮将出现，并且我们在5秒后触发事件文档准备就绪，警报框将在5秒后出现。
这里我们写了自定义事件'myEvent'，我们将事件触发为button.fireEvent（eventName）
数据包用于加载和保存应用程序中的所有数据。
数据包有许多类，但最重要的类是:
Ext.define('StudentDataModel', { extend: 'Ext.data.Model', fields: [ {name: 'name', mapping : 'name'}, {name: 'age', mapping : 'age'}, {name: 'marks', mapping : 'marks'} ] });这里的名称应该与我们在视图中声明的dataIndex相同，并且映射应该匹配使用store从数据库获取的静态或动态数据。
store的基类是Ext.data.Store。 它包含本地缓存的数据，该数据将在模型对象的帮助下在视图上呈现。 存储使用代理获取数据，代理具有为服务定义的路径以获取后端数据。
存储数据可以从静态或动态两种方式获取。
对于静态存储，我们将存储在存储中的所有数据如下:
Ext.create('Ext.data.Store', { model: 'StudentDataModel', data: [ { name : "Asha", age : "16", marks : "90" }, { name : "Vinit", age : "18", marks : "95" }, { name : "Anand", age : "20", marks : "68" }, { name : "Niharika", age : "21", marks : "86" }, { name : "Manali", age : "22", marks : "57" } ]; });可以使用代理获取动态数据。 我们可以让代理可以从Ajax，Rest和Json获取数据。
代理的基类是Ext.data.proxy.Proxy。 代理由模型和商店用于处理模型数据的加载和保存。
有两种类型的代理:
客户端代理包括使用HTML5本地存储的内存和本地存储。
服务器代理使用Ajax，Json数据和Rest服务处理来自远程服务器的数据。
Ext.create('Ext.data.Store', { model: 'StudentDataModel', proxy : { type : 'rest', actionMethods : { read : 'POST' // Get or Post type based on requirement }, url : 'restUrlPathOrJsonFilePath', // here we have to include the rest URL path which fetches data from database or Json file path where the data is stored reader: { type : 'json', // the type of data which is fetched is of JSON type root : 'data' }, }});Extjs提供了使用不同字体包的功能。 字体包用于为包中可用的图标添加不同的类。
ExtJS的新主题Triton有内置的字体家族字体awesome包含在框架本身，所以我们不需要任何明确的要求的字体真棒样式表。
下面是在Triton主题中使用Font-Awesome类的示例。
当我们使用除了Triton之外的任何其他主题时，我们需要明确地要求或添加样式表以用于font-awesome。
下面是使用没有Triton主题的Font-Awesome类的示例。
Ext.js字体 Awesome正常主题（除了Triton主题）
Font-pictos不包括在EXTJS的框架中，所以我们必须首先要求它，只有sencha的许可用户才能使用font-pictos。
添加字体pictos的步骤
1.需要font-pictos类:
"requires": ["font-pictos"]2.现在将pictos类添加为:
iconCls: 'pictos pictos-home'应用程序样式是指用户调整组件的外观和感觉。 这些调整可能包括:颜色，颜色渐变，字体，边距/填充等。Ext JS 6有一种新的应用程序样式。
它使用SCSS的样式。 SCSS是编写CSS代码的更动态的方式。 我们可以在这个帮助下在我们的样式表中写入变量。 但是浏览器不能理解SCSS它只能理解CSS，所以所有的SCSS文件应该被编译成CSS生产就绪代码。
这就是为什么SCSS文件被称为预处理器文件。 在Extjs中，编译通过Sencha CMD工具完成。
Sencha CMD手动编译它一次使用命令如下:
sencha应用程序构建[开发]
全局CSS是主要的CSS文件，它具有所有的SCSS变量与ExtJS相关联，我们可以在我们的应用程序中使用它来定制我们的主题，根据我们的需要提供不同的价值。
以下是Extjs中的Global_CSS中提供的一些CSS变量:
| 编号 | 变量＆描述 |
|---|---|
| 1 | $ base-color $ base-color:color（例如$ base-color:＃808080） 这个基色在整个主题中使用。 |
| 2 | $ base-gradient $ base-gradient:string（例如$ base-gradient:'matte'） 在整个主题中使用的基本渐变。 |
| 3 | $ body-background-color $ body-background-color:color（例如$ body-background-color:＃808080） 应用到body元素的背景颜色。 如果设置为transparent或'none'，将不会在body元素上设置背景颜色样式 |
| 4 | $ color $ color:color（例如$ color:＃808080） 要在整个主题中使用的默认文本颜色 |
| 5 | $ font-family $ font-family:string（例如$ font-family:arial） 在整个主题中使用的默认font-family。 |
| 6 | $ font-size $ font-size:number（例如$ font-size:9px） 要在整个主题中使用的默认字体大小。 |
| 7 | $ font-weight $ font-weight:string / number（例如$ font-weight:normal） 在整个主题中使用的默认字体权重 |
| 8 | $ font-weight-bold $ font-weight-bold:string / number（例如$ font-weight-bold:bold） 粗体字体的默认字体粗细在整个主题中使用 |
| 9 | $ include-chrome $ include-chrome:boolean（例如$ include-chrome:true） True以包含Chrome特定规则 |
| 10 | $ include-ff $ include-ff:boolean（例如$ include-ff:true） True包含Firefox特定规则 |
| 11 | $ include-ie $ include-ie:boolean（例如$ include-ie:true） True包括IE9和更低版本的Internet Explorer特定规则 |
| 12 | $ include-opera $ include-opera:boolean（例如$ include-opera:true） True包含Opera特定规则 |
| 13 | $ include-safari $ include-safari:boolean（例如$ include-safari:true） True包含Opera特定规则 |
| 14 | $ include-webkit $ include-webkit:boolean（例如$ include-webkit:true） True包括Webkit特定的规则 |
ExtJS中的绘图包使您能绘制通用图形。 这可以用于在所有浏览器和移动设备上工作的图形。
| 编号 | 绘图 |
|---|---|
| 1 | Circle 此图形用于创建圆形。 |
| 2 | Rectangle 此图形用于创建矩形形状。 |
| 3 | Arc 此图形用于创建弧形。 |
| 4 | Ellipse 此图形用于创建椭圆形状。 |
| 5 | EllipticalArc 此图形用于创建椭圆弧形。 |
| 6 | Image 此图形用于向应用程序添加图像。 |
| 7 | Path 此图形用于创建自由路径。 |
| 8 | Text 此图形用于向应用程序添加任何文本。 |
| 9 | Translate after render 此属性用于在呈现图形后在容器中移动起点。 它可以与任何图形一起使用。 |
| 10 | Rotation 此属性用于向添加的图形添加旋转。 它可以与任何图形一起使用。 |
| 11 | Square 此图形用于创建正方形。 |
全世界的用户使用的语言都是不同的，最好用他们理解和喜欢的语言来沟通用户。 Extjs本地化包支持超过40种语言，如德语，法语，韩语，中文等。
在ExtJs中实现区域设置非常简单。您将在ext-locale软件包的覆盖文件夹中找到所有捆绑的区域设置文件。 语言环境文件只是覆盖，它指示Ext JS替换某些组件的默认英语值。
这个程序是要显示不同区域设置的月份来看效果，试试下面的程序:
<!DOCTYPE html><html> <head> <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet" /> <script type="text/javascript" src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" rel="external nofollow" ></script> <script type="text/javascript" src="https://cdn.bootcss.com/extjs/6.0.0/classic/locale/locale-zh_CN.js" rel="external nofollow" ></script> <script type="text/javascript"> Ext.onReady(function() { var monthArray = Ext.Array.map(Ext.Date.monthNames, function (e) { return [e]; }); var ds = Ext.create('Ext.data.Store', { fields: ['month'], remoteSort: true, pageSize: 6, proxy: { type: 'memory', enablePaging: true, data: monthArray, reader: {type: 'array'} } }); Ext.create('Ext.grid.Panel', { renderTo: 'grid', id : 'gridId', width: 600, height: 200, title:'Month Browser', columns:[{ text: 'Month of the year', dataIndex: 'month', width: 300 }], store: ds, bbar: Ext.create('Ext.toolbar.Paging', { pageSize: 6, store: ds, displayInfo: true }) }); Ext.getCmp('gridId').getStore().load(); }); </script> </head> <body> <div id="grid" /> </body></html>这会产生以下结果:
描述:
对于使用不同的语言环境，除了英语，我们需要在我们的程序中添加区域设置特定的文件，如果需要设置为法语，可以使用
https://cdn.bootcss.com/extjs/6.0.0/classic/locale/locale-fr .js
。 您可以对不同的语言使用不同的区域设置，例如
https://cdn.bootcss.com/extjs/6.0.0/classic/locale/locale-ko.js等。
这个程序是显示日期选择器在韩国语区域查看效果，尝试以下程序:
<!DOCTYPE html><html> <head> <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet" /> <script type="text/javascript" src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" rel="external nofollow" ></script> <script type="text/javascript" src="https://cdn.bootcss.com/extjs/6.0.0/classic/locale/locale-ko.js" rel="external nofollow" ></script> <script type="text/javascript"> Ext.onReady(function() { Ext.create('Ext.picker.Date', { renderTo: 'datePicker' }); }); </script> </head> <body> <div id="datePicker" /> </body></html>这会产生以下结果:
下面是ExtJS中可用的几个区域设置和要更改的主文件区域设置URL。
| 语言环境 | 语言 | 区域设置URL |
|---|---|---|
| ko | Korean | https://cdn.bootcss.com/extjs/6.0.0/classic/locale/locale-ko.js |
| fr | French | https://cdn.bootcss.com/extjs/6.0.0/classic/locale/locale-fa.js |
| es | Spanish | https://cdn.bootcss.com/extjs/6.0.0/classic/locale/locale-es.js |
| ja | Japanese | https://cdn.bootcss.com/extjs/6.0.0/classic/locale/locale-ja.js |
| it | Italian | https://cdn.bootcss.com/extjs/6.0.0/classic/locale/locale-it.js |
| ru | Russian | https://cdn.bootcss.com/extjs/6.0.0/classic/locale/locale-ru.js |
| zh_CN | 简体中文 | https://cdn.bootcss.com/extjs/6.0.0/classic/locale/locale-zh_CN.js |
一般来说，可访问性意味着可用性，内容可访问意味着内容可用。
在软件术语中，应用程序可访问意味着应用程序可用于所有人。 这里所指的是残疾人，视障者一次或使用屏幕阅读器的人，使用计算机或那些喜欢用键盘而不是使用鼠标的所有导航。
可访问的应用程序称为ARIA（可访问富互联网应用程序）。
Ext JS旨在牢记这一点，它应该与所有键盘导航工作。它已内置标签索引和聚焦能力，它始终是默认开启，所以我们不需要添加任何属性来启用此功能。
此功能允许所有键盘启用的组件在标签页插入时与用户交互。 像我们可以使用tab键移动到下一个组件，而不是鼠标点击该组件。 同样，我们可以tab+shift键移动到上一个组件，然后输入键盘进行点击等。
当使用tab按键切换替代鼠标点击时，聚焦样式将内置在Extjs中。
下面的示例显示了当焦点随着tab的使用而改变时如何改变样式。
<!DOCTYPE html><html> <head> <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css" rel="external nofollow" target="_blank" rel="stylesheet" /> <script type="text/javascript" src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" rel="external nofollow" ></script> <script type="text/javascript"> Ext.onReady(function(){ Ext.create('Ext.Button', { renderTo: Ext.getElementById('button1'), text: 'Button1', listeners: { click: function() { Ext.MessageBox.alert('Alert box', 'Button 1 is clicked'); } } }); Ext.create('Ext.Button', { renderTo: Ext.getElementById('button2'), text: 'Button2', listeners: { click: function() { Ext.MessageBox.alert('Alert box', 'Button 2 is clicked'); } } }); Ext.create('Ext.Button', { renderTo: Ext.getElementById('button3'), text: 'Button3', listeners: { click: function() { Ext.MessageBox.alert('Alert box', 'Button 3 is clicked'); } } }); }); </script> </head> <body> <p>Please click the button to see event listener:</p> <span id="button3"/> <span id="button2"/> <span id="button1"/> </body></html>运行结果如下所示（使用tab键可以切换到下一个可聚焦项，使用shift + tab键可以切换到上一个可聚焦项）：
ExtJS为视障人士提供ARIA(可访问的富internet应用程序)主题。
这里的例子显示的ARIA题更容易为视障者阅读（对于部分颜色弱视或者色盲的用户优化）。
下面的示例显示了ARIA主题:
<!DOCTYPE html><html> <head> <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-aria/resources/theme-aria-all.css" rel="external nofollow" target="_blank" rel="stylesheet" /> <script type="text/javascript" src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" rel="external nofollow" ></script> <script type="text/javascript"> Ext.require([ 'Ext.grid.*', 'Ext.data.*' ]); // Creation of data model Ext.define('StudentDataModel', { extend: 'Ext.data.Model', fields: [ {name: 'name', mapping : 'name'}, {name: 'age', mapping : 'age'}, {name: 'marks', mapping : 'marks'} ] }); Ext.onReady(function(){ // Store data var myData = [ { name : "Asha", age : "16", marks : "90" }, { name : "Vinit", age : "18", marks : "95" }, { name : "Anand", age : "20", marks : "68" }, { name : "Niharika", age : "21", marks : "86" }, { name : "Manali", age : "22", marks : "57" } ]; // Creation of first grid store var firstGridStore = Ext.create('Ext.data.Store', { model: 'StudentDataModel', data: myData }); // Creation of first grid var firstGrid = Ext.create('Ext.grid.Panel', { store : firstGridStore, columns : [{ header: "Student Name", dataIndex: 'name', id : 'name', flex: 1, sortable: true },{ header: "Age", dataIndex: 'age', flex: .5, sortable: true },{ header: "Marks", dataIndex: 'marks', flex: .5, sortable: true }], stripeRows : true, title : 'First Grid', margins : '0 2 0 0' }); // Creation of a panel to show both the grids. var displayPanel = Ext.create('Ext.Panel', { width : 600, height : 200, layout : { type: 'hbox', align: 'stretch', padding: 5 }, renderTo : 'panel', defaults : { flex : 1 }, items : [ firstGrid ] }); }); </script> </head> <body> <div id = "panel" > </div> </body></html>这将产生以下结果
您可以使用TAB和上下左右键或者使用鼠标在网格上移动焦点，方便视障人士进行阅读。
这是ExtJS内置主题和聚焦的方式，可以让任何人都可以轻松访问。
任何JavaScript代码都可以使用alert（）框或console.log（）或调试器中的调试指针进行调试。
请在要检查流或任何变量值的代码中放置一个警告框。
例如alert（'message to show'+ variable）;
调试JavaScript代码有两种方法
| 它用于在Android OS中返回true值；否则返回false。 |
下面是几个内置函数，主要在 Ext JS 中使用:
Ext.is类:
此类检查您使用的平台，无论是手机还是桌面，Mac 或 Windows 操作系统。
这些是与Ext.is类相关的以下方法
| 方法 | 描述 |
|---|---|
| Ext.is.Platforms | 此方法用于返回用于当前版本的平台。 例如。 当你运行下面的函数，它返回如下: [Object { property="platform", regex=RegExp, identity="iPhone"}, Object { property="platform", regex=RegExp, identity="iPod"}, Object { property="userAgent", regex=RegExp, identity="iPad"}, Object { property="userAgent", regex=RegExp, identity="Blackberry"}, Object { property="userAgent", regex=RegExp, identity="Android"}, Object { property="platform", regex=RegExp, identity="Mac"}, Object { property="platform", regex=RegExp, identity="Windows"}, Object { property="platform", regex=RegExp, identity="Linux"}] |
| Ext.is.Android | 它用在于 Android OS 中返回 true 值；否则返回 false。 |
| Ext.is.Desktop | 如果使用的是桌面，则此函数将返回 true，否则返回 false。 |
| Ext.is.iPhone | 这个函数将返回 true，如如果您使用的是手机，则此方法返回 true；否则，此方法返回 true。否则，它返回false。 |
| Ext.is.Phone | 如果您使用的是 iPhone，则此方法返回 true；否则，此方法返回 true。否则，它返回 false。用 iPhone的else它返回false。 |
Ext.is.iPod | 如果当您使用 iPod 时，它将返回 true，否则返回 false。 |
| Ext.is.iPad | 如果你如果使用 iPad，则它将返回 true，否则返回 false |
| Ext.is.Linux | 如果使用的是 Linux 操作系统，则返回true，否则返回 false。 |
| Ext.is.Mac | 如果您使用的是 Mac 操作系统，则返回true，否则返回 false。 |
| Ext.is.Blackberry | 如果您使用的是 Blackberry 操作系统，则返回 true，否则返回 false。 |
| Ext.is.Windows | 如果使用 Windows 操作系统，则返回 true，否则返回 false。 |
Ext.supports类:
因为名称表示这个类提供关于浏览器/设备支持的功能的信息，基本上是当前环境。
| 方法 | 描述 |
|---|---|
| Ext.supports.History | 这返回基于布尔值的设备支持HTML 5 历史作为 window.history 或不支持。 如果设备支持历史记录，那么它返回 true否则为false。 |
| Ext.supports.GeoLocation | 这返回基于布尔值的设备是否支持地理定位方法。 在内部它检查 navigator.geolocation 方法。 |
| Ext.supports.Svg | 这返回了基于布尔值的设备是否支持HTML 5功能可缩放矢量图形（SVG）方法。 在内部它检查doc.createElementNS＆amp;＆amp; !! doc.createElementNS（“http:/"+“/www.w3.org/2000/svg"，“svg"）。createSVGRect。 |
| Ext.supports.Canvas | 这个返回的布尔值基于设备支持的HTML 5功能canvas是否绘制方法。 在内部它检查doc.createElement（'canvas'）。getContext并基于此方法的输出返回值。 |
| Ext.supports.Range | 这个返回的布尔值是基于浏览器支持的 document.createRange 方法还是不行。 |
Ext.String类:
Ext.String 类有各种方法处理字符串数据，最常用的方法是编码解码，修剪，切换，urlAppend eyc。
编码解码函数:这些是 Ext.String 类中可用的函数，用于编码和解码 HTML 值。
| 方法 | 描述 |
|---|---|
| Ext.String.htmlEncode | 此函数用于编码 html 值以使其可解析。 E.g. Ext.String.htmlEncode("< p > Hello World < /p >"); Output - "< p > Hello World < /p >". |
| Ext.String.htmlDecode | 此函数用于解码编码的html值 E.g. Ext.String.htmlDecode("< p > Hello World < /p >");Output - "< p > Hello World < /p >" |
| Ext.String.trim | 此函数用于删除字符串中不需要的空格。 例如。 Ext.String.trim（'hello'）; 输出 - “hello" |
| Ext.String.urlAppend | 此方法用于在 URL 字符串中附加值 例如。 Ext.String.urlAppend（'https://www.google.com'，'hello'）; 输出 - “https://www.google.com?hello" Ext.String.urlAppend（'https://www.google.com?index=1'，'hello'）; 输出 - “https://www.google.com?index=1&hello" |
| Ext.String.toggle | 此函数用于在两个不同的值之间切换值。 例如。 var toggleString ='ASC' toggleString = Ext.String.toggle（a，'ASC'，'DESC'）; 输出 - DESC 作为 toggleString 具有值 ASC。 现在再次如果我们打印相同，我们将获得 toggleString =“ASC"这一次，因为它的值'DESC'。 它类似于三元运算符 toggleString =（（toggleString =='ASC'）？'DESC':'ASC'）; |
其他方法
| 方法 | 描述 | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Ext.userAgent（） | 此函数提供有关浏览器 userAgent 的信息。 UserAgent 用于标识 Web 服务器的浏览器和操作系统。 例如。 如果你在 Mozilla 工作，它会返回一些东西像:“mozilla / 5.0（windows nt 6.1; wow64; rv:43.0）gecko / 20100101 firefox / 43.0" | ||||||||||||||
| 版本相关功能 | 这些函数返回当前正在使用的浏览器的版本，如果在 firefox 浏览器中调用IE相关的函数，则返回 0.这些函数是 Ext.firefoxVersion，Ext.ieVersion等。 例如。 如果我们使用 firefox 浏览器，我们调用方法 Ext.ieVersion 获取版本的IE，那么它返回0或者如果我们在IE浏览器中使用相同的方法，那么它将返回我们使用的版本，如8,9 等。 | ||||||||||||||
| Ext.getVersion（） | 此函数返回当前使用的 Ext JS 版本。 例如。 如果我们调用Ext.getVersion（），它返回一个值的数组，如版本，短版本等。 Ext.getVersion（）。version返回程序中使用的Ext JS的当前版本，例如“4.2.2"。 | ||||||||||||||
| 浏览器相关功能 | 这些函数根据使用的浏览器返回布尔值。 这个方法是 Ext.isIE，Ext.isIE6，Ext.isFF06，Ext.isChrome。 例如。 如果我们使用 Chrome 浏览器，那么 Ext.isChrome 函数将返回 true，其他的都会返回 false。 | ||||||||||||||
| Ext.typeOf（） | 此函数返回变量的数据类型，例如 E.g. var a = 5; var b = 'hello'; Ext.typeOf(a); Output – Number Ext.typeOf(b); Output - String | ||||||||||||||
| DataType | DataType相关方法:这些函数根据变量的数据类型返回布尔值。 E.g. var a = ['a', 'bc']; var b = 'hello'; var c = 123; var emptyVariable; var definedVariable; function extraFunction(){return true;}
|
Ext JS是一个流行的JavaScript框架，它为使用跨浏览器功能构建Web应用程序提供了丰富的UI。 Ext JS基本上用于创建桌面应用程序它支持所有现代浏览器，如IE6 +，FF，Chrome，safari 6+ 等。而sencha，sencha touch的另一个产品用于移动应用程序。
Ext JS基于MVC / MVVM架构。 最新版本的Ext JS 6是一个单一的平台，可以用于桌面和移动应用程序，而不需要为不同的平台提供不同的代码。
Ext JS的第一个版本是由Jack Slocum在2006年开发的。它是一组实用程序类，它是YUI的扩展。 他将该库命名为YUI-ext。
Ext JS 2.0版于2007年发布。此版本具有用于桌面应用程序的新API文档，但功能有限。 此版本与以前版本的Ext JS没有向后兼容性。
Ext JS版本3.0是在2009年发布的。这个版本添加了新的功能作为图表和列表视图，但是以速度为代价。 它向后兼容2.0版本。
Ext JS 3发布后，Ext JS的开发人员面临着提高速度的主要挑战。 Ext JS 4.0版本发布于2011年。它具有完整的修订结构，其后是MVC架构和一个快速的应用程序。
Ext JS版本5.0是在2014年发布的。这个版本的主要变化是将MVC架构改为MVVM架构。 它包括在启用触摸的设备上构建桌面应用程序的功能，双向数据绑定，响应式布局和更多功能。
Ext JS 6合并了Ext JS（用于桌面应用程序）和sencha touch（用于移动应用程序）框架。
这些是Ext JS的突出特性
Sencha Ext JS是业务级Web应用程序开发的领先标准。 Ext JS提供了为桌面和平板电脑构建强大应用程序所需的工具。
Sencha IDE Plugins
Sencha Inspector
Sencha Inspector是一个调试工具，帮助调试器调试任何问题，同时开发。尝试在线选项
我们已经在线设置了ExtJS编程环境，以便您可以在线编译和执行所有可用的示例。 它给你对你正在阅读的信心，并使您能够使用不同的选项验证程序。 随意修改任何示例并在线执行。
请尝试以下示例:
<!DOCTYPE html><html> <head> <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet"> <script src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script type="text/javascript"> Ext.onReady(function() { Ext.create('Ext.Panel', { renderTo: 'helloWorldPanel', height: 100, width: 200, title: 'Hello world', html: 'First Ext JS Hello World Program' }); }); </script> </head> <body> <div id="helloWorldPanel"></div> </body></html>
本节将指导您如何在机器上下载和设置Ext JS。 请按照步骤设置环境。
从sencha https://www.sencha.com下载Ext JS库文件的试用版本 。 您将从您的注册邮件ID上的网站获取试用版，这将是一个名为ext-6.0.1-trial的压缩文件夹。
解压缩文件夹，你会发现各种JavaScript和CSS文件，你将包括在我们的应用程序。 主要包括以下文件:
您可以在文件夹 ext-6.0.1-trial ext-6.0.1 build下找到的（1）Javascript文件 JS文件是:
| 文件和描述 |
|---|
| ext.js 这是核心文件，其中包含运行应用程序的所有功能。 |
| ext-all.js 此文件包含在文件中没有注释的所有缩小的代码 |
| ext-all-debug.js 这是ext-all.js的未分级版本，用于调试目的。 |
| ext-all-dev.js 此文件也未分级，用于开发目的，因为它包含所有注释和控制台日志，以检查任何错误/问题 |
| ext-dev.js 这个文件用于生产目的，主要是因为它比任何其他小得多。 |
您可以将这些文件添加到您的项目JS文件夹，或者您可以给出文件驻留在系统中的直接路径。
（2）CSS文件有多个基于主题的文件，您可以在文件夹 ext-6.0.1-trial ext-6.0.1 build classic theme-classic resources theme-classic-all.css
如果我们要使用桌面应用程序，那么我们可以使用文件夹 ext-6.0.1-trial ext-6.0.1 build classic下的经典主题
如果我们要使用移动应用程序，那么我们将使用现代主题，可以在文件夹 ext-6.0.1-trial ext-6.0.1 build modern下找到
这些库文件将添加到Ext JS应用程序中，如下所示:
<html> <head> <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet"> <script src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script type ="text/javascript" src = "app.js" > </script> </head></html>您将在app.js文件中保留ExtJS应用程序代码。
CDN是内容交付网络，您不需要下载Ext JS库文件，您可以直接添加ExtJS的CDN链接到您的程序，如下所示:
<html> <head> <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet"> <script src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script type ="text/javascript" src = "app.js" > </script> </head></html>注：本手册里所有的在线运行代码都使用了如上的CDN，在某些情况下CDN加载较慢会导致在线运行代码的效果展示较慢或者不展示（如果CDN失效的话），这里小编建议使用本地环境开发避免这种情况！如果发现CDN失效，请及时通过纠错进行反馈！
因为它是一个用于开发Web应用程序的JavaScript框架，在我们的项目中，我们将有HTML，JS文件和编写您的Ext JS程序，您将需要一个文本编辑器。 市场上甚至有多个IDE可用。 但现在，您可以考虑以下之一：
记事本：在Windows机器上，您可以使用任何简单的文本编辑器，如记事本（推荐用于本教程），记事本++，sublime。
Eclipse：是由Eclipse开源社区开发的一个IDE，可以从
http://www.eclipse.org/下载。
Ext JS支持跨浏览器兼容性，它支持所有主要浏览器：
您可以使用任何浏览器运行Ext JS应用程序。
命名约定是标识符要遵循的一组规则。
它使得代码对于其他程序员也更可读和可理解。
Ext JS中的命名约定遵循标准JavaScript约定，这不是强制性的，而是遵循的良好做法。
它应该遵循camel case语法命名类，方法，变量和属性。
如果name与两个单词组合，则第二个单词将始终以大写字母开头。 doLayout（），StudentForm，firstName等。
| 名称 | 惯例 |
|---|---|
| Class Name | 它应该以大写字母开头，然后是camel case E.g. StudentClass |
| Method Name | 它应该以小写字母开头，然后是camel case E.g. doLayout() |
| Variable Name | 它应该以小写字母开头，然后是camel case E.g. firstName |
| Constant Name | 它应该是只有大写，例如 E.g. COUNT, MAX_VALUE |
| Property Name | 它应该以小写字母开头，然后是camel case e.g. enableColumnResize = true |
Ext JS遵循MVC / MVVM架构。
MVC - 模型视图控制器体系结构（版本4）
MVVM - 模型视图Viewmodel（版本5）
这种架构不是强制要求的，但最好的做法是遵循这种结构，使您的代码高度可维护和组织。
----------src----------resources-------------------CSS files-------------------Images----------JavaScript--------------------App Folder-------------------------------Controller------------------------------------Contoller.js-------------------------------Model------------------------------------Model.js-------------------------------Store------------------------------------Store.js-------------------------------View------------------------------------View.js-------------------------------Utils------------------------------------Utils.js--------------------------------app.js-----------HTML files
Ext JS应用程序文件夹将驻留在您的项目的JavaScript文件夹中。
应用程序将包含控制器，视图，模型，存储，实用程序文件与app.js.
app.js:程式流程开始的主要入口，应该使用< script> 标签。 应用程序调用应用程序的控制器的其余功能。
Controller.js:它是Ext JS MVC架构的控制器文件。 这包含应用程序的所有控制，事件侦听器的最大功能的代码。 它具有为该应用程序中使用的所有其他文件定义的路径，例如store，view，model，require，mixins。
View.js:它包含应用程序的界面部分，显示给用户。 Ext JS使用各种UI丰富的视图，可以根据需要在这里扩展和自定义。
Store.js:它包含本地缓存的数据，它将在模型对象的帮助下在视图上呈现。 存储使用代理获取数据，代理具有为服务定义的路径以获取后端数据。
Model.js:它包含绑定要查看的商店数据的对象。 它有后端数据对象到视图dataIndex的映射。 在store的帮助下获取数据。
Utils.js:它不包括在MVC架构中，但是最好的做法是使代码清晰，不太复杂，更加可读。 我们可以在这个文件中编写方法，并在控制器或视图渲染器中调用它们。 这对代码可重用性目的也很有帮助。
在MVVM架构中，控制器被ViewModel替代。
ViewModel:在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者。ViewModel是连接View和Model的中间件。
例如，如果我们在UI中的两三个地方使用一个模型对象，如果我们在UI的一个地方更改值，其他地方的UI的值也会相应的做出改变。
它使开发人员更加轻松和简单，因为不需要额外的编码绑定数据。
本章列出了在Ext JS中首先编写Hello World程序的步骤:
在我们选择的编辑器中创建index.htm页面。 将所需的库文件包含在html页面的head部分，如下所述:
index.htm
<!DOCTYPE html><html> <head> <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="external nofollow" target="_blank" rel="stylesheet"> <script src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" ></script> <script type="text/javascript"> Ext.onReady(function() { Ext.create('Ext.Panel', { renderTo: 'helloWorldPanel', height: 200, width: 600, title: 'Hello world', html: 'First Ext JS Hello World Program' }); }); </script> </head> <body> <div id="helloWorldPanel" /> </body></html>Ext.onReady（）方法将在Ext JS准备好渲染Ext JS元素时调用。
Ext.create（）方法用于在Ext JS中创建对象，这里我们创建一个简单的面板类Ext.Panel的对象。
Ext.Panel是Ext JS中用于创建面板的预定义类。
每个Ext JS类都有不同的属性来执行一些基本的功能。
Ext.Panel类有以下各种属性:
renderTo 是此面板必须呈现的元素。 'helloWorldPanel'是Index.html文件中的div id。
Height 和宽度属性用于提供面板的自定义尺寸。
Title 属性是为面板提供标题。
Html 属性是要在面板中显示的html内容。
在标准浏览器中打开index.htm文件，您将在浏览器上获得以下输出。
Ext JS 是一个 JavaScript 框架，它具有面向对象编程的功能。
Ext 是封装 Ext JS 中所有类的命名空间。
在 Ext JS 中定义类
Ext 提供了 300 多个类，我们可以用于各种功能。
Ext.define（）用于在 Ext JS 中定义类。
语法:
Ext.define(class name, class members/properties, callback function);类名称是根据应用程序结构的类名称。 appName.folderName.ClassName
studentApp.view.StudentView。
类属性/成员 - 定义类的行为。
回调函数是可选的。 当类正确加载时，会调用它。
Ext JS 类定义示例
Ext.define(studentApp.view.StudentDeatilsGrid, { extend : 'Ext.grid.GridPanel', id : 'studentsDetailsGrid', store : 'StudentsDetailsGridStore', renderTo : 'studentsDetailsRenderDiv', layout : 'fit', columns : [{ text : 'Student Name', dataIndex : 'studentName' },{ text : 'ID', dataIndex : 'studentId' },{ text : 'Department', dataIndex : 'department' }]});创建对象
像其他基于 OOPS 的语言一样，我们也可以在 Ext JS 中创建对象。
不同的方式创建对象在 Ext JS。
使用 new 关键字:
var studentObject = new student();studentObject.getStudentName();使用 Ext.create（）:
Ext.create('Ext.Panel', { renderTo : 'helloWorldPanel', height : 100, width : 100, title : 'Hello world', html : 'First Ext JS Hello World Program' });Ext JS 中的继承
继承是将类 A 中定义的功能用于类 B 的原理。
在 Ext JS 继承可以使用两种方法 。
Ext.extend:
Ext.define(studentApp.view.StudentDetailsGrid, { extend : 'Ext.grid.GridPanel', ...});这里我们的自定义类 StudentDetailsGrid 使用 Ext JS 类 GridPanel 的基本功能。
使用 Mixins:
Mixins 是在没有扩展的情况下在类 B 中使用类 A 的不同方式。
mixins : { commons : 'DepartmentApp.utils.DepartmentUtils'},Mixins 我们添加在控制器中，我们声明所有其他类，如存储，视图等。在这种方式，我们可以调用 DepartmentUtils 类，并在控制器或在这个应用程序中使用其功能。
Ext JS中的容器是我们可以添加其他容器或子组件的组件。
这些容器可以具有多个布局以将部件布置在容器中。
我们可以从容器和其子元素添加或删除组件。
Ext.container.Container是Ext JS中所有容器的基类。
| 编号 | 描述 |
|---|---|
| 1 | Components inside Container 此示例显示如何在容器内定义组件 |
| 2 | Container inside container 此示例显示如何使用其他组件定义容器内的容器 |
有各种类型的容器Ext.panel.Panel，Ext.form.Panel，Ext.tab.Panel和Ext.container.Viewport是Ext JS中经常使用的容器。 下面是显示如何使用这些容器的示例。
| 编号 | 容器类型和说明 |
|---|---|
| 1 | Ext.panel.Panel 此示例显示一个Ext.panel.Panel容器 |
| 2 | Ext.form.Panel 此示例显示一个Ext.form.Panel容器 |
| 3 | Ext.tab.Panel 此示例显示一个Ext.tab.Panel容器 |
| 4 | Ext.container.Viewport 此示例显示一个Ext.container.Viewport容器 |
布局是元素在容器中排列的方式。 这可以是水平的，垂直的或任何其他。 Ext JS在其库中定义了不同的布局，但我们也可以编写自定义布局。
| 编号 | 布局和描述 |
|---|---|
| 1 | Absolute 此布局允许使用容器中的XY坐标定位项目。 |
| 2 | Accordion 此布局允许将所有项目以堆栈方式（一个在另一个之上）放在容器内。 |
| 3 | Anchor 此布局为用户提供了相对于容器大小给出每个元素的大小的特权。 |
| 4 | Border 在此布局中，各种面板嵌套并由边界分隔。 |
| 5 | Auto 这是默认布局决定元素的布局，基于元素的数量。 |
| 6 | Card(TabPanel) 此布局以制表符方式排列不同的组件。 选项卡将显示在容器的顶部。每次只有一个选项卡可见，每个选项卡被视为不同的组件。 |
| 7 | Card(Wizard) 在这个布局中，每次元素来到完整的容器空间。 向导中将有一个底部工具栏用于导航。 |
| 8 | Column 此布局是要在容器中显示多个列。 我们可以定义列的固定宽度或百分比宽度。 百分比宽度将基于容器的完整大小计算。 |
| 9 | Fit 在此布局中，容器用单个面板填充，并且当没有与布局相关的特定要求时，则使用该布局。 |
| 10 | Table 由于名称意味着此布局以HTML表格式在容器中排列组件。 |
| 11 | vBox 这种布局允许元素以垂直方式分布。 这是最常用的布局之一。 |
| 12 | hBox 这种布局允许元素以水平方式分布。 |
ExtJS UI由一个或多个名为Components.Ext的widget组成.JS具有定义的各种UI组件，可以根据您的要求进行定制。
| 编号 | 方法＆说明 |
|---|---|
| 1 | Grid 网格组件可用于以表格格式显示数据。 |
| 2 | Form 窗体小部件是从用户获取数据。 |
| 3 | Message Box 消息框基本上用于以警报框的形式显示数据。 |
| 4 | Chart 图表用于以图形格式表示数据。 |
| 5 | Tool tip 任何事件发生时，工具提示用于显示一些基本信息。 |
| 6 | Window 这个UI部件是创建一个窗口，当任何事件发生时应该弹出。 |
| 7 | HTML editor HTML编辑器是非常有用的UI组件之一，用于对用户输入的字体，颜色，大小等数据进行样式设置。 |
| 8 | Progress bar 显示后端工作的进度。 |
拖放功能是为使开发人员轻松工作而添加的强大功能之一。拖动操作基本上是在某些UI元素上的点击手势，同时按住鼠标按钮并移动鼠标。 在拖动操作后释放鼠标按钮时，会发生放置操作。
将类拖放到可拖动目标。
var dd = Ext.create('Ext.dd.DD', el, 'imagesDDGroup', { isTarget: false });添加拖放目标类到drappable目标
var mainTarget = Ext.create('Ext.dd.DDTarget', 'mainRoom', 'imagesDDGroup', { ignoreSelf: false });| 方法 | 描述 |
| startDrag(int x, int y) | 开始拖放事件，参数是x和y的坐标值。 |
| onDrag(Event t) | 正在拖放事件，当拖放一个对象时触发，参数是mousemove鼠标移动事件。 |
| onDragDrop(Event e, String|DragDrop[] id) | 正在放下事件，当一个对象放到另一个DragDrop对象上时触发，第一个参数是mouseup鼠标放开事件，第二个参数表示drop的目标位置。如果是在POINT模式下，就会传入目标元素的id；如果是在INTERSECT模式下，则会传入放下目标的拖放对象数组。 |
| endDrag(Event e) | 拖放结束事件，在拖放操作结束之后触发，参数是mouseup鼠标放开事件。 |
| onDragEnter(Event e, String|DragDrop[] id) | 进入drop区域事件，拖放过程中首次触碰到drop区域时触发。第一个参数是mousemove鼠标移动事件，第二个参数表示drop目标位置。如果是在POINT模式下，就会传入目标元素的id；如果是在INTERSECT模式下，则会传入放下目标的拖放对象数组。 |
| onDragOut(Event e, String|DragDrop[] id) | 离开drop区域事件，拖放过程中从drop区域离开时触发。第一个参数是mousemove鼠标移动事件，第二个参数表示drop目标位置。如果是在POINT模式下，就会传入目标元素的id；如果是在INTERSECT模式下，则会传入放下目标的拖放对象数组。 |
| onDragOver(Event e, String|DragDrop[] id) | 在drop区域中拖放移动事件，当在drop区域拖放移动时触发。第一个参数是mousemove鼠标移动事件，第二个参数表示drop目标位置。如果是在POINT模式下，就会传入目标元素的id；如果是在INTERSECT模式下，则会传入放下目标的拖放对象数组。 |
| onInvalidDrop(Event e) | 不能drop事件，不在drop区域移动时触发，参数是mousemove鼠标移动事件。 |
| onMouseDown(Event e) | 鼠标按下事件，参数是mousedown鼠标按下事件。 |
| onMouseUp(Event e) | 鼠标放开事件，参数是mouseup鼠标放开事件。 |
下面是一个简单的例子
<!DOCTYPE html><html><head> <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="external nofollow" target="_blank" rel="stylesheet"> <script src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" ></script> <script type="text/javascript"> Ext.application({ launch: function() { var images = Ext.get('images').select('img'); Ext.each(images.elements, function(el) { var dd = Ext.create('Ext.dd.DD', el, 'imagesDDGroup', { isTarget: false }); }); } }); var mainTarget = Ext.create('Ext.dd.DDTarget', 'mainRoom', 'imagesDDGroup', { ignoreSelf: false }); </script> <style> #content{ width:600px; height:400px; padding:10px; border:1px solid #000; } #images{ float:left; width:40%; height:100%; border:1px solid Black; background-color:rgba(222, 222, 222, 1.0); } #mainRoom{ float:left; width:55%; height:100%; margin-left:15px; border:1px solid Black; background-color:rgba(222, 222, 222, 1.0); } .image{ width:64px; height:64px; margin:10px; cursor:pointer; border:1px solid Black; display: inline-block; } </style></head><body> <div id="content"> <div id="images"> <img src = "/extjs/images/1.jpg" class = "image" /> <img src = "/extjs/images/2.jpg" class = "image" /> <img src = "/extjs/images/3.jpg" class = "image" /> <img src = "/extjs/images/4.jpg" class = "image" /> <img src = "/extjs/images/5.jpg" class = "image" /> <img src = "/extjs/images/6.jpg" class = "image" /> <img src = "/extjs/images/7.jpg" class = "image" /> <img src = "/extjs/images/8.jpg" class = "image" /> </div> <div id="mainRoom"></div> </div></body></html>
在在线环境下没有配置图片的正确路径，所以图片不能正常显示，但这并不影响功能的展示。
在Extjs的拖放的帮助下，我们可以将数据从网格移动到网格和网格到窗体。下面是在网格和窗体之间移动数据的例子。
Ext.js提供了许多要在您的应用程序中使用的主题。 你可以添加不同的主题的经典主题，看到输出的差异，这是简单地通过替换主题CSS文件，如下所述。
考虑你最初的Hello World应用程序。 从应用程序中删除以下CSS:
https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css添加以下CSS以使用海王星主题:
https://cdn.bootcss.com/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css要查看效果，请尝试以下程序:
<!DOCTYPE html><html> <head> <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" rel="external nofollow" target="_blank" rel="stylesheet"> <script src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script type="text/javascript"> Ext.onReady(function() { Ext.create('Ext.Panel', { renderTo: 'helloWorldPanel', height: 200, width: 600, title: 'Hello world', html: 'First Ext JS Hello World Program' }); }); </script> </head> <body> <div id="helloWorldPanel" /> </body></html>这会产生以下结果:
考虑你最初的Hello World应用程序。 从应用程序中删除以下CSS:
https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css添加以下CSS以使用海王星主题:
https://cdn.bootcss.com/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css要查看效果，请尝试以下程序:
<!DOCTYPE html><html> <head> <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css" rel="external nofollow" target="_blank" rel="stylesheet" /> <script src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script type="text/javascript"> Ext.onReady(function() { Ext.create('Ext.Panel', { renderTo: 'helloWorldPanel', height: 200, width: 600, title: 'Hello world', html: 'First Ext JS Hello World Program' }); }); </script> </head> <body> <div id="helloWorldPanel" /> </body></html>这会产生以下结果:
考虑你最初的Hello World应用程序。 从应用程序中删除以下CSS:
https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css添加以下CSS以使用Triton主题:
https://cdn.bootcss.com/extjs/6.0.0/classic/theme-triton/resources/theme-triton-all.css要查看效果，请尝试以下程序:
<!DOCTYPE html><html> <head> <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-triton/resources/theme-triton-all.css" rel="external nofollow" target="_blank" rel="stylesheet"> <script src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script type="text/javascript"> Ext.onReady(function() { Ext.create('Ext.Panel', { renderTo: 'helloWorldPanel', height: 200, width: 600, title: 'Hello world', html: 'First Ext JS Hello World Program' }); }); </script> </head> <body> <div id="helloWorldPanel" /> </body></html>这会产生以下结果:
考虑你最初的Hello World应用程序。 从应用程序中删除以下CSS:
https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css添加以下CSS以使用灰色主题:
https://cdn.bootcss.com/extjs/6.0.0/classic/theme-gray/resources/theme-gray-all.css要查看效果，请尝试以下程序:
<!DOCTYPE html><html> <head> <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-gray/resources/theme-gray-all.css" rel="external nofollow" target="_blank" rel="stylesheet" /> <script type="text/javascript" src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script type="text/javascript"> Ext.onReady(function() { Ext.create('Ext.Panel', { renderTo: 'helloWorldPanel', height: 200, width: 600, title: 'Hello world', html: 'First Ext JS Hello World Program' }); }); </script> </head> <body> <div id="helloWorldPanel" /> </body></html>这会产生以下结果:
事件是在类发生的时候触发的。 例如，当一个按钮被点击或元素被渲染之前/之后。
Ext JS提供了用于在Ext JS文件中编写事件和自定义事件的侦听器属性。
在Ext JS中编写侦听器
我们将通过在面板中添加listen属性来将监听器添加到上一个程序中，如下所示:
<!DOCTYPE html><html> <head> <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet" /> <script type="text/javascript" src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script type="text/javascript"> Ext.onReady(function(){ Ext.create('Ext.Button', { renderTo: Ext.getElementById('helloWorldPanel'), text: 'My Button', listeners: { click: function() { Ext.MessageBox.alert('Alert box', 'Button is clicked'); } } }); }); </script> </head> <body> <p> Please click the button to see event listener </p> <div id = 'helloWorldPanel' /> <!-- panel will be rendered here-- > </body></html>这会产生以下结果:
这样我们可以在listeners属性中写多个事件。
同一个侦听器中的多个事件
<!DOCTYPE html><html> <head> <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet" /> <script type="text/javascript" src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script type="text/javascript"> Ext.onReady(function(){ Ext.get('tag2').hide() Ext.create('Ext.Button', { renderTo: Ext.getElementById('helloWorldPanel'), text: 'My Button', listeners: { click: function() { this.hide(); }, hide: function() { Ext.get('tag1').hide(); Ext.get('tag2').show(); } } }); }); </script> </head> <body> <div id = "tag1">Please click the button to see event listener.</div> <div id = "tag2">The button was clicked and now it is hidden.</div> <div id = 'helloWorldPanel' /> <!-- panel will be rendered here-- > </body></html>运行效果如下：
在前面的写事件的方法中，我们在创建元素时在侦听器中写入事件。
也可以在之后的代码中使用附加事件监听的方式:
<!DOCTYPE html><html> <head> <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet" /> <script type="text/javascript" src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script type="text/javascript"> Ext.onReady(function(){ var button = Ext.create('Ext.Button', { renderTo: Ext.getElementById('helloWorldPanel'), text: 'My Button' }); // This way we can attach event to the button after the button is created. button.on('click', function() { Ext.MessageBox.alert('Alert box', 'Button is clicked'); }); }); </script> </head> <body> <p> Please click the button to see event listener </p> <div id = 'helloWorldPanel' /> <!-- panel will be rendered here-- > </body></html>运行结果如下：
我们可以在ext JS中编写自定义事件，并使用fireEvent方法触发事件，下面的示例解释了如何编写自定义事件。
<!DOCTYPE html><html> <head> <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet" /> <script type="text/javascript" src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> <script type="text/javascript"> Ext.onReady(function(){ var button = Ext.create('Ext.Button', { renderTo: Ext.getElementById('helloWorldPanel'), text: 'My Button', listeners: { myEvent: function(button) { Ext.MessageBox.alert('Alert box', 'My custom event is called'); } } }); Ext.defer(function() { button.fireEvent('myEvent'); }, 5000); }); </script> </head> <body> <p> The event will be called after 5 seconds when the page is loaded. </p> <div id = 'helloWorldPanel' /> <!-- panel will be rendered here-- > </body></html>运行结果如下（为了节省展示时间，图中效果使用2秒的定时器）：
一旦页面被加载并且文档准备就绪，UI页面与按钮将出现，并且我们在5秒后触发事件文档准备就绪，警报框将在5秒后出现。
这里我们写了自定义事件'myEvent'，我们将事件触发为button.fireEvent（eventName）
数据包用于加载和保存应用程序中的所有数据。
数据包有许多类，但最重要的类是:
Ext.define('StudentDataModel', { extend: 'Ext.data.Model', fields: [ {name: 'name', mapping : 'name'}, {name: 'age', mapping : 'age'}, {name: 'marks', mapping : 'marks'} ] });这里的名称应该与我们在视图中声明的dataIndex相同，并且映射应该匹配使用store从数据库获取的静态或动态数据。
store的基类是Ext.data.Store。 它包含本地缓存的数据，该数据将在模型对象的帮助下在视图上呈现。 存储使用代理获取数据，代理具有为服务定义的路径以获取后端数据。
存储数据可以从静态或动态两种方式获取。
对于静态存储，我们将存储在存储中的所有数据如下:
Ext.create('Ext.data.Store', { model: 'StudentDataModel', data: [ { name : "Asha", age : "16", marks : "90" }, { name : "Vinit", age : "18", marks : "95" }, { name : "Anand", age : "20", marks : "68" }, { name : "Niharika", age : "21", marks : "86" }, { name : "Manali", age : "22", marks : "57" } ]; });可以使用代理获取动态数据。 我们可以让代理可以从Ajax，Rest和Json获取数据。
代理的基类是Ext.data.proxy.Proxy。 代理由模型和商店用于处理模型数据的加载和保存。
有两种类型的代理:
客户端代理包括使用HTML5本地存储的内存和本地存储。
服务器代理使用Ajax，Json数据和Rest服务处理来自远程服务器的数据。
Ext.create('Ext.data.Store', { model: 'StudentDataModel', proxy : { type : 'rest', actionMethods : { read : 'POST' // Get or Post type based on requirement }, url : 'restUrlPathOrJsonFilePath', // here we have to include the rest URL path which fetches data from database or Json file path where the data is stored reader: { type : 'json', // the type of data which is fetched is of JSON type root : 'data' }, }});Extjs提供了使用不同字体包的功能。 字体包用于为包中可用的图标添加不同的类。
ExtJS的新主题Triton有内置的字体家族字体awesome包含在框架本身，所以我们不需要任何明确的要求的字体真棒样式表。
下面是在Triton主题中使用Font-Awesome类的示例。
当我们使用除了Triton之外的任何其他主题时，我们需要明确地要求或添加样式表以用于font-awesome。
下面是使用没有Triton主题的Font-Awesome类的示例。
Ext.js字体 Awesome正常主题（除了Triton主题）
Font-pictos不包括在EXTJS的框架中，所以我们必须首先要求它，只有sencha的许可用户才能使用font-pictos。
添加字体pictos的步骤
1.需要font-pictos类:
"requires": ["font-pictos"]2.现在将pictos类添加为:
iconCls: 'pictos pictos-home'应用程序样式是指用户调整组件的外观和感觉。 这些调整可能包括:颜色，颜色渐变，字体，边距/填充等。Ext JS 6有一种新的应用程序样式。
它使用SCSS的样式。 SCSS是编写CSS代码的更动态的方式。 我们可以在这个帮助下在我们的样式表中写入变量。 但是浏览器不能理解SCSS它只能理解CSS，所以所有的SCSS文件应该被编译成CSS生产就绪代码。
这就是为什么SCSS文件被称为预处理器文件。 在Extjs中，编译通过Sencha CMD工具完成。
Sencha CMD手动编译它一次使用命令如下:
sencha应用程序构建[开发]
全局CSS是主要的CSS文件，它具有所有的SCSS变量与ExtJS相关联，我们可以在我们的应用程序中使用它来定制我们的主题，根据我们的需要提供不同的价值。
以下是Extjs中的Global_CSS中提供的一些CSS变量:
| 编号 | 变量＆描述 |
|---|---|
| 1 | $ base-color $ base-color:color（例如$ base-color:＃808080） 这个基色在整个主题中使用。 |
| 2 | $ base-gradient $ base-gradient:string（例如$ base-gradient:'matte'） 在整个主题中使用的基本渐变。 |
| 3 | $ body-background-color $ body-background-color:color（例如$ body-background-color:＃808080） 应用到body元素的背景颜色。 如果设置为transparent或'none'，将不会在body元素上设置背景颜色样式 |
| 4 | $ color $ color:color（例如$ color:＃808080） 要在整个主题中使用的默认文本颜色 |
| 5 | $ font-family $ font-family:string（例如$ font-family:arial） 在整个主题中使用的默认font-family。 |
| 6 | $ font-size $ font-size:number（例如$ font-size:9px） 要在整个主题中使用的默认字体大小。 |
| 7 | $ font-weight $ font-weight:string / number（例如$ font-weight:normal） 在整个主题中使用的默认字体权重 |
| 8 | $ font-weight-bold $ font-weight-bold:string / number（例如$ font-weight-bold:bold） 粗体字体的默认字体粗细在整个主题中使用 |
| 9 | $ include-chrome $ include-chrome:boolean（例如$ include-chrome:true） True以包含Chrome特定规则 |
| 10 | $ include-ff $ include-ff:boolean（例如$ include-ff:true） True包含Firefox特定规则 |
| 11 | $ include-ie $ include-ie:boolean（例如$ include-ie:true） True包括IE9和更低版本的Internet Explorer特定规则 |
| 12 | $ include-opera $ include-opera:boolean（例如$ include-opera:true） True包含Opera特定规则 |
| 13 | $ include-safari $ include-safari:boolean（例如$ include-safari:true） True包含Opera特定规则 |
| 14 | $ include-webkit $ include-webkit:boolean（例如$ include-webkit:true） True包括Webkit特定的规则 |
ExtJS中的绘图包使您能绘制通用图形。 这可以用于在所有浏览器和移动设备上工作的图形。
| 编号 | 绘图 |
|---|---|
| 1 | Circle 此图形用于创建圆形。 |
| 2 | Rectangle 此图形用于创建矩形形状。 |
| 3 | Arc 此图形用于创建弧形。 |
| 4 | Ellipse 此图形用于创建椭圆形状。 |
| 5 | EllipticalArc 此图形用于创建椭圆弧形。 |
| 6 | Image 此图形用于向应用程序添加图像。 |
| 7 | Path 此图形用于创建自由路径。 |
| 8 | Text 此图形用于向应用程序添加任何文本。 |
| 9 | Translate after render 此属性用于在呈现图形后在容器中移动起点。 它可以与任何图形一起使用。 |
| 10 | Rotation 此属性用于向添加的图形添加旋转。 它可以与任何图形一起使用。 |
| 11 | Square 此图形用于创建正方形。 |
全世界的用户使用的语言都是不同的，最好用他们理解和喜欢的语言来沟通用户。 Extjs本地化包支持超过40种语言，如德语，法语，韩语，中文等。
在ExtJs中实现区域设置非常简单。您将在ext-locale软件包的覆盖文件夹中找到所有捆绑的区域设置文件。 语言环境文件只是覆盖，它指示Ext JS替换某些组件的默认英语值。
这个程序是要显示不同区域设置的月份来看效果，试试下面的程序:
<!DOCTYPE html><html> <head> <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet" /> <script type="text/javascript" src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" rel="external nofollow" ></script> <script type="text/javascript" src="https://cdn.bootcss.com/extjs/6.0.0/classic/locale/locale-zh_CN.js" rel="external nofollow" ></script> <script type="text/javascript"> Ext.onReady(function() { var monthArray = Ext.Array.map(Ext.Date.monthNames, function (e) { return [e]; }); var ds = Ext.create('Ext.data.Store', { fields: ['month'], remoteSort: true, pageSize: 6, proxy: { type: 'memory', enablePaging: true, data: monthArray, reader: {type: 'array'} } }); Ext.create('Ext.grid.Panel', { renderTo: 'grid', id : 'gridId', width: 600, height: 200, title:'Month Browser', columns:[{ text: 'Month of the year', dataIndex: 'month', width: 300 }], store: ds, bbar: Ext.create('Ext.toolbar.Paging', { pageSize: 6, store: ds, displayInfo: true }) }); Ext.getCmp('gridId').getStore().load(); }); </script> </head> <body> <div id="grid" /> </body></html>这会产生以下结果:
描述:
对于使用不同的语言环境，除了英语，我们需要在我们的程序中添加区域设置特定的文件，如果需要设置为法语，可以使用
https://cdn.bootcss.com/extjs/6.0.0/classic/locale/locale-fr .js
。 您可以对不同的语言使用不同的区域设置，例如
https://cdn.bootcss.com/extjs/6.0.0/classic/locale/locale-ko.js等。
这个程序是显示日期选择器在韩国语区域查看效果，尝试以下程序:
<!DOCTYPE html><html> <head> <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet" /> <script type="text/javascript" src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" rel="external nofollow" ></script> <script type="text/javascript" src="https://cdn.bootcss.com/extjs/6.0.0/classic/locale/locale-ko.js" rel="external nofollow" ></script> <script type="text/javascript"> Ext.onReady(function() { Ext.create('Ext.picker.Date', { renderTo: 'datePicker' }); }); </script> </head> <body> <div id="datePicker" /> </body></html>这会产生以下结果:
下面是ExtJS中可用的几个区域设置和要更改的主文件区域设置URL。
| 语言环境 | 语言 | 区域设置URL |
|---|---|---|
| ko | Korean | https://cdn.bootcss.com/extjs/6.0.0/classic/locale/locale-ko.js |
| fr | French | https://cdn.bootcss.com/extjs/6.0.0/classic/locale/locale-fa.js |
| es | Spanish | https://cdn.bootcss.com/extjs/6.0.0/classic/locale/locale-es.js |
| ja | Japanese | https://cdn.bootcss.com/extjs/6.0.0/classic/locale/locale-ja.js |
| it | Italian | https://cdn.bootcss.com/extjs/6.0.0/classic/locale/locale-it.js |
| ru | Russian | https://cdn.bootcss.com/extjs/6.0.0/classic/locale/locale-ru.js |
| zh_CN | 简体中文 | https://cdn.bootcss.com/extjs/6.0.0/classic/locale/locale-zh_CN.js |
一般来说，可访问性意味着可用性，内容可访问意味着内容可用。
在软件术语中，应用程序可访问意味着应用程序可用于所有人。 这里所指的是残疾人，视障者一次或使用屏幕阅读器的人，使用计算机或那些喜欢用键盘而不是使用鼠标的所有导航。
可访问的应用程序称为ARIA（可访问富互联网应用程序）。
Ext JS旨在牢记这一点，它应该与所有键盘导航工作。它已内置标签索引和聚焦能力，它始终是默认开启，所以我们不需要添加任何属性来启用此功能。
此功能允许所有键盘启用的组件在标签页插入时与用户交互。 像我们可以使用tab键移动到下一个组件，而不是鼠标点击该组件。 同样，我们可以tab+shift键移动到上一个组件，然后输入键盘进行点击等。
当使用tab按键切换替代鼠标点击时，聚焦样式将内置在Extjs中。
下面的示例显示了当焦点随着tab的使用而改变时如何改变样式。
<!DOCTYPE html><html> <head> <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css" rel="external nofollow" target="_blank" rel="stylesheet" /> <script type="text/javascript" src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" rel="external nofollow" ></script> <script type="text/javascript"> Ext.onReady(function(){ Ext.create('Ext.Button', { renderTo: Ext.getElementById('button1'), text: 'Button1', listeners: { click: function() { Ext.MessageBox.alert('Alert box', 'Button 1 is clicked'); } } }); Ext.create('Ext.Button', { renderTo: Ext.getElementById('button2'), text: 'Button2', listeners: { click: function() { Ext.MessageBox.alert('Alert box', 'Button 2 is clicked'); } } }); Ext.create('Ext.Button', { renderTo: Ext.getElementById('button3'), text: 'Button3', listeners: { click: function() { Ext.MessageBox.alert('Alert box', 'Button 3 is clicked'); } } }); }); </script> </head> <body> <p>Please click the button to see event listener:</p> <span id="button3"/> <span id="button2"/> <span id="button1"/> </body></html>运行结果如下所示（使用tab键可以切换到下一个可聚焦项，使用shift + tab键可以切换到上一个可聚焦项）：
ExtJS为视障人士提供ARIA(可访问的富internet应用程序)主题。
这里的例子显示的ARIA题更容易为视障者阅读（对于部分颜色弱视或者色盲的用户优化）。
下面的示例显示了ARIA主题:
<!DOCTYPE html><html> <head> <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-aria/resources/theme-aria-all.css" rel="external nofollow" target="_blank" rel="stylesheet" /> <script type="text/javascript" src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" rel="external nofollow" ></script> <script type="text/javascript"> Ext.require([ 'Ext.grid.*', 'Ext.data.*' ]); // Creation of data model Ext.define('StudentDataModel', { extend: 'Ext.data.Model', fields: [ {name: 'name', mapping : 'name'}, {name: 'age', mapping : 'age'}, {name: 'marks', mapping : 'marks'} ] }); Ext.onReady(function(){ // Store data var myData = [ { name : "Asha", age : "16", marks : "90" }, { name : "Vinit", age : "18", marks : "95" }, { name : "Anand", age : "20", marks : "68" }, { name : "Niharika", age : "21", marks : "86" }, { name : "Manali", age : "22", marks : "57" } ]; // Creation of first grid store var firstGridStore = Ext.create('Ext.data.Store', { model: 'StudentDataModel', data: myData }); // Creation of first grid var firstGrid = Ext.create('Ext.grid.Panel', { store : firstGridStore, columns : [{ header: "Student Name", dataIndex: 'name', id : 'name', flex: 1, sortable: true },{ header: "Age", dataIndex: 'age', flex: .5, sortable: true },{ header: "Marks", dataIndex: 'marks', flex: .5, sortable: true }], stripeRows : true, title : 'First Grid', margins : '0 2 0 0' }); // Creation of a panel to show both the grids. var displayPanel = Ext.create('Ext.Panel', { width : 600, height : 200, layout : { type: 'hbox', align: 'stretch', padding: 5 }, renderTo : 'panel', defaults : { flex : 1 }, items : [ firstGrid ] }); }); </script> </head> <body> <div id = "panel" > </div> </body></html>这将产生以下结果
您可以使用TAB和上下左右键或者使用鼠标在网格上移动焦点，方便视障人士进行阅读。
这是ExtJS内置主题和聚焦的方式，可以让任何人都可以轻松访问。
任何JavaScript代码都可以使用alert（）框或console.log（）或调试器中的调试指针进行调试。
请在要检查流或任何变量值的代码中放置一个警告框。
例如alert（'message to show'+ variable）;
调试JavaScript代码有两种方法
| 它用于在Android OS中返回true值；否则返回false。 |
下面是几个内置函数，主要在 Ext JS 中使用:
Ext.is类:
此类检查您使用的平台，无论是手机还是桌面，Mac 或 Windows 操作系统。
这些是与Ext.is类相关的以下方法
| 方法 | 描述 |
|---|---|
| Ext.is.Platforms | 此方法用于返回用于当前版本的平台。 例如。 当你运行下面的函数，它返回如下: [Object { property="platform", regex=RegExp, identity="iPhone"}, Object { property="platform", regex=RegExp, identity="iPod"}, Object { property="userAgent", regex=RegExp, identity="iPad"}, Object { property="userAgent", regex=RegExp, identity="Blackberry"}, Object { property="userAgent", regex=RegExp, identity="Android"}, Object { property="platform", regex=RegExp, identity="Mac"}, Object { property="platform", regex=RegExp, identity="Windows"}, Object { property="platform", regex=RegExp, identity="Linux"}] |
| Ext.is.Android | 它用在于 Android OS 中返回 true 值；否则返回 false。 |
| Ext.is.Desktop | 如果使用的是桌面，则此函数将返回 true，否则返回 false。 |
| Ext.is.iPhone | 这个函数将返回 true，如如果您使用的是手机，则此方法返回 true；否则，此方法返回 true。否则，它返回false。 |
| Ext.is.Phone | 如果您使用的是 iPhone，则此方法返回 true；否则，此方法返回 true。否则，它返回 false。用 iPhone的else它返回false。 |
Ext.is.iPod | 如果当您使用 iPod 时，它将返回 true，否则返回 false。 |
| Ext.is.iPad | 如果你如果使用 iPad，则它将返回 true，否则返回 false |
| Ext.is.Linux | 如果使用的是 Linux 操作系统，则返回true，否则返回 false。 |
| Ext.is.Mac | 如果您使用的是 Mac 操作系统，则返回true，否则返回 false。 |
| Ext.is.Blackberry | 如果您使用的是 Blackberry 操作系统，则返回 true，否则返回 false。 |
| Ext.is.Windows | 如果使用 Windows 操作系统，则返回 true，否则返回 false。 |
Ext.supports类:
因为名称表示这个类提供关于浏览器/设备支持的功能的信息，基本上是当前环境。
| 方法 | 描述 |
|---|---|
| Ext.supports.History | 这返回基于布尔值的设备支持HTML 5 历史作为 window.history 或不支持。 如果设备支持历史记录，那么它返回 true否则为false。 |
| Ext.supports.GeoLocation | 这返回基于布尔值的设备是否支持地理定位方法。 在内部它检查 navigator.geolocation 方法。 |
| Ext.supports.Svg | 这返回了基于布尔值的设备是否支持HTML 5功能可缩放矢量图形（SVG）方法。 在内部它检查doc.createElementNS＆amp;＆amp; !! doc.createElementNS（“http:/"+“/www.w3.org/2000/svg"，“svg"）。createSVGRect。 |
| Ext.supports.Canvas | 这个返回的布尔值基于设备支持的HTML 5功能canvas是否绘制方法。 在内部它检查doc.createElement（'canvas'）。getContext并基于此方法的输出返回值。 |
| Ext.supports.Range | 这个返回的布尔值是基于浏览器支持的 document.createRange 方法还是不行。 |
Ext.String类:
Ext.String 类有各种方法处理字符串数据，最常用的方法是编码解码，修剪，切换，urlAppend eyc。
编码解码函数:这些是 Ext.String 类中可用的函数，用于编码和解码 HTML 值。
| 方法 | 描述 |
|---|---|
| Ext.String.htmlEncode | 此函数用于编码 html 值以使其可解析。 E.g. Ext.String.htmlEncode("< p > Hello World < /p >"); Output - "< p > Hello World < /p >". |
| Ext.String.htmlDecode | 此函数用于解码编码的html值 E.g. Ext.String.htmlDecode("< p > Hello World < /p >");Output - "< p > Hello World < /p >" |
| Ext.String.trim | 此函数用于删除字符串中不需要的空格。 例如。 Ext.String.trim（'hello'）; 输出 - “hello" |
| Ext.String.urlAppend | 此方法用于在 URL 字符串中附加值 例如。 Ext.String.urlAppend（'https://www.google.com'，'hello'）; 输出 - “https://www.google.com?hello" Ext.String.urlAppend（'https://www.google.com?index=1'，'hello'）; 输出 - “https://www.google.com?index=1&hello" |
| Ext.String.toggle | 此函数用于在两个不同的值之间切换值。 例如。 var toggleString ='ASC' toggleString = Ext.String.toggle（a，'ASC'，'DESC'）; 输出 - DESC 作为 toggleString 具有值 ASC。 现在再次如果我们打印相同，我们将获得 toggleString =“ASC"这一次，因为它的值'DESC'。 它类似于三元运算符 toggleString =（（toggleString =='ASC'）？'DESC':'ASC'）; |
其他方法
| 方法 | 描述 | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Ext.userAgent（） | 此函数提供有关浏览器 userAgent 的信息。 UserAgent 用于标识 Web 服务器的浏览器和操作系统。 例如。 如果你在 Mozilla 工作，它会返回一些东西像:“mozilla / 5.0（windows nt 6.1; wow64; rv:43.0）gecko / 20100101 firefox / 43.0" | ||||||||||||||
| 版本相关功能 | 这些函数返回当前正在使用的浏览器的版本，如果在 firefox 浏览器中调用IE相关的函数，则返回 0.这些函数是 Ext.firefoxVersion，Ext.ieVersion等。 例如。 如果我们使用 firefox 浏览器，我们调用方法 Ext.ieVersion 获取版本的IE，那么它返回0或者如果我们在IE浏览器中使用相同的方法，那么它将返回我们使用的版本，如8,9 等。 | ||||||||||||||
| Ext.getVersion（） | 此函数返回当前使用的 Ext JS 版本。 例如。 如果我们调用Ext.getVersion（），它返回一个值的数组，如版本，短版本等。 Ext.getVersion（）。version返回程序中使用的Ext JS的当前版本，例如“4.2.2"。 | ||||||||||||||
| 浏览器相关功能 | 这些函数根据使用的浏览器返回布尔值。 这个方法是 Ext.isIE，Ext.isIE6，Ext.isFF06，Ext.isChrome。 例如。 如果我们使用 Chrome 浏览器，那么 Ext.isChrome 函数将返回 true，其他的都会返回 false。 | ||||||||||||||
| Ext.typeOf（） | 此函数返回变量的数据类型，例如 E.g. var a = 5; var b = 'hello'; Ext.typeOf(a); Output – Number Ext.typeOf(b); Output - String | ||||||||||||||
| DataType | DataType相关方法:这些函数根据变量的数据类型返回布尔值。 E.g. var a = ['a', 'bc']; var b = 'hello'; var c = 123; var emptyVariable; var definedVariable; function extraFunction(){return true;}
|
形式：在大多数Web应用程序表单是最重要的小部件从用户获取信息，如登录表单/反馈表单，以便该值可以保存在数据库中，以供将来参考。窗体小部件用于此目的。
在创建表单之前，我们应该知道xtype。
xType定义Ext JS UI组件的类型，它在组件的渲染期间确定，例如元素可以是一个文本框，对于该文本框我们有xType作为textField，或者元素可以只有数值，我们有Numeric xType。
此xType表示用户可以输入值的文本字段。 文本框的Ext JS类是“Ext.Form.Field.Text”
{ xtype: 'textfield', fieldLabel: 'Text field' } 这是为了表示一个文本区域。 Ext JS类为“Ext.form.field.TextArea”
{ xtype: 'textarea', fieldLabel: 'Text Area'}这是为了表示一个显示文本字段。 Ext JS类为“Ext.form.Label”
{ xtype: 'displayfield', fieldLabel: 'Display Field''}这是为了表示一个日期字段，它具有日期选择器来选择日期。 Ext JS类为“Ext.form.field.Date”
{ xtype: 'datefield', fieldLabel: 'Date picker'}这是一个按钮。 Ext JS类为“Ext.button.Button”
{ xtype: 'button', text : 'Button'}这是一个单选按钮，我们可以在所有单选按钮中选择任何一个，或者可以自定义一次选择多个。 Ext JS类为“Ext.form.field.Radio”。
{ xtype : 'fieldcontainer', fieldLabel : 'Radio field', defaultType: 'radiofield', defaults: { flex: 1 }, layout: 'hbox', items: [{ boxLabel : 'A', inputValue: 'a', id : 'radio1' },{ boxLabel : 'B', inputValue: 'b', id : 'radio2' },{ boxLabel : 'C', inputValue: 'c', id : 'radio3' }]}这是一个复选框字段，我们可以一次选择多个值。 Ext JS类为“Ext.form.field.Checkbox”
{ xtype: 'fieldcontainer', fieldLabel: 'Check Box Field', defaultType: 'checkboxfield', items: [{ boxLabel : 'HTML', inputValue: 'html', id : 'checkbox1' },{ boxLabel : 'CSS', inputValue: 'css', checked : true, id : 'checkbox2' },{ boxLabel : 'JavaScript', inputValue: 'js', id : 'checkbox3' }]}这是一个组合框。 组合框包含项目列表。 Ext JS类为“Ext.form.field.ComboBox”
{ xtype : 'combobox', fieldLabel: 'Combo box', store: store, valueField: 'name'}// store for drop down valuesvar store = Ext.create('Ext.data.Store', { id : 'statesid', fields: ['abbr', 'name'], data : [ {"abbr":"HTML", "name":"HTML"}, {"abbr":"CSS", "name":"CSS"}, {"abbr":"JS", "name":"JavaScript"} ]});这是为了表示一个时间字段，其中可以预定义最大和最小时间值。 Ext JS类为“Ext.form.field.Time”
{ xtype: 'timefield', fieldLabel: 'Time field', minValue: '6:00 AM', maxValue: '8:00 PM', increment: 30, anchor: '100%'}这是一个文件上传字段，我们可以浏览和上传文件。 Ext JS类为“Ext.form.field.File”
{ xtype: 'filefield', fieldLabel: 'File field', labelWidth: 50, msgTarget: 'side', allowBlank: false, anchor: '100%', buttonText: 'Select File...'}这是一个微调字段，其中列表可以旋转和添加。 Ext JS类为“Ext.form.field.Spinner”
{ xtype: 'spinnerfield', fieldLabel: 'Spinner field'}这是为了表示一个数字字段，其中我们可以预先定义max和min值。 Ext JS类为“Ext.form.field.Number”
{ xtype: 'numberfield', anchor: '100%', fieldLabel: 'Numeric field', maxValue: 99, minValue: 0}作为名称解释这个xtype是保持值隐藏。
{ xtype: 'hiddenfield', value: 'value from hidden field'}下面是创建表单的简单语法
Ext.create('Ext.form.Panel');下面是一个简单的例子，显示所有xtype的形式。
<!DOCTYPE html><html><head> <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="external nofollow" target="_blank" rel="stylesheet"> <script src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" ></script> <script type="text/javascript"> Ext.onReady(function() { Ext.create('Ext.form.Panel', { id: 'newForm', renderTo: 'formId', border: true, width: 600, items: [{ xtype: 'textfield', fieldLabel: 'Text Field' },{ xtype: 'displayfield', fieldLabel: 'Display Field' },{ xtype: 'textarea', fieldLabel: 'Text Area' },{ xtype: 'datefield', fieldLabel: 'Date picker' },{ xtype: 'button', text: 'Button' },{ xtype: 'fieldcontainer', fieldLabel: 'Radio field', defaultType: 'radiofield', defaults: { flex: 1 }, layout: 'hbox', items: [{ boxLabel: 'A', inputValue: 'a', id: 'radio1' },{ boxLabel: 'B', inputValue: 'b', id: 'radio2' },{ boxLabel: 'C', inputValue: 'c', id: 'radio3' }] },{ xtype: 'fieldcontainer', fieldLabel: 'Check Box Field', defaultType: 'checkboxfield', items: [{ boxLabel: 'HTML', inputValue: 'html', id: 'checkbox1' },{ boxLabel: 'CSS', inputValue: 'css', checked: true, id: 'checkbox2' },{ boxLabel: 'JavaScript', inputValue: 'js', id: 'checkbox3' }] },{ xtype: 'hiddenfield', name: 'hidden field ', value: 'value from hidden field' },{ xtype: 'numberfield', anchor: '100%', fieldLabel: 'Numeric Field', maxValue: 99, minValue: 0 },{ xtype: 'spinnerfield', fieldLabel: 'Spinner Field', step: 6, // override onSpinUp (using step isn't neccessary) onSpinUp: function() { var me = this; if (!me.readOnly) { var val = me.step; // set the default value to the step value if(me.getValue() !== '') { val = parseInt(me.getValue().slice(0, -5)); // gets rid of " Pack" } me.setValue((val + me.step) + ' Pack'); } }, // override onSpinDown onSpinDown: function() { var me = this; if (!me.readOnly) { if(me.getValue() !== '') { val = parseInt(me.getValue().slice(0, -5)); // gets rid of " Pack" } me.setValue((val - me.step) + ' Pack'); } } },{ xtype: 'timefield', fieldLabel: 'Time field', minValue: '6:00 AM', maxValue: '8:00 PM', increment: 30, anchor: '100%' },{ xtype: 'combobox', fieldLabel: 'Combo Box', store: Ext.create('Ext.data.Store', { fields: ['abbr', 'name'], data: [{ 'abbr': 'HTML', 'name': 'HTML' },{ 'abbr': 'CSS', 'name': 'CSS' },{ 'abbr': 'JS', 'name': 'JavaScript' }] }), valueField: 'abbr', displayField: 'name' },{ xtype: 'filefield', fieldLabel: 'File field', labelWidth: 50, msgTarget: 'side', allowBlank: false, anchor: '100%', buttonText: 'Select File...' }] }); }); </script></head><body> <div id = "formId"></div></body></html>运行结果如下：
窗口：这个UI组件是创建一个窗口，当任何事件发生时应该弹出窗口。 窗口基本上是一个面板，当任何事件发生时按钮/链接单击或悬停在其上应该出现。
这里是创建窗口的简单语法
win = new Ext.Window({ properties });下面是一个简单的例子显示电子邮件窗口
<!DOCTYPE html><html><head> <link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="external nofollow" target="_blank" rel="stylesheet" /> <script type="text/javascript" src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" ></script> <script type="text/javascript"> Ext.onReady(function() { win = new Ext.Window({ title:'Email Window', layout:'form', width:400, closeAction:'close', target : document.getElementById('buttonId'), plain: true, items: [{ xtype : 'textfield', fieldLabel: 'To' },{ xtype : 'textfield', fieldLabel: 'CC' },{ xtype : 'textfield', fieldLabel: 'BCC' },{ xtype : 'textfield', fieldLabel: 'Subject' },{ xtype : 'textarea', fieldLabel: 'Email Message' }], buttons: [{ text: 'Save Draft', handler: function(){Ext.Msg.alert('Save Draft', 'Your msg is saved');} },{ text: 'Send', handler: function(){Ext.Msg.alert('Message Sent', 'Your msg is sent');} },{ text: 'Cancel', handler: function(){win.close(); Ext.Msg.alert('close', 'Email window is closed');} }], buttonAlign: 'center', }); Ext.create('Ext.Button', { renderTo: Ext.getElementById('buttonId'), text: 'Click Me', listeners: { click: function() { win.show(); } } }); }); </script></head><body> <p> Click the button to see window </p> <div id = "buttonId"></div></body></html>代码运行结果如下所示：
HTML编辑器：这个Ext JS UI小部件是创建一个html编辑器，以便用户可以编辑它在字体，颜色，大小等方面输入的信息。
下面是创建HTML编辑器的简单语法
Ext.create('Ext.form.HtmlEditor')下面是一个简单的例子显示HTML编辑器
<!DOCTYPE html><html><head> <link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet"> <script src="./ext-6.0.0/build/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function() { Ext.create('Ext.form.HtmlEditor', { width: 580, height: 250, renderTo: document.getElementById('editorId') }); }); </script></head><body> <div id = "editorId"></div></body></html>运行结果如下：
进度条：这用于显示完成的工作的进度，并显示后端工作仍在进行中，所以请等待，直到完成。
它基本上是一个消息框，显示任务的进度。 下面是创建进度条的简单语法。
Ext.MessageBox.show({ title: 'Please wait', msg: 'Loading items...', progressText: 'Initializing...', width:300, progress:true, closable:false});下面是一个简单的例子显示进度条：
<!DOCTYPE html><html><head> <link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet"> <script src="./ext-6.0.0/build/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function() { function progressBar(v) { return function() { if(v == 10) { Ext.MessageBox.hide(); result(); } else { var i = v/9; Ext.MessageBox.updateProgress(i, Math.round(100*i)+'% completed'); } }; }; function showProgressBar() { for(var i = 1; i < 11; i++){ setTimeout(progressBar(i), i*500); } } function result(){ Ext.Msg.alert('status', 'Process completed succesfully'); } Ext.create('Ext.Button', { renderTo: Ext.getElementById('buttonId'), text: 'Click Me', listeners: { click: function() { Ext.MessageBox.show({ title: 'Please wait', msg: 'Loading items...', progressText: 'Initializing...', width:300, progress:true, closable:false }); showProgressBar(); } } }); }); </script></head><body> <p> Click the button to see progress bar </p> <div id = "buttonId"></div></body></html>这将产生以下结果
列：此布局用于在容器中显示多个列。 我们可以定义列的固定宽度或百分比宽度。 百分比宽度将基于容器的完整大小计算。
这里是使用列布局的简单语法
layout: 'column' 下面是一个简单的例子显示了列布局的用法
<!DOCTYPE html><html><head> <link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet"> <script src="./ext-6.0.0/build/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function() { Ext.create('Ext.panel.Panel', { renderTo : Ext.getBody(), layout : 'column' , xtype: 'layout-column', requires: ['Ext.layout.container.Column'], width : 600, items: [{ title : 'First Component width 30%', html : 'This is First Component', columnWidth : 0.30 },{ title : 'Second Component width 40%', html : '<p> This is Second Component </p> <p> Next line for second component </p>', columnWidth : 0.40 },{ title : 'Third Component width 30%', html : 'This is Third Component' , columnWidth : 0.30 }] }); }); </script></head><body></body></html>这将产生以下结果
这种布局用来管理多个子组件，并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式，也就是我们所说的分布提交。
这里是使用卡向导布局的简单语法
layout: 'card'
注意：
由于此布局本身不提供分步导航功能，所以需要用户自己开发该功能。由于只有一个面板处于显示状态，那么在初始时，我们可以使用setActiveItem功能来指定某一个面板的显示。当要显示下一个面板或者上一个面板的时候，我们可以使用getNext()或getPrev()来得到下一个或上一个面板。然后使用setDisabled方法来设置面板的显示。另外，如果面板中显示的是FORM布局，我们在点击下一个面板的时候，处理FORM中提交的元素，通过AJAX将表单中的内容保存到数据库中或者SESSION中。
下面的示例代码展示了一个基本的Card布局
<!DOCTYPE html><html><head> <link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet"> <script src="./ext-6.0.0/build/ext-all.js"></script> <script type="text/javascript"> Ext.application({ name: 'HelloExt', launch: function () { var navigate = function (panel, direction) { var layout = panel.getLayout(); layout[direction](); Ext.getCmp('move-prev').setDisabled(!layout.getPrev()); Ext.getCmp('move-next').setDisabled(!layout.getNext()); }; Ext.create('Ext.panel.Panel', { title: 'Card布局示例', width: 300, height: 202, layout: 'card', activeItem: 0, x: 30, y: 60, bodyStyle: 'padding:15px', defaults: { border: false }, bbar: [{ id: 'move-prev', text: '上一步', handler: function (btn) { navigate(btn.up("panel"), "prev"); }, disabled: true }, '->', { id: 'move-next', text: '下一步', handler: function (btn) { navigate(btn.up("panel"), "next"); } }], items: [{ id: 'card-0', html: '<h1>第一步</h1>' }, { id: 'card-1', html: '<h1>第二步</h1>' }, { id: 'card-2', html: '<h1>最后一步</h1>' }], renderTo: Ext.getBody() }); } }); </script></head><body></body></html>运行结果：
card TabPanel：此布局允许使用容器中的XY坐标定位项目。
这里是使用卡片标签面板布局的简单语法
layout: 'layout-cardtabs' 下面是一个简单的例子，显示卡片标签面板布局的用法。
<!DOCTYPE html><html><head> <link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet"> <script src="./ext-6.0.0/build/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function() { Ext.create('Ext.tab.Panel', { renderTo: Ext.getBody(), requires: ['Ext.layout.container.Card'], xtype: 'layout-cardtabs', width: 600, height: 200, items:[{ title: 'Tab 1', html: 'This is first tab.' },{ title: 'Tab 2', html: 'This is second tab.' },{ title: 'Tab 3', html: 'This is third tab.' }] }); }); </script></head><body></body></html>这将产生以下结果
vbox：此布局允许元素以垂直方式分布。 这是最常用的布局之一。
这里是使用vbox布局的简单语法
layout: 'vbox' 下面是一个简单的例子显示了vbox布局的用法
<!DOCTYPE html><html><head> <link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet"> <script src="./ext-6.0.0/build/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function() { Ext.create('Ext.panel.Panel', { renderTo : Ext.getBody(), layout : { type :'vbox', align: 'stretch' }, requires: ['Ext.layout.container.VBox'], xtype: 'layout-vertical-box', width : 600, height :400, frame :true, items : [{ title: 'Panel 1', html : 'Panel with flex 1', margin: '0 0 10 0', flex : 1 },{ title: 'Panel 2', html : 'Panel with flex 2', margin: '0 0 10 0', flex : 2 },{ title: 'Panel 3', flex : 2, margin: '0 0 10 0', html : 'Panel with flex 2' },{ title: 'Panel 4', html : 'Panel with flex 1', margin: '0 0 10 0', flex : 1 }] }); }); </script></head><body></body></html>运行结果如下:
hbox：这种布局允许元素以水平方式分布。
这里是使用hbox布局的简单语法
layout: 'hbox' 下面是一个简单的例子显示了hbox布局的用法
<!DOCTYPE html><html><head> <link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet"> <script src="./ext-6.0.0/build/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function() { Ext.create('Ext.panel.Panel', { renderTo : Ext.getBody(), layout : { type :'hbox' }, requires: ['Ext.layout.container.HBox'], xtype: 'layout-horizontal-box', width : 600, frame :true, items : [{ title: 'Panel 1', html : 'Panel with flex 1', flex : 1 },{ title: 'Panel 2', html : 'Panel with flex 2', flex : 2 },{ title: 'Panel 3', width: 150, html : 'Panel with width 150' },{ title: 'Panel 4', html : 'Panel with flex 1', flex : 1 }] }); }); </script></head><body></body></html>这将产生以下结果
自动：这是默认布局，根据元素数量决定元素的布局。
这里是使用自动布局的简单语法
layout: 'auto' 下面是一个简单的例子显示了使用自动布局
<!DOCTYPE html><html><head> <link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet"> <script src="./ext-6.0.0/build/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function() { Ext.create('Ext.container.Container', { renderTo : Ext.getBody(), layout : 'auto', width : 600, items : [{ title: 'First Component', html : 'This is First Component' },{ title: 'Second Component', html : 'This is Second Component' },{ title: 'Third Component', html : 'This is Third Component' },{ title: 'Fourth Component', html : 'This is Fourth Component' }] }); }); </script></head><body></body></html>这将产生以下结果
Ext.layout.BorderLayout对应面板布局layout配置项的名称为border。该布局包含多个字面板，是一个面向应用的UI风格的布局，它将整个容器分为5个部分，
分别是east, south, west, north, center, 加入到容器中的字面板需要指定region配置项来告知容器需要加入到哪个部分，并且该布局还内建了对面板分割栏的支持。
这里是使用边框布局的简单语法。
layout: 'border' 下面是一个简单的例子显示了Border布局的用法
<!DOCTYPE html><html><head> <link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet"> <script src="./ext-6.0.0/build/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function () { Ext.create('Ext.panel.Panel', { renderTo: Ext.getBody(), height: 300, width: 600, layout: 'border', defaults: { collapsible: true, split: true, bodyStyle: 'padding:15px' }, items: [{ title: 'Panel1', region: 'west', html: 'This is Panel 1' }, { title: 'Panel2', region: 'center', html: 'This is Panel 2' }, { title: 'Panel3', region: 'south', html: 'This is Panel 3' }, { title: 'Panel4', region: 'east', html: 'This is Panel 4' }, { title: 'Panel5', region: 'north', html: 'This is Panel 5' }] }); }); </script></head><body></body></html>运行结果如下：
锚点：此布局给予用户给出每个元素相对于容器大小的大小的特权。
这里是使用Anchor布局的简单语法：
layout: 'anchor'
下面是一个简单的例子，显示了Anchor布局的用法
<!DOCTYPE html><html><head> <link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet"> <script src="./ext-6.0.0/build/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function() { Ext.create('Ext.container.Container', { renderTo : Ext.getBody(), layout : 'anchor' , width : 600, items : [{ title : 'Panel 1', html : 'panel 1', height : 100, anchor : '50%' },{ title : 'Panel 2', html : 'panel 2', height : 100, anchor : '100%' },{ title : 'Panel 3', html : 'panel 3', height : 100, anchor : '-100' },{ title : 'Panel 4', html : 'panel 4', anchor : '-70, 500' }] }); }); </script></head><body></body></html>运行结果截图：
手风琴：这种布局允许将所有项目以堆叠方式（一个在另一个之上）放在容器内。
这里是使用手风琴布局的简单语法：
layout: 'accordion' 以下是一个简单的示例，显示了Accordion布局的用法
<!DOCTYPE html><html><head> <link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet"> <script src="./ext-6.0.0/build/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function() { Ext.create('Ext.container.Container', { renderTo : Ext.getBody(), layout : 'accordion' , width : 600, items : [{ title : 'Panel 1', html : 'Panel 1 html content' },{ title : 'Panel 2', html : 'Panel 2 html content' },{ title : 'Panel 3', html : 'Panel 3 html content' },{ title : 'Panel 4', html : 'Panel 4 html content' },{ title : 'Panel 5', html : 'Panel 5 html content' }] }); }); </script></head><body></body></html>这将产生以下结果
绝对：此布局允许使用容器中的XY坐标定位项目。
这里是使用绝对布局的简单语法
layout: 'absolute' 下面是一个简单的例子显示绝对布局的使用
<!DOCTYPE html><html><head> <link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet"> <script src="./ext-6.0.0/build/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function() { Ext.create('Ext.container.Container', { renderTo: Ext.getBody(), layout: 'absolute' , items: [{ title: 'Panel 1', x: 50, y: 50, html: 'Positioned at x:50, y:50', width: 500, height: 100 },{ title: 'Panel 2', x: 100, y: 95, html: 'Positioned at x:100, y:95', width: 500, height: 100 }] }); }); </script></head><body></body></html>这将产生以下结果
表：由于名称意味着此布局以HTML表格式在容器中排列组件。
这里是使用表布局的简单语法
layout: 'table' 下面是一个简单的例子显示了表布局的用法
<!DOCTYPE html><html><head> <link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet"> <script src="./ext-6.0.0/build/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function() { Ext.create('Ext.container.Container', { renderTo : Ext.getBody(), layout : { type :'table', columns : 3, tableAttrs: { style: { width: '100%' } } }, width:600, height:200, items : [{ title : 'Panel1', html : 'This panel has colspan = 2', colspan :2 },{ title : 'Panel2', html : 'This panel has rowspan = 2', rowspan: 2 },{ title : 'Panel3', html : 'This s panel 3' },{ title : 'Panel4', html : 'This is panel 4' },{ title : 'Panel5', html : 'This is panel 5' }] }); }); </script></head><body></body></html>这将产生以下结果
适合：在此布局中，容器用单个面板填充，当没有与布局相关的特定要求时，则使用此布局。
这里是使用Fit布局的简单语法。
layout: 'fit' 以下是一个简单的示例，显示了Fit布局的用法
<!DOCTYPE html><html><head> <link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet"> <script src="./ext-6.0.0/build/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function() { Ext.create('Ext.container.Container', { renderTo : Ext.getBody(), layout : { type :'fit' }, width : 600, defaults: { bodyPadding: 15 }, items : [{ title: 'Panel1', html : 'This is panel 1' },{ title: 'Panel2', html : 'This is panel 2' },{ title: 'Panel3', html : 'This is panel 3' },{ title: 'Panel4', html : 'This is panel 4' }] }); }); </script></head><body></body></html>运行结果如下：
当我们使用任何不是Triton主题的主题时，我们需要在我们的项目中显式地添加font-awesome样式表：
在HTML页面中添加用于字体样式的CDN文件。
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet" />
现在添加类为：
iconCls：'fa fa-car'
下面是一个添加font-awesome类的简单示例
<!DOCTYPE html><html><head> <link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" /> <script type="text/javascript" src="./ext-6.0.0/build/ext-all.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet" /> <script type="text/javascript"> Ext.onReady(function() { Ext.create('Ext.container.Container', { renderTo : Ext.getBody(), layout : 'auto' , width : 600, items : [{ xtype : 'button', iconCls : 'fa fa-car', text : 'Browse Fil1e' },{ xtype : 'button', iconCls : 'fa fa-file', text : 'Browse File3' },{ xtype : 'button', iconCls : 'fa fa-home', text : 'Browse File4' },{ xtype : 'button', iconCls : 'fa fa-folder', text : 'Browse File5' }] }); }); </script></head><body> <div id = "panel" > </div></body></html>这将产生以下结果
<!DOCTYPE html><html><head> <link href="./ext-6.0.0/build/classic/theme-triton/resources/theme-triton-all.css" rel="stylesheet" /> <script type="text/javascript" src="./ext-6.0.0/build/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function() { Ext.create('Ext.container.Container', { renderTo : Ext.getBody(), layout : 'auto' , width : 600, items : [{ xtype : 'button', iconCls : 'fa fa-car', text : 'Browse Fil1e' },{ xtype : 'button', iconCls : 'fa fa-file', text : 'Browse File3' },{ xtype : 'button', iconCls : 'fa fa-home', text : 'Browse File4' },{ xtype : 'button', iconCls : 'fa fa-folder', text : 'Browse File5' }] }); }); </script></head><body> <div id = "panel" > </div></body></html>这将产生以下结果
