Ext JS 是一个 JavaScript 框架,它具有面向对象编程的功能。
Ext 是封装 Ext JS 中所有类的命名空间。
1.在 Ext JS 中定义类
Ext 提供了 300 多个类,我们可以用于各种功能。
Ext.define()用于在 Ext JS 中定义类。
语法如下
Ext.define(class name, class members/properties, callback function);
name: 类名称是根据应用程序结构的类名称。 appName.folderName.ClassName
studentApp.view.StudentView。
members/properties: 类属性/成员 - 定义类的行为。
function: 回调函数是可选的。 当类正确加载时,会调用它。
案例
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'
}]
});
2.对象的创建
Ext.create()
Ext.create('Ext.Panel', {
renderTo : 'helloWorldPanel',
height : 100,
width : 100,
title : 'Hello world',
html : 'First Ext JS Hello World Program'
});
注意:创建的对象必须是EXt本身的类或者是自定类
3.
Ext JS 中的继承
继承是将类 A 中定义的功能用于类 B 的原理。
在 Ext JS 继承可以使用两种方法 。
Ext.extend:
Ext.define(studentApp.view.StudentDetailsGrid, {
extend : 'Ext.grid.GridPanel',
...
});
Ext.js 集装箱
类似于 Java的集合中的list 集合
容器
Ext JS中的容器是我们可以添加其他容器或子组件的组件。
这些容器可以具有多个布局以将部件布置在容器中。
我们可以从容器和其子元素添加或删除组件。
Ext.container.Container是Ext JS中所有容器的基类。
Ext.js 容器内的组件
定义
容器中的组件:我们可以在容器内部有多个组件。
语法
这里是使用容器内部组件的简单语法。
创建一个容器里面的元素
var component1 = Ext.create('Ext.Component', {
html:'First Component'
});
创建一个容器并且将元素添加到容器里面
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
items: [component1]
});
案例
<!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 () {
var component1 = Ext.create("Ext.Component", {
html: "First Component",
});
var component2 = Ext.create("Ext.Component", {
html: "Second Component",
});
var component3 = Ext.create("Ext.Component", {
html: "Third Component",
});
Ext.create("Ext.container.Container", {
renderTo: Ext.getBody(),
title: "Container",
border: 1,
width: "50%",
style: { borderStyle: "solid", borderWidth: "2px" },
items: [component1, component2, component3],
});
});
</script>
</head>
<body></body>
</html>
Ext.js 容器内的容器
2022-05-19 11:34 更新
描述
容器内部容器:我们可以在其他容器内部的容器作为父容器的组件以及其他组件。
语法
这里是使用容器内容器的简单语法:
var container = Ext.create('Ext.container.Container', {
items: [component3, component4]
});
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
items: [container]
});
您可以将容器作为其他容器中的项目
<!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 () {
var component1 = Ext.create('Ext.Component', {
html:'First Component'
});
var component2 = Ext.create('Ext.Component', {
html: 'Second Component'
});
var component3 = Ext.create('Ext.Component', {
html: 'Third Component'
});
var component4 = Ext.create('Ext.Component', {
html: 'Fourth Component'
});
var container = Ext.create('Ext.container.Container', {
style: {borderStyle: 'solid', borderWidth: '2px' },
width: '50%',
items: [component3, component4]
});
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
title: 'Container',
border: 1,
width: '50%',
style: {borderStyle: 'solid', borderWidth: '2px' },
items: [component1, component2, container]
});
});
</script>
</head>
<body>
</body>
</html>
Ext.js 布局
布局是元素在容器中排列的方式。 这可以是水平的,垂直的或任何其他。 Ext JS在其库中定义了不同的布局,但我们也可以编写自定义布局。
此布局允许使用容器中的XY坐标定位项目。
Ext.js 手风琴布局(抽屉型可以推拉的列表)
描述
手风琴:这种布局允许将所有项目以堆叠方式(一个在另一个之上)放在容器内。
Ext.js 锚点布局(可以自定义每个元素的大小)
描述
锚点:此布局给予用户给出每个元素相对于容器大小的大小的特权。
Ext.js 边框布局(格子布局,每个格子可以分为上中左右四个部分划分)
描述
Ext.layout.BorderLayout对应面板布局layout配置项的名称为border。该布局包含多个字面板,是一个面向应用的UI风格的布局,它将整个容器分为5个部分,
分别是east, south, west, north, center, 加入到容器中的字面板需要指定region配置项来告知容器需要加入到哪个部分,并且该布局还内建了对面板分割栏的支持。
案例
Ext.js 自动布局(由元素的个数自动加载div)
效果
Ext.js card_panel布局(可以有多个标签,切换)
描述
card TabPanel:此布局允许使用容器中的XY坐标定位项目。
Ext.js card_wizard布局(面板下一步展示另外一个面板)
Ext.js card_wizard布局_w3cschool
描述
这种布局用来管理多个子组件,并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式,也就是我们所说的分布提交。
Ext.js 列布局
Ext.js card_wizard布局_w3cschool
Ext.js 自适应布局
描述
适合:在此布局中,容器用单个面板填充,当没有与布局相关的特定要求时,则使用此布局。
结果
Ext.js 表格布局
描述
表:由于名称意味着此布局以HTML表格式在容器中排列组件。
Ext.js vbox布局
描述
vbox:此布局允许元素以垂直方式分布。 这是最常用的布局之一。
结果
Ext.js hbox布局
描述
列:此布局用于在容器中显示多个列。 我们可以定义列的固定宽度或百分比宽度。 百分比宽度将基于容器的完整大小计算。
描述
hbox:这种布局允许元素以水平方式分布。
Ext.js 组件(页面中展示数据的个中形式)
ExtJS UI由一个或多个名为Components.Ext的widget组成.JS具有定义的各种UI组件,可以根据您的要求进行定制。
Ext.js 拖放(鼠标拖拽元素效果)
描述
拖放功能是为使开发人员轻松工作而添加的强大功能之一。拖动操作基本上是在某些UI元素上的点击手势,同时按住鼠标按钮并移动鼠标。 在拖动操作后释放鼠标按钮时,会发生放置操作。
Ext.js 主题
Ext.js提供了许多要在您的应用程序中使用的主题。 你可以添加不同的主题的经典主题,看到输出的差异,这是简单地通过替换主题CSS文件