Ext.js快速指南

Explanation

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。

高度和宽度属性用于提供面板的自定义尺寸。

标题属性是为面板提供标题。

Html 属性是要在面板中显示的html内容。

第2步

在标准浏览器中打开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.ClassNamestudentApp.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中所有容器的基类。

S.N.

描述

1

Components inside Container

此示例显示如何在容器内定义组件

2

Container inside container

此示例显示如何使用其他组件定义容器内的容器

有各种类型的容器Ext.panel.Panel，Ext.form.Panel，Ext.tab.Panel和Ext.container.Viewport是Ext JS中经常使用的容器。 下面是显示如何使用这些容器的示例。

S.N.

集装箱类型 描述

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在其库中定义了不同的布局，但我们也可以编写自定义布局。

S.N.

布局＆amp; 描述

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组件，可以根据您的要求进行定制。

S.N.

方法＆amp; 描述

1

Grid网格组件可用于以表格格式显示数据。

2

Form窗体小部件是从用户获取数据。

3

Message Box消息框基本上用于以警报框的形式显示数据。

4

Chart图表用于以图形格式表示数据。

5

Tool tip任何事件发生时，工具提示用于显示一些基本信息。

6

Window这个UI部件是创建一个窗口，当任何事件发生时应该弹出。

7

HTML editorHTML编辑器是非常有用的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

});

例子

下面是一个简单的例子

这将产生以下结果 -

在Extjs的拖放的帮助下，我们可以将数据从网格移动到网格和网格到窗体。下面是在网格和窗体之间移动数据的例子。

Drag and drop - Grid to Grid.

drag and drop - Grid to Form

Ext.js提供了许多要在您的应用程序中使用的主题。 你可以添加不同的主题的经典主题，看到输出的差异，这是简单地通过替换主题CSS文件，如下所述。

海王星主题

考虑你最初的Hello World应用程序。 从应用程序中删除以下CSS:

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css

添加以下CSS以使用海王星主题:

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css

要查看效果，请尝试以下程序: