
Ext JS开发大全
文章平均质量分 74
本系列文章于2020年更新至Ext JS最新版7.X的整体介绍。
内容主要包括:Ext JS 7框架整体与全面介绍
Ext JS 7 组件、数据以及后端整合
Ext JS 7 实战开发演练
最佳实践与常见错误及解决。
oscar999
毕业于中国科学技术大学,数据库四级、通过系统设计师、系统分析师、信息系统项目管理师资格认证。国际项目管理(IPMP)C级认证。超过15年软件项目开发和管理经验,精通Java Web相关技术(包括Spring系列、Ext JS等),对PHP、Python、C#、Vue等有涉猎。
展开
-
Ext JS实现带Search 按钮的Grid
实现思路其实很简单,点击搜索按钮的时候, 获取 pagingtoolbar 并且转到第一页即可,pagingtoolbar 提供了 moveFirst() 方法用于跳转到第一页。但是千万注意不要画蛇添足,不要强行设置以下参数,否则就永远是显示第一页的数据。原创 2024-12-05 22:36:27 · 115 阅读 · 0 评论 -
Ext JS+Spring Boot 使用Ajax方式上传文件
对象,将文件附加到这个对象中,然后通过 Ext JS 的 AJAX API 发送这个对象。: 根据需要选择合适的方法发送请求,FormData 将作为请求的一部分发送。: 创建 FormData 实例,并添加文件和任何需要一起发送的其他数据。使用 Ext JS 进行 AJAX 调用以传递文件通常涉及到创建一个。Spring Boot 后端使用。如果 Content-Type 设置为。的 Content-Type,则会报。: 首先需要获取到要传递的文件。原创 2024-06-25 22:40:26 · 362 阅读 · 0 评论 -
Ext JS 复选框(checkboxfield)在满足一定的条件时不能勾选的实现
Ext JS的复选框()是一个用于创建复选框(checkbox)的控件。复选框允许用户从多个选项中选择一个或多个。以下是关于 Ext JS定义是一个多选控件,它允许用户通过点击来选中或取消选中一个选项。与单选按钮(radio button)不同,复选框允许用户选择多个选项。使用场景:当需要在表单中为用户提供多个选项,并允许他们选择多个选项时,可以使用。例如,在问卷调查、设置选项或过滤条件等场景中,复选框都非常有用。配置选项提供了一系列配置选项,用于定制其外观和行为。这些选项包括字段标签(原创 2024-05-01 22:55:39 · 256 阅读 · 0 评论 -
Ext JS 之拖拽Grid(Drag and Drop Grid)
该插件会将特定的Ext.dd.DragZone和Ext.dd.DropZone实例附加到了Grid的View 上,DropZone是放置的区块,接收来自具有相同ddGroup的DragZone的拖放,包括来自同一网格内的拖放。在上面的示例中, 左边的Grid 既可以拖动到右边的Grid, 也可以在Grid 内部拖动, 如果要限定只能在Grid之间拖动,可以使用 dragGroup 和dropGroup。在放置操作的期间,将一个数据对象传递给参与的DropZone的drop处理程序。原创 2023-12-05 22:44:46 · 478 阅读 · 0 评论 -
Ext Direct 全解密
Ext Direct旨在通过提供单一接口来简化客户端和服务器之间的通信,从而减少验证数据和处理返回数据包(读取数据、错误条件等)通常需要的公共代码量。原创 2023-09-04 22:17:04 · 194 阅读 · 0 评论 -
Ext Direct 开发全介绍
Ext Direct 开发全介绍原创 2023-09-01 07:38:38 · 342 阅读 · 0 评论 -
Ext JS之Ext Direct快速入门
Ext Direct 是 Ext JS 框架中的一个功能模块,用于简化前端 JavaScript 应用程序与后端服务器之间的通信和数据交换。Ext Direct 提供了一种直接的、透明的方式来调用服务器上的方法和处理服务器响应,而无需编写大量的手动 AJAX 请求和处理代码。通过使用 Ext Direct,可以将服务端的方法变为可直接调用的 JavaScript 函数,并使用与本地 JavaScript 函数相同的方式进行调用。到这里可以了解 Ext Direct 这个专有名词的意思了, 就是原创 2023-08-30 22:05:08 · 1125 阅读 · 0 评论 -
基于Spring Boot 的 Ext JS 应用框架之coworkee
本篇介绍的是基于Spring Boot 的后端如何搭配这个Ext JS 的coworkee前端框架 实现对原Node JS 服务端的替换。原创 2023-08-28 22:41:11 · 963 阅读 · 0 评论 -
Ext JS 之Microloader(微加载器)
“Microloader”是 Sencha 数据驱动的 JavaScript 和 CSS 动态加载器的名称。原创 2023-08-23 22:12:59 · 564 阅读 · 0 评论 -
Ext JS中定义和使用类Ext JS风格的html 按钮
在实际开发的场景中有可能某些按钮是不能通过Ext JS的Button 类进行创建的, 但是页面效果上又需要和Ext JS的按钮保持一致。原创 2023-07-17 21:58:12 · 372 阅读 · 0 评论 -
Ext JS 静态公用方法的定义方式
是否可以做到类似Java代码中的静态函数呢? 也就是将这些函数定义成静态的公用函数,在每个视图控制器中都可以调用这个函数。这里的答案也是肯定的, 而且实现方式不止一种。原创 2023-07-16 21:40:17 · 395 阅读 · 0 评论 -
Ext JS 如何设置工具栏按钮和一般按钮保持统一样式
如何保持工具栏按钮和一般按钮的样式统一, 已经如何自定义按钮样式原创 2023-07-06 22:49:51 · 497 阅读 · 0 评论 -
Ext JS + Spring Boot 整合实现文件上传实例
Ext JS + Spring Boot 整合实现文件上传实例原创 2023-06-24 09:24:36 · 553 阅读 · 0 评论 -
5.6.1 Ext JS之标签页的关闭和批量关闭
如果标签页很多,逐个关闭势必很麻烦,是否有类似浏览器标签批量关闭的设置呢?答案是肯定的,Ext JS提供了批量关闭标签页的扩展插件原创 2023-06-08 21:47:16 · 985 阅读 · 0 评论 -
Ext JS 问题解决之——Uncaught TypeError: Cannot read property ‘isCollapsed‘ of undefined
在使用Ext JS Grid的分组和行插件实现四层Grid ,在最下层点击收合时出现如下错误:Uncaught TypeError: Cannot read property 'isCollapsed' of undefined原创 2023-06-05 21:41:16 · 254 阅读 · 0 评论 -
3.11 Ext JS文件上传基本使用
Ext JS实现文件选择字段的内部机制是使用隐藏的文件输入元素实现文件上传功能,在表单提交的时候进行文件上传, 这里使用的不是标准的Ajax方式,但是可以扩展文件上传组件, 使用Ajax异步上传,原创 2023-06-01 06:44:27 · 983 阅读 · 0 评论 -
Ext JS嵌套分组表格的实现
这种显示的方式可以显示 3个层级的数据,比如这里的国家 、 将军等级、将军信息。 如果最外层再使用分组的表格, 则可以显示 4个层级的信息, 这种方式对于多层级的数据显示很方便。原创 2023-05-30 22:39:29 · 701 阅读 · 0 评论 -
[Ext JS3.9] 标签面板(TabPanel )介绍与开发
标签面板是RIA 类应用使用较多的组件, 因为其可以显示的内容比较多。原创 2023-05-23 22:35:14 · 717 阅读 · 0 评论 -
[Ext JS 3.2] 显示字段(displayfield)
displayfield仅仅是用于显示的栏位, 不能编辑,将其放在form 中的时候:* 不会进行验证* 值也不会提交 (使用form.getValues() 获取form里面字段属性值的时候, 是不包括 displayfield的)原创 2023-04-26 21:35:37 · 563 阅读 · 0 评论 -
Ext JS 4实现合并行单元格
在Ext JS 中, 合并表头的列有现成方案, 但是合并行单元格不是extjs的现有功能,这个需要底层扩展, 也就是使用 table 的跨行实现。而Ext JS 7以及新版本和Ext JS4在最底层的Grid组成上又有差别,所以不同版本的实现又存在一些差异。原创 2023-04-24 22:51:51 · 925 阅读 · 0 评论 -
[Ext JS]3.6 Ext JS 表格(Grid)概览
Grid, 翻译过来是网格, 也就是表格。原创 2023-04-18 21:25:34 · 485 阅读 · 0 评论 -
[Ext JS]5.1 Ext JS数据分组表格(Group feature Grid)的分组行的显示(续)
除了配置 Grid的grouping features 的groupHeaderTpl 属性之外, 还可以通过另外一种方式实现类似的效果, 这种方式就是在Store中定义一个计算类型的属性, 使用这个属性来进行分组。原创 2023-04-12 22:52:37 · 221 阅读 · 0 评论 -
5.1.1 Ext JS之Grid actioncolumn动作列的动态显示
在Ext JS 的 Grid中添加动作列的方式是配置一个 actioncolumn类型的动作列,这个动作列可以包含多个图表的按钮。在有的时候场景中, 会根据不同行的数据来决定是否显示动作按钮, 也就是最后的效果是:有点行出现动作按钮,有的列不出现动作按钮。显示的效果如下图:原创 2023-04-05 22:00:43 · 372 阅读 · 0 评论 -
Spring Boot+Ext JS 前后端交互之Ajax参数传递方式汇总
Spring Boot+Ext JS 前后端交互之Ajax参数传递方式汇总原创 2023-04-03 23:02:52 · 631 阅读 · 3 评论 -
Ext JS数据分组表格(Group feature Grid)的数据排序
本篇承接下面两篇对数据分组表格的数据排序进行介绍。原创 2023-04-02 19:57:08 · 356 阅读 · 0 评论 -
[Ext JS]5.1 数据分组表格的分组行的显示
Ext JS 数据分组Grid的分组栏的多样化显示原创 2023-03-30 22:58:11 · 416 阅读 · 0 评论 -
12.2.3 Ext JS 可以上下移动行的Grid
实现Ext JS行上下移动的Grid1. 每一行数据有一个排序的编号, 这个编号是存储在数据库中2. 每一行都有向上和向下移动的按钮3. 点击向上移动, 当前行往前移动一行; 如果移动的行是第一行, 则移动到最后一行4. 点击向下移动, 当前行往后移动一行; 如果移动的行是最后一行, 则移动到第一行原创 2023-03-23 21:43:05 · 383 阅读 · 0 评论 -
10.1.1 Ext JS 面板添加工具栏的方式汇总
本篇汇总介绍在Ext JS的面板中添加工具栏的方式原创 2023-03-22 21:51:41 · 400 阅读 · 0 评论 -
3.4 Ext JS工具栏 toolbar全介绍
Toolbar,工具栏 ,是容器类的一个子类, 用于放置按钮等组件。其对应的类是Ext.toolbar.Toolbar ,原创 2023-03-20 22:31:53 · 603 阅读 · 0 评论 -
5.2.3 Ext JS如何实现动态改变树节点的字体颜色
有时候有需要修改某个或者某些节点的样式, 比如某些节点的字体加粗,或者改变某些节点的颜色。原创 2023-03-15 22:45:53 · 583 阅读 · 0 评论 -
10.8.1 Ext JS 组件获取方式汇总介绍
获取方式适用优缺点主页面中一直打开的组件, 比如导航栏简单, 直接父子关系不会变化的状况如果父子关系发生修改,则会出错comp.query(查找描述符)通用灵活,查找效率可能每那么高具体选用哪种,根据实际适用的状况来决定。当然, 如果偏好适用某种也是可以的, 只是 id这种全局的方式要慎用。原创 2023-03-14 23:03:27 · 477 阅读 · 0 评论 -
3.3 Ext JS之按钮(button)
* Button 是一般的按钮, 有按钮文字,图标,点击触发一个函数。* Split和Cycle常用来显示有子菜单的按钮。(虽然Button也可以添加子菜单,但是如果点击按钮除了显示子菜单之外,还需要其他的触发效果, 就需要使用 Split和Cycle了)。* Segmented用来显示分组的按钮。原创 2023-03-13 22:19:00 · 693 阅读 · 0 评论 -
3.2.8 Ext JS之字段集合(fieldset)
Field Set,字段集合, 就是将一组字段放在一个容器中, Ext JS提供的组件类是 :Ext.form.FieldSet ,xtype 是fieldset。原创 2023-03-12 21:59:24 · 521 阅读 · 0 评论 -
自定义Ext JS组件类
在Ext JS 中如何自定义一个组件类呢?实现方式是继承Ext.Component ,定义一个自己的组件类。 那么,这个组件类该怎样扩展自己的功能呢?原创 2023-02-21 22:17:24 · 369 阅读 · 0 评论 -
[Ext JS Grid] 前端数据分页Grid(内存)
在后端数据接口中, 根据page、start和limit 这三个参数, 返回对应页数的数据。但是如果使用的是memory等类型的前端数据时,数据是一开始就全部初始化好了的, 分页要怎样处理呢?原创 2023-01-28 11:28:58 · 732 阅读 · 0 评论 -
[Ext JS Grid] 后端数据分页Store Grid
Ext JS 提供了一个分页工具栏组件-pagingtoolbar, 这个可以添加到Grid 中,通过点击上一页/下一页按钮进行数据的分页查询。如果使用的是ajax 类型的代理的 Store, 数据从后端获取, 则在分页查询时,会额外附加page、start和limit 三个参数原创 2023-01-26 11:35:58 · 550 阅读 · 0 评论 -
[Ext JS] Grid Summary(汇总行)特性
Ext.grid.feature.Summary 是 Grid 的feature之一。这个特性会在表格的最下方多一行汇总。 汇总行主要包含两个部分:* 值的计算* 效果的渲染原创 2023-01-25 15:31:33 · 784 阅读 · 0 评论 -
Ext JS 后端数据树之多层级节点自动展开失败问题分析与解决
通过设置节点的expanded 为true 会自动调用后端接口并展出下一级, 但是在实际开发中发现: 如果树的数据量较大, 展开的层级大于1级, 则会出现第二层节点无法展出的状况, 通过Chrome 的控制台可以看到如下错误:原创 2022-10-11 22:37:39 · 572 阅读 · 0 评论 -
ExtJS+SpringBoot实现读取后端数据的树
本篇示例主要介绍基于Spring Boot使用后端数据的树, 以及展开某个节点, 以及定位节点原创 2022-10-09 22:38:30 · 573 阅读 · 0 评论 -
[Ext JS ] 动添切换字段的必填与非必填
在实际应用中, 页面或者表单的栏位是由联动的, 类似字段1的值为A时, 才显示字段2; 或者字段1的值为A时, 字段2才必填, 否则非必填。 也就是说是否必填是动添设置的。原创 2022-09-23 06:59:26 · 1231 阅读 · 0 评论