Extjs——初步学习

article/2025/11/5 22:59:20

    最近在系统学习Extjs框架,从刚一开始接触Extjs到现在发现对Extjs越来越喜欢了。刚开始只是想在页面上实现一个展示大量图片的功能,就像在线订餐系统展示菜单的效果那样,每幅图片上都有一些必要的信息、动作、链接等。效果如下图:

                      

    这样的实现功能其实就是图片及信息重复显示,刚开始本想借助像asp.netrepeater那样的服务器控件来达到一个模板绑定信息重复显示的功能,利用这样的控件还可以起到分页的效果。后来发现这样实现的可能性很小,因为一幅图片加上要显示的信息太多了,更何况还要做出那样美观(主要是布局和信息显示方式)的效果所以就得依靠大量的div来实现,而重点就在于如何把数据绑定到divdiv中的控件中,最后发现用这样的服务器控件是行不通的。所以后来就开始考虑有没有像jqueryUI那样的框架可以实现这样的功能,当然这样第一个想到的就是jqueryUI,用jqueryUI来实现图片的大量显示没有问题而且效果还是不错的,因为jqueryUI这样的功能的实现完全靠的是ajax异步与服务器数据交互方式,这样还解决了初始加载页面缓慢的问题。


对JqueryUI框架的一些认识

    

    但后来深入的研究后发现用jqueryUI来实现这样的功能还是有难度的,首先jqueryUI的主要用法就是在页面中把所有需要的标签或控件都在web页面中提前编辑好然后引入相应的js库,然后利用ajax技术或其他方法向后台请求数据,最后就是JqueryUI中的js控制服务器返回的数据显示到web页面上。其实像JqueryUI这样的实现的方法的确挺好的,web页面上负责显示数据信息,而jqueryUI中封装的那些js控制对数据的请求和显示方式(也可以称作一系列的动作),然而jqueryUI的控制层(js库)都是封装好的,也就是说我们可以利用JqueryUI来开发一个实现某一个独立功能的小插件例如日历、下拉框等等。但是如果我们想在原来的插件上继续丰富这些插件的功能就有些难度了,因为每个插件的都对应着一个独立的js(控制层),想在插件与插件之间建立一些联系或互动还是有难度的。所以说jqueryUI用起来相当的简单也容易上手,其关键点就是控制层(jqueryUIjavascript库)已经封装好,当我们用的时候只需要在页面上将对应的标签控件写好,然后按照jqueryUI提供的请求数据的接口去请求获取数据就行。但也就是因为这个原因我们只能按照他的接口去请求相应的数据,其它的方面像数据的显示方式和添加一些额外的动作等这样的功能是很难实现扩展的。

    直到后来接触到了Extjs,发现Extjs的功能太强大了,实现这样的功能实在是太简单了。首先Extjs最突出、最强大的功能是表格功能的实现,而上述功能的实现也基本上就是靠的表格数据处理而且还可以实现分页的效果,基于这个原因对Extjs的第一印象是相当不错的。


对web前台开发的新认识

    

    后来随着研究的深入发现Extjs的效果越来使人震惊,甚至改变了我对javascript的一些看法。从接触javascript以来一直以为javascript作为一个脚本语言,只是简单的配合实现一些动作、特效达到动态网页的效果,接触了Extjs后才发现原来javascript的功能是如此的强悍。首先没接触Extjs之前一直以为web前台开发只是在页面中添加一些客户端控件或服务器控件,最多就是利用div+css+javascript来控制布局和页面的美化。直到后来接触到了Extjsmvc开发模式之后,发现原来web前台开发还可以这样,蓦然回首发现以前的开发方式太散乱了,完全就是需要什么就加什么代码,尤其是javascript代码。这样的项目开发完成之后发现这一个javascript函数那一个javascript文件,复用的难度大不说,维护和实现功能的扩展更是难上加难!


Extjs强大的UI库及设计理念

    

    Extjs实现了form表单所需要的所有控件,而且界面美观,代码易复用。可以说Extjs功能丰富,无人能出其右. 无论是界面之美,还是功能之强,ext的表格控件都高居榜首。单选行,多选行,高亮显示选中的行,推拽改变列宽度,按列排序,这些基本功都是基本功能。自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能。再加上可编辑grid,添加新行,删除一或多行,提示脏数据,推拽改变grid大小,grid之间推拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里实现了。

    ExtJS可以用来开发RIA也即富客户端的AJAX应用,基于javascript脚本语言,主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。因此,可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术,通过参考JavaSwing等机制来组织可视化组件,无论从UI界面上CSS样式的应用,到数据解析上的异常处理,都可算是一款不可多得的JavaScript客户端技术的精品。Ext的UI组件模型和开发理念脱胎、成型于Yahoo组件库YUI和Java平台上Swing两者,并为开发者屏蔽了大量跨浏览器方面的处理。相对来说,EXT要比开发者直接针对DOM、W3C对象模型开发UI组件轻松。


one page one application

    

    到后来接触到Extjsone page one application的理念,更是令人大开眼界。所谓one page one application就是用一个网页来实现一个应用的所有功能。以前没接触过Extjs这样的框架,想实现一个B/S结构的系统靠一个网页怎么可能呢?Extjs让我信了,Extjs的开发方式和他强大的UI组件库完全可以实现这样效果。One page one application 使得在进行业务操作的时候,url的变化表现在一个框架页面内,从浏览器的地址看起来,只有一个地址。甚至,一些应用干脆弹出一个去掉了浏览器菜单、工具条、地址栏、状态栏的窗口,连地址都看不见。因此,一个页面就是一个应用,从用户的角度来说,对于操作型系统,是一种非常自然的体现。这样的效果看起来完全就跟c/s效果一样。


小结

    

    Extjs的学习还在继续,不过最开始接触Extjs的时候犹豫过,总是在考虑这样的问题,像Extjs这样的web前端框架值不值得学,又或者Jquery+jqueryUI与Extjs之间到底选择哪一个。基于这样的问题查了很多的资料,一直在拿jqueryUI与Extjs进行对比,找他们各自的优点、缺点。后来才发现原来对Extjs的学习已经深入,发现最初的哪些顾虑都是错误的想法,因为不管是Jquery还是Extjs他们之所以能称得上是框架,就必然由他们各自的优势。当然所有的东西有它的优点也就必然存在缺陷,不能因为一些缺点就否认了他的优点,更何况Extjs不是还可以兼容Jquery吗?


http://chatgpt.dhexx.cn/article/DVYK4YKp.shtml

相关文章

Extjs基础(一)

1.1基础学习 说明: 本示例的所有代码均在extjs6.2版本上测试通过,学习内容来源于官方文档和自己的一些见解。 1.1.1window组件 简单的一个window面板: title: 窗口标题,height: 220, //可以使用百分比width: 220, html: 内容部分,resizable: true, //…

ExtJS基础入门

公司需要用ExtJS搭建系统框架,然后,这个很老了,没有用过 。 开始进行时候一脸懵逼,因为搜索了相关的知识,面临如下问题: 1.版本太多,从一到六,不知从何入手 2.提供的教程和视频都…

extjs初学者教程

layout 1.面板 (1)类结构 Ext.Base Ext.AbstractComponent Ext.Component Ext.container.AbstractContainer Ext.container.Container Ext.panel.AbstractPanel …

ext.js入门

序言:extjs 是一种OOP语言,可以按照学习Java 的过程来进行学习,可以类比 Java中的图像界面JWT来进行学习。 工具 这些是sencha提供的用于Ext JS应用程序开发的工具,主要用于生产级别。Sencha Cmd Sencha CMD是一个提供Ext JS代码…

EXTJS入门教程及其框架搭建

EXTJS是一个兼容AJAX的前台WEB UI的框架,在普通的HTML文件的 BODY 元素中无须写任何HTML代码,就能产生相应的表格等元素。 原创不易,转载请注明出处:EXTJS入门教程及其框架搭建 代码下载地址:http://www.zuidaima.com/share/17244…

EXTJS详细教程

布局和容器 普通布局 Ext.create(Ext.panel.Panel, {renderTo: Ext.getBody(),width: 400,height: 300,title: Container Panel,items: [{xtype: panel,title: Child Panel 1,height: 100,width: 75%}, {xtype: panel,title: Child Panel 2,height: 100,width: 75%}] });列布…

国嵌视频,买了就是坑

国嵌买视频的,更新慢,谁敢抱怨,踢你,锁你账号,真无语,安卓没录完,3月拖到6月,拖到10月,引起公愤了,就说送路由视频,结果路由视频还没录呢&#xf…

【我爱嵌入式】

童鞋们 自动化嵌入式复习 总结了期末考试简答题的内容 第一章 嵌入式的定义 以应用为中心,以计算机技术为基础,软硬件可裁剪,对功能、可靠性、成本、体积、功耗有严格要求的专用计算机系统。嵌入式系统主要由嵌入式微处理器、外围硬件设备…

嵌入式教程:什么是嵌入式?

每每有小白接触嵌入式时,总认为是装修风格的一种,类似嵌入式壁炉之类的,而一些有过了 解的朋友可能会以为嵌入式教程就是教单片机的,学习后才发现单片机只是基础。 简单来说,嵌入式就是需要嵌入某些东西里面&#xff…

国嵌视频学习笔记---linux内核开发1

一、linux内核简介 1.linux系统由两部分组成:内核空间和用户空间。 2.用户空间包括:用户应用程序和C库 3.内核空间包括:系统调用接口、内核和体系结构相关代码。 4.ARM处理器7种工作模式:用户模式,快速中断模式、外…

国嵌学习——ARM

从NOR启动:在片选0位置放置的是2M的nor flash,在片选6位置放置的是内存0x30000000 ARM工作模式 ARM处理器的运行模式可以通过软件改变,也可以通过外部中断或异常处理改变。应用程序运行在用户模式下,当处理器运行在用户模式下时&…

国嵌C语言(6-10)

国嵌六: 空结构体的内存: struct D {}; int main(void) {struct D d1;struct D d2;printf("%d\n",sizeof(struct D));printf("%d,%0x\n",sizeof(d1),&d1);printf("%d,%0x\n",sizeof(d2),&d2); } 0 0&#xff…

【嵌入式】

一.进制转换:分别有以下前缀,2进制常用0B表示,8进制常用0O,16进制常用0X表示;1位八进制数等于3位二进制数,1位十六进制数等于4位二进制数,在二进制转化为八,十六进制数时。如果位数不…

关于嵌入式系统

说实话,笔者是对嵌入式有兴趣的,为什么,因为对于我这样的懒人,是希望以后出去找个稳定的工作,随着年龄的增长工资越高,经验越多,就越吃香,而不是当个最底层的码农,35岁之…

国嵌,够欠!---ARM在线教育误区

大家好,先自我介绍一下,我是国嵌学院的一个很普通的学员,因为应届生不好找工作,去培训机构培训又和上课时间冲突,所以选择了自主学习。在机缘巧合之下,购买了国嵌学院的嵌入式Linux开发课程,在此…

国嵌C语言总结(1-5)

国嵌一: 什么是数据类型? 数据类型是固定内存大小的别名,是创建变量的模子; 变量的本质? 变量是一段实际连续存储空间的别名;程序通过变量来申请并命名存储空间;通过变量的名字可以使用存储空…

使用新版IDEA创建JavaWeb项目详细图文教程

版权声明 本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhl 示例概述 三月中下旬了,答辩的日子也越来越近了。之前忙于考研的童鞋,之前忙着玩的童鞋,之前忘记做毕业设计的童鞋都开始忙碌起来了。奈…

idea2022创建javaweb项目

idea版本2022 1.2 //记录一下javaweb的创建 ​​​​​​ name项目名称 location存储地址 Application server:选择new 选中Tomact service 点击下一步 点击下一步就创建成功了

idea创建一个javaweb项目

前提 java环境以及tomcat的安装 1、IDEA创建Web项目 此处以Idea 2020.3.4举例 1、新建普通Java项目 注意:Idea2020无法直接新建JavaWeb项目,只能通过新建普通Java项目的方式间接新建JavaWeb项目。 选择项目位置和普通Java项目相同,此处略过…

java web项目_一个完整JavaWeb项目开发总结

一个JavaWeb项目开发总结 曾经,我跟朋友说我要去学Java,到现在1个月,我总算是七拼八凑的写出了我人生中的第一个Javaweb项目,虽然只是一次简单的爬虫,但是却也更坚定了我学Java的决心 就手写一份我做这次Javaweb项目得…