没有合适的资源?快使用搜索试试~ 我知道了~
首页extjs6.5快速开始.pdf
extjs6.5快速开始.pdf
需积分: 12 56 下载量 7 浏览量
更新于2023-03-16
评论
收藏 791KB PDF 举报
欢迎来到 Ext JS 快速入门指南!在本指南中,我们将快速浏览您需要理解的最重要的核心概念,以成 为一个有效的 Ext JS 开发人员。在每一步中,我们将研究一个工作代码示例,然后讨论任何新概念。我们 将把每个部分调整为一个最终的公司目录应用程序,您可以在我们的小提琴工具中下载或使用。 要开始,让我们使用 Ext JS 的现代工具包来查看一个简单的“Hello World”应用程序。 Hello world! 提示:单击“Run”查看代码呈现为应用程序。(它将在这里启动) 正如您从这个内联代码示例中看到的,生成一个 Ext JS“Hello World”应用程序是一个非常简单的任务。
资源详情
资源评论
资源推荐
一、 介绍
欢迎来到 Ext JS 快速入门指南!在本指南中,我们将快速浏览您需要理解的最重要的核心概念,以成
为一个有效的 Ext JS 开发人员。在每一步中,我们将研究一个工作代码示例,然后讨论任何新概念。我们
将把每个部分调整为一个最终的公司目录应用程序,您可以在我们的小提琴工具中下载或使用。
要开始,让我们使用 Ext JS 的现代工具包来查看一个简单的“Hello World”应用程序。
Hello world!
提示:单击“Run”查看代码呈现为应用程序。(它将在这里启动)
正如您从这个内联代码示例中看到的,生成一个 Ext JS“Hello World”应用程序是一个非常简单的任务。
https://fiddle.sencha.com/#fiddle/1dma
提示:在实际应用程序中,您不会将所有代码都包含在单个文件中。虽然它会起作用,但
我们只是为了便于演示而这样做。如果你想下载适当结构化示例,请从这下面这个链接获取
应用程序。
https://codeload.github.com/sencha-extjs-examples/QuickStart/zip/master.zip
下一节
我们会在接下来的章节中讨论所有这些,但是我们想在开始时给你们一些好东西。可以随意摆弄代码
示例,或者转移到组件上!
二、 组件
让我们以 Ext JS 的基础来介绍 Ext JS 框架中的组件基础。
上面的代码示例看起来很熟悉。让我们来复习一下这些东西的含义。
你可以从我们的示例中看到,我们正在向 Viewport 添加一个对象。该对象包含以下属性:
xtype
html
“xtype”属性是特殊的,它表示我们想要创建的组件类型。除了“按钮”或“网格”之外,我们还可以使用许
多“xtype”的值,但是面板是一个很好的起点。
我们创建的组件类型决定了我们在这个对象中可以放置的其他属性。这些其他属性称为“配置属性”(或
简单的“configs”),用于配置我们创建的组件。属性对应于我们可能放在 HTML 元素上的属性。
配置信息
让我们讨论组件配置!
每个组件都有一个可设置的配置属性集合。这些东西可以从“标题”、“隐藏”、“模式”……正如我们所看
到的。通常,组件将会有最常见的配置默认为最常见的值,但您所看到的几乎所有的配置都是可配置的。
在我们的示例中,html 配置非常简单。html 配置的值被添加为组件的主要内容(在本例中是一个面板)。
组件
xtype 是一个使用方便的别名,可以替换完全限定全名的组件名称。例如,“xtype:‘panel’”替代“ext .
panel”。这允许您通过 xtype 快速创建和呈现组件,而不需要记住(除默认类型)完整的组件名。
提示:您可以在所有组件文档页面中找到 xtype 值。这是文档中所示的面板。您将在它的名称旁边找到
一个组件的 xtype。您甚至可以使用自己的 xtypes 创建自己的组件,但是稍后我们将讨论这个问题。
视图入口
您可能已经注意到,我们将我们的面板添加到一个叫做 ext . viewport 的东西中。viewport 是一种专门
的容器,它自动将自身大小调整到浏览器窗口的大小,并方便地管理添加到 viewport 的组件的大小和位置。
下一节
现在我们已经讨论了 Ext JS 组件的细节,让我们在讨论 Ext JS 容器时添加一个组件到面板中。
有关 configs 的更多信息,请查看我们的类系统概述。
三、 容器
在本节中,我们将把我们的面板变成一个 tabpanel,并讨论容器。容器是为拥有和管理子组件集合而
设计的组件。
您可能还记得,前面的示例有两个 configs、xtype 和 html。你可以在上面看到:
1. 通过将 xtype 值更新为 tabpanel,将我们的面板插入到 tabpanel。
2. 替换我们的占位符 html“hello world !插入到一个叫 items 的集合中。
通过使用 items,我们可以轻松地将“项”添加到容器中。您可以将项目看作是添加它们的组件的“子项”。
在本例中,items 数组包含两个对象。将创建选项卡的配置。
提示:您通常为每个条目设置一个 xtype,但是一些容器(包括 tabpanel)对他们的子项有默认的 xtype。
对于 tabpanel,默认的子 xtype 是“panel”。
除了将标签添加到 tabpanel 的项目之外,我们还添加了一个标题和每个影响每个标签的图标,如下:
title
标题将是出现在标签上的文本。
iconCls
iconCls 配置是一种方便的方法,可以根据您的内容来分配图标。在本例中,我们使用的是带有主题的
字体图标。
提示:查看标签类所有的 configs,您可以使用它来定制您的选项卡。您可能注意到这个类被标记为
private。这并不意味着你不能使用这个类的成员,只是你不应该手工创建一个标签。
下一节
空选项卡面板不是很有用,所以让我们添加一个网格,这样我们就可以显示一些数据了!
四、 数据展示/呈现
Ext JS 最强大的特性之一是数据驱动组件,如网格。通过将组件连接到数据源,可以在应用程序更改
的数据中创建动态应用程序。
您可以以许多不同的方式向 Ext JS 组件提供数据。一种方法是简单地内联数据:
Ext.Viewport.add({
xtype: 'tabpanel',
items: [{
title: 'Employee Directory',
xtype: 'grid',
iconCls: 'x-fa fa-users',
store: {
data: [{
"firstName": "Jean",
"lastName": "Grey",
"officeLocation": "Lawrence, KS",
"phoneNumber": "(372) 792-6728"
}, {
"firstName": "Phillip",
"lastName": "Fry",
"officeLocation": "Lawrence, KS",
"phoneNumber": "(318) 224-8644"
}, {
"firstName": "Peter",
"lastName": "Quill",
"officeLocation": "Redwood City, CA",
"phoneNumber": "(718) 480-8560"
}]
},
columns: [{
text: 'First Name',
dataIndex: 'firstName',
flex: 1
}, {
text: 'Last Name',
dataIndex: 'lastName',
flex: 1
}, {
text: 'Phone Number',
dataIndex: 'phoneNumber',
flex: 1
}]
}, {
title: 'About Sencha',
iconCls: 'x-fa fa-info-circle'
}]
});
正如您在上面的示例中看到的,我们添加了一个网格作为我们的第一个选项卡。Ext JS grid 是一种功
能强大的功能,可以用很少的代码行创建。它将数据转换成包含有内嵌排序的行和列的网格,以及一些其
他的即插即用功能,如分组、过滤等。
Stores
您可能注意到,我们的网格有一个新的配置—“store”。Ext JSstores 是存放所有数据记录的东西。存储
对于数据处理非常强大。它们可以轻松地对存储在它们中的数据进行排序、筛选和查询。
在大多数情况下,您的存储数据将来自外部源,如数据库或 REST API。然而,出于我们的目的,我们
只是在我们的存储数据配置上硬编码记录。
提示:您可以选择各种各样的数据源。这些允许您根据需要使用不同类型的格式化数据。
Records
记录是由字段组成的单个实体,就像在数据库表中构造记录一样。记录可以包含许多不同的字段,每
个字段可以被转换为不同的数据类型(int、float、string 等)。但是,Ext JS 在默认情况下通常会适当地转换
字段。
Fields
在本例中,我们的记录包含四个字段。这些字段有:
firstName
lastName
phoneNumber
officeLocation
在我们的网格中,我们有三列配置了 dataIndex。dataIndex 告诉列记录字段用于显示该列的显示值。
下一节
现在我们可以看到我们的数据,让我们来探索一下,当我们点击或点击我们的网格的行时,我们如何
对事件作出反应。
有关数据的更多信息,请查看我们的数据概述。
剩余14页未读,继续阅读
迷迭的心
- 粉丝: 5
- 资源: 26
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- zigbee-cluster-library-specification
- JSBSim Reference Manual
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0