《Ext JS实战》——1.4 Ext JS 3.0的新特性

简介: Web远程调用是一种可以在JavaScript中很容易地执行服务器端定义的方法的机制。如果希望把服务器端的方法暴露给客户端,但又不希望和Ajax的连接管理打交道,用这种方法就非常方便了。Ext.Direct会替我们管理Ajax请求,并充当客户端的JavaScript与任意一种服务器端语言之间的桥梁。

本节书摘来自异步社区《Ext JS实战》一书中的第1章,第1.4节,作者:【美】Jesus Garcia著,更多章节内容可以访问云栖社区“异步社区”公众号查看

1.4 Ext JS 3.0的新特性

Ext JS 2.0中引入的一些变化是颠覆性的,这就导致从级到2.0相当困难。这主要是因为这一版引入了一个更加现代的布局管理器以及一个崭新的、健壮的组件层次,许多Ext JS 1.x的代码都会因此而崩溃。值得庆幸的是,由于Ext JS 2.0的良好的工艺设计,从Ext JS 2.0到3.0的移植就非常容易了。尽管Ext JS 3.0新增的内容并不怎么神奇,不过最新的版本还是可圈可点的,有些新增的特性还是值得讨论的。

1.4.1 Ext JS通过Direct完成远程操作
Web远程调用是一种可以在JavaScript中很容易地执行服务器端定义的方法的机制。如果希望把服务器端的方法暴露给客户端,但又不希望和Ajax的连接管理打交道,用这种方法就非常方便了。Ext.Direct会替我们管理Ajax请求,并充当客户端的JavaScript与任意一种服务器端语言之间的桥梁。

这个功能有很大的好处,包括对方法的集中管理以及方法的统一。框架中有了这个技术后就能保证客户间的一致性,例如数据类。既然说到这里,我们就看看这个新增的Ext.Direct给数据类带来了哪些新的类。

1.4.2 数据类
Ext.data这个类是整个框架中处理所有数据的中枢。这个数据类负责数据管理的方方面面,包括数据的抽取、读、解析、创建记录,以及把记录加载到数据存储器。通过新加的Direct,Ext JS还同时增加了几个好用的Data类,包括DirectProxy和DirectStore,进一步简化了与Web远程调用的整合。

接下来,看看框架后台的变化和新增的一些UI部件。

1.4.3 新的布局
在Ext JS 3.0中出现了6个新的布局,包括AutoLayout、MenuLayout、BoxLayout、VBoxLayout和HBoxLayout。MenuLayout是对2.0版中菜单项的组织形式的一个改进。类似地,ToolbarLayout也给Toolbar增加了重要的特性,例如溢出管理,如图1-14所示。这两种布局既不是给它们的目标部件用的,也不是给最终用户用的。

screenshot

图1-14 新的ToolbarLayout负责检查工具栏的大小,并且在菜单项要发生溢出时创建一个菜单存根

如图1-14所示,ToolbarLayout会检测到工具条中内容发生了溢出,然后会自动地创建一个菜单来包括并罗列剩余的项目,正是MenuLayout的变化才给这个功能提供了支持。

BoxLayout类是一个抽象类,也就是说,它并不是给最终用户使用的,而是为VBoxLayout和HBoxLayout类提供基本功能。VBoxLayout和HBoxLayout是对最终用户可用的,它是布局列表有用的补充。HboxLayout使得能够在水平方向上拆分容器的内容区域,而VBoxLayout的功能类似,不过是在垂直方向上拆分,如图1-15所示。

screenshot

许多有经验的Ext JS开发人员可能会觉得HBoxLayout看起来像是ColumnLayout。尽管从提供的功能来看,二者确实相似,不过HBoxLayout的功能远超过了ColumnLayout的功能,它可以根据权重把它的子元素在垂直或者水平方向上拉伸,这也叫做弹性收缩。不过和ColumnLayout比起来,子元素不会在容器内折行。这两种布局把框架的布局功能引领到了一个新的高度。

除了在布局上的变化,GridPanel的支持类ColumnModel也有一些根本的变化。下面先看看这些变化,并弄清楚为什么这些变化有助于我们的开发。

1.4.4 网格中ColumnModel的增强
GridPanel部件用ColumnModel控制列的组织方式、大小设置以及显示。在Ext JS 3.0之前,每个列都是一个配置对象列表,这个列表用于ColumnModel。

对于ColumnModel中的每个列,都可以通过自定义的渲染器增强或者修改数据的显示方式,所谓渲染器其实就是一个方法,每一列的每个数据点都会调用这个方法,然后返回格式化的数据或HTML。这也就是说,如果要把日期格式化或者以某种特定方式进行显示,就必须自己配置。后来人们发现这种工作实在太多了。因此到了这一版,ColumnModel就朝着简化我们工作的方向进行了改变。

ColumnModel中的单个列进行了抽象,并创建了一个叫做grid.Column的全新的类。从此开始,许多好用的Column子类也就出现了,包括NumberColumn、BolleanColumn、TemplateColumn以及DateColumn,每一种都可以按用户的要求来显示数据。例如可以使用DateColumn并指定一个格式来显示格式化的日期数据。另一个可喜的变化是TemplateColumn,可以把XTemplate用于GridPanel,这样就可以很容易地把数据变成自己的HTML片段。不管使用哪一种Column的子类,都无须自定义渲染器。当然需要的时候也可以自定义渲染器。

许多应用程序都需要用表格的形式展示数据。尽管GridPanel是个不错的方案,但是对于只需要很少甚至完全不需要用户交互的普通数据展示来说,计算的代价还是太大。这时,ListView或DataView的扩展就有了用武之地了。

1.4.5 ListView
有了框架的这些新特性后,现在再用表格的形式展示数据就没有性能的损失了。图1-16显示了ListView的实际效果。尽管看起来和GridPanel一样,但是为了保证最佳性能,这里牺牲了例如拖放、列的重新排序以及用键盘导航等功能。这主要是因为ListView并没有例如之前讨论的ColumnModel之类的精致的、功能丰富的支持类。

用ListView来显示数据可以保证DOM操作的快速响应,不过别忘了它没有类似GridPanel的那些功能。到底用哪一个取决于应用程序的需求。

screenshot

如果在屏幕上显示的数据总是文本数据,Ext JS确实不错,不过它缺少图形化的数据展示方式。我们看看Ext JS 3.0中又有些什么变化。

1.4.6 Ext JS中新增的图表功能
Ext JS 2.0中缺少的就是图表。值得庆幸的是,开发团队对社区的抱怨没有不闻不问,在Ext JS 3.0中引入了图表。这也是一个非常好的扩展,并且遵循了Ext JS的布局模型。

除了图1-17所示的折线图(Line)和柱状图(Colwn)处,框架还提供有条形图(Bar)、饼图(Pie)以及笛卡儿坐标Cartesian,图表满足数据可视化的需求。

screenshot

图1-17 这些图表给框架带来了丰富的趋势数据,不过要注意这个新挂架需要Flash

现在所有的铺垫都做得差不多了。不过,还要先把框架下载下来并配置好,然后再讨论开发。

相关文章
|
1月前
|
存储 安全 API
Next.js 实战 (九):使用 next-auth 完成第三方身份登录验证
这篇文章介绍了next-auth,一个为Next.js设计的身份验证库,支持多种认证方式,如电子邮件和密码、OAuth2.0提供商(如Google、GitHub、Facebook等)以及自定义提供商。文章包含了如何配置Github Provider以及会话管理,并提到了适配器Adapters在next-auth中的作用。最后,文章强调了next-auth的强大功能值得进一步探索。
74 10
|
1月前
|
设计模式 数据安全/隐私保护
Next.js 实战 (七):浅谈 Layout 布局的嵌套设计模式
这篇文章介绍了在Next.js框架下,如何处理中后台管理系统中特殊页面(如登录页)不包裹根布局(RootLayout)的问题。作者指出Next.js的设计理念是通过布局的嵌套来创建复杂的页面结构,这虽然保持了代码的整洁和可维护性,但对于特殊页面来说,却造成了不必要的布局包裹。文章提出了一个解决方案,即通过判断页面的skipGlobalLayout属性来决定是否包含RootLayout,从而实现特殊页面不包裹根布局的目标。
90 33
|
25天前
|
JavaScript 前端开发 容器
盘点JavaScript中所有声明变量的方式及特性
本文详细介绍了JavaScript中变量定义的多种方式,包括传统的`var`、`let`和`const`,以及通过`this`、`window`、`top`等对象定义变量的方法。每种方式都有其独特的语法和特性,并附有代码示例说明。推荐使用`let`和`const`以避免作用域和提升问题,谨慎使用`window`和`top`定义全局变量,不建议使用隐式全局变量。掌握这些定义方式有助于编写更健壮的JS代码。
38 11
|
1月前
|
中间件 API
Next.js 实战 (八):使用 Lodash 打包构建产生的“坑”?
这篇文章介绍了作者在使用Nextjs15进行项目开发时遇到的部署问题。在部署过程中,作者遇到了打包构建时的一系列报错,报错内容涉及动态代码评估在Edge运行时不被允许等问题。经过一天的尝试和调整,作者最终删除了lodash-es库,并将radash的部分源码复制到本地,解决了打包报错的问题。文章最后提供了项目的线上预览地址,并欢迎读者留言讨论更好的解决方案。
41 10
|
2月前
|
前端开发 API 开发者
Next.js 实战 (五):添加路由 Transition 过渡效果和 Loading 动画
这篇文章介绍了Framer Motion,一个为React设计的动画库,提供了声明式API处理动画和页面转换,适合创建响应式用户界面。文章包括首屏加载动画、路由加载Loading、路由进场和退场动画等主题,并提供了使用Framer Motion和next.js实现这些动画的示例代码。最后,文章总结了这些效果,并邀请读者探讨更好的实现方案。
|
1月前
|
JavaScript 前端开发 API
Next.js 实战 (六):如何实现文件本地上传
这篇文章介绍了在Next.js中如何实现文件上传到本地的方法。文章首先提到Next.js官方文档中没有提供文件上传的实例代码,因此开发者需要自行实现,通常有两种思路:使用Node.js原生上传或使用第三方插件如multer。接着,文章选择了使用Node.js原生上传的方式来讲解实现过程,包括如何通过哈希值命名文件、上传到指定目录以及如何分类文件夹。然后,文章展示了具体的实现步骤,包括编写代码来处理文件上传,并给出了代码示例。最后,文章通过一个效果演示说明了如何通过postman模拟上传文件,并展示了上传后的文件夹结构。
|
28天前
|
监控 安全 中间件
Next.js 实战 (十):中间件的魅力,打造更快更安全的应用
这篇文章介绍了什么是Next.js中的中间件以及其应用场景。中间件可以用于处理每个传入请求,比如实现日志记录、身份验证、重定向、CORS配置等功能。文章还提供了一个身份验证中间件的示例代码,以及如何使用限流中间件来限制同一IP地址的请求次数。中间件相当于一个构建模块,能够简化HTTP请求的预处理和后处理,提高代码的可维护性,有助于创建快速、安全和用户友好的Web体验。
|
2月前
Next.js 实战 (二):搭建 Layouts 基础排版布局
本文介绍了作者在Next.js v15.x版本发布后,对一个旧项目的重构过程。文章详细说明了项目开发规范配置、UI组件库选择(最终选择了Ant-Design)、以及使用Ant Design的Layout组件实现中后台布局的方法。文末展示了布局的初步效果,并提供了GitHub仓库链接供读者参考学习。
Next.js 实战 (二):搭建 Layouts 基础排版布局
|
2月前
|
存储 网络架构
Next.js 实战 (四):i18n 国际化的最优方案实践
这篇文章介绍了Next.js国际化方案,作者对比了网上常见的方案并提出了自己的需求:不破坏应用程序的目录结构和路由。文章推荐使用next-intl库来实现国际化,并提供了详细的安装步骤和代码示例。作者实现了国际化切换时不改变路由,并把当前语言的key存储到浏览器cookie中,使得刷新浏览器后语言不会失效。最后,文章总结了这种国际化方案的优势,并提供Github仓库链接供读者参考。
105 5
|
2月前
Next.js 实战 (三):优雅的实现暗黑主题模式
这篇文章介绍了在Next.js中实现暗黑模式的具体步骤。首先,需要安装next-themes库。然后,在/components/ThemeProvider/index.tsx文件中新增ThemeProvider组件,并在/app/layout.tsx文件中注入该组件。如果想要加入过渡动画,可以修改代码实现主题切换时的动画效果。最后,需要在需要的位置引入ThemeModeButton组件,实现暗黑模式的切换。

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    53
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    30
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    48
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    59
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    58
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    58