我与EXTJS有个约会
Author:yongtree
说在前头
为什么学习EXTJS?
自己以前对JS相当无知,认为这就是个鸡肋——“食之无味,弃之可惜”。参加工作后,进入到实际的开发中才发现,JS还是一个非常有用的东东,有些前台的功能单靠Java这样的后台程序语言是不能搞定的,于是就慢慢的使用JS,并同时开始了AJAX之旅。使用EXTJS也就源于最近一个项目的开发,由于以往开发系统都是以实现功能为主,很少关注用户的体验,这不仅让用户怨声载道,也让我们自己感到审美疲劳。在以用户为中心的软件2.0时代,良好的用户体验是我们不得不正视的问题,于是就有了和EXTJS的约会。EXTJS也的确是一个很强大的东东,首先是那华丽的外表给我们带来的视觉冲击,让我毫不犹豫的就爱上她。而它的编写风格也和JAVA有异曲同工之妙,让我这个java程序员不会感到很陌生。由于公司要对OA改版,为了在用户体验上比以前有个很大的变化,我们决定使用EXTJS。
为什么写EXTJS的初级的、简单的教程?
在学习、开发的过程中,存在着很多的问题,也有很多的收获,写这个教程也作为对EXTJS学习开发的一个总结,以便在以后的开发中能够不再为查询资料而烦恼,同时也可让其他成员能够快速的学习。EXTJS进入中国时间还不是太长,介绍EXTJS的书籍几乎没有,有的还不是发行版本。网上中文资料非常零散,有比较综合的教程,还不全部免费公开,着实有点不爽。自己在学习和开发的过程中,总结了EXTJS开发的一些心得,当然也有还未解决的问题。这个教程也许非常的简陋,只是能给初学者一个快速学习的帮手,同时也让大家一起参与进来,共同讨论和解决开发中带来的实际问题,共享自己的学习成果,共同进步。我希望这个教程不是某个人的教程,而是致力于开源、共享人士一起努力,共同创作的结晶。
第一章:约会之前。做点准备工作
1.1 获得EXTJS
我们可以在EXTJS的官方网站上(http://extjs.com/products/extjs/download.php)免费获取。现在最新的版本为EXTJS2.1(如下图所示),在我开发的系统中我们已经升级了EXTJS2.1,该教程也使用2.1版本。
下载Ext JS 2.1 SDK解压后如下图所示:
adapter:负责将里面提供第三方底层库(包括Ext 自带的底层库)映射为Ext 所支持
的底层库。
build: 压缩后的ext 全部源码(里面分类存放)。
docs: API 帮助文档。
exmaples:提供使用ExtJs 技术做出的小实例。
resources:Ext UI 资源文件目录,如CSS、图片文件都存放在这里面。
source: 无压缩Ext 全部的源码(里面分类存放) 遵从Lesser GNU (LGPL) 开源的
协议。
Ext-all.js:压缩后的Ext 全部源码。
ext-all-debug.js:无压缩的Ext 全部的源码(用于调试)。
ext-core.js:压缩后的Ext 的核心组件,包括sources/core 下的所有类。
ext-core-debug.js:无压缩Ext 的核心组件,包括sources/core 下的所有类。
同时你也可以下载本地安装的API,这个API依赖于Adobe公司的AIR,可以到Adobe官方网站自行下载。
1.2 怎样使用EXTJS
在我们自己的页面中我们需要导入一下几个资源文件,这几个文件可以说在我们系统开发中是必不可少的。
ext-all.css:EXTJS各组件的所有css样式定义都放在该文件中。
ext-base.js:EXTJS框架基础库。当然你也可以根据需要采用其他的框架基础库。
ext-all.js:EXTJS压缩后的核心库。
ext-all-debug.js:EXTJS未压缩的核心库,用于调试使用。
ext-lang-zh-CN.js:EXTJS提供的中文语言包。
解惑:我们在开发的时候,有时候会经常报Ext未定义的错误。不能加载EXTJS核心库,这是因为这几个js的加载有一定的顺序。ext-base.js一定要排在最前面。
1.3 开发、调试EXTJS的工具
“工欲善其事,必先利其器”,一个好的工具不仅能提高我们的开发效率,同时也能让我们开发出更加完善的系统。
Aptana Studio 一谈到JavaScript的开发工具,就不得不提Aptana了。就我实际工作来说,每天都用它来完成Adobe AIR的工作。但是Aptana当前捆绑的Ext的版本有些旧(1.1的),下面就介绍一个插件的安装方法,让Aptana支持到2.0(由Markus Schmidleitner提供,用起来还不错):
1.下载并安装Aptana Studio; 2.打开你的Aptana程序目录(我这儿是C:\Aptana),复制jar格式的文件到plugins目录; 3.重启Aptana; 4.进入Window -> Preferences -> Aptana -> Editors -> JavaScript -> Code Assist选择Ext 2.0(或要反选Ext.1.1)。
Aptana Studio with Ext 2.0 code assist
|
Spket Eclipse插件与IDE Spket IDE是目前支持Ext 2.0最为出色的IDE。它采用.jsb project file 文件并将继承于基类和所有文档的内容嵌入到生成代码提示的Script doc中。 由于Spket只是一个单纯的编辑器,没有其它格式的支持(如CSS),所以我的做法是用它的Eclipse插件形式,安装到Aptana。安装办法如下:
1.下载安装Aptana Studio(包含有Eclipse); 2.启动Aptana并打开程序菜单到:Help → Software Updates → Find and Install… → Search for new features to install → New remote site… 3.名称: “Spket”,地址URL是http://www.spket.com/update/ 4.重启Aptana; 5.观看一下这个SketIDE的教程,看看Ext代码提示的功能有多省事(你可以修改/src/ext.jsb 保持最新版的Ext),基本步骤如下:
- Window → Preferences → Spket → JavaScript Profiles → New ;
- 输入“ExtJS”点击OK;
- 选择“ExtJS” 并点击“Add Library”然后在下拉条中选取“ExtJS”;
- 选择 “ExtJS”并点击“Add File”,然后在你的./ext-2.x/source目录中选取“ext.jsb” 文件;
- 设置新的ExtJS Profile,选中并点击“JavaScript Profiles” 对话框右手边的“Defalut”按钮;
- 重启Aptana;
- 创建新的JS文件并输入: Ext这样就可设置Ext Code代码自动完成的功能。
由于你是在Aptana中安装插件的,Aptana还是你默认的JS编辑器,所以要试用Spket,你要在那个文件上选中“Open with”-> Spket JavaScript Editor 。
![点击查看原始大小图片](../../../upload/picture/pic/14669/b965fec7-e745-3d2f-89fa-571287e74cea.jpg)
Spket in Aptana with full documentation and code assist
|
Komodo Edit
Komodo Edit为众多格式文件提供支持,包括Perl、PHP、Python、Ruby和Tcl。亦支持浏览器方面的代码包括有JavaScript、CSS、HTML和XML。Windows、Mac Os和Linux平台都可用。 安装Ext支持下的Komodo:
1.下载和安装Komodo Edit; 2.下载API catalog;
Ext 2.0的API包含许多的方法(函数)、属性和配置项,涵盖的面非常大,要全部列出几乎是不可能的。虽然API文档是童叟无欺精心打造的,但实际开发中,若果能够像其它语言Java和C#那样地支持JavaScript代码提示,那就更好啦。可喜的是,有若干的开发环境(IDE)和插件能够支持--并且是直接支持Ext 2.0。
Aptana Studio 一谈到JavaScript的开发工具,就不得不提Aptana了。就我实际工作来说,每天都用它来完成Adobe AIR的工作。但是Aptana当前捆绑的Ext的版本有些旧(1.1的),下面就介绍一个插件的安装方法,让Aptana支持到2.0(由Markus Schmidleitner提供,用起来还不错):
1.下载并安装Aptana Studio; 2.打开你的Aptana程序目录(我这儿是C:\Aptana),复制jar格式的文件到plugins目录; 3.重启Aptana; 4.进入Window -> Preferences -> Aptana -> Editors -> JavaScript -> Code Assist选择Ext 2.0(或要反选Ext.1.1)。
Aptana Studio with Ext 2.0 code assist
|
Spket Eclipse插件与IDE Spket IDE是目前支持Ext 2.0最为出色的IDE。 它采用.jsb project file 文件并将继承于基类和所有文档的内容嵌入到生成代码提示的Script doc中。 由于Spket只是一个单纯的编辑器,没有其它格式的支持(如CSS),所以我的做法是用它的Eclipse插件形式,安装到Aptana。安装办法如下:
1.下载安装Aptana Studio(包含有Eclipse); 2.启动Aptana并打开程序菜单到:Help → Software Updates → Find and Install… → Search for new features to install → New remote site… 3.名称: “Spket”,地址URL是http://www.spket.com/update/ 4.重启Aptana; 5.观看一下这个SketIDE的教程,看看Ext代码提示的功能有多省事(你可以修改/src/ext.jsb 保持最新版的Ext),基本步骤如下:
- Window → Preferences → Spket → JavaScript Profiles → New ;
- 输入“ExtJS”点击OK;
- 选择“ExtJS” 并点击“Add Library”然后在下拉条中选取“ExtJS”;
- 选择 “ExtJS”并点击“Add File”,然后在你的./ext-2.x/source目录中选取“ext.jsb” 文件;
- 设置新的ExtJS Profile,选中并点击“JavaScript Profiles” 对话框右手边的“Defalut”按钮;
- 重启Aptana;
- 创建新的JS文件并输入: Ext这样就可设置Ext Code代码自动完成的功能。
由于你是在Aptana中安装插件的,Aptana还是你默认的JS编辑器,所以要试用Spket,你要在那个文件上选中“Open with”-> Spket JavaScript Editor 。
Spket in Aptana with full documentation and code assist
|
Komodo Edit
Komodo Edit为众多格式文件提供支持,包括Perl、PHP、Python、Ruby和Tcl。亦支持浏览器方面的代码包括有JavaScript、CSS、HTML和XML。Windows、Mac Os和Linux平台都可用。 安装Ext支持下的Komodo:
1.下载和安装Komodo Edit; 2.下载API catalog; 3.进入Edit -> Preferences -> Code Intelligence 并选择位于“API Catalog”下方的按钮“Add an API catalog” ; 4.选择刚才下载的ExtJS API catKomodo Editalog CIX 。
![](../../../upload/picture/pic/14667/2122b4fc-6ebc-3532-bbcd-cdad5e4c3665.jpg)
Komodo with Ext JS code intelligence
Dreamweaver 对于Dreamweaver的用户,有两种可用的插件SpketDW(Dreamweaver 2004或新版)和SpketDWCS(Dreamweaver CS3)。两者都是Spket团队开发的(刚才提及的),因此也同样精确和出色。另外Dreamweaver插件的一大特点是很好地支持配置项的代码提示。
![](../../../upload/picture/pic/14673/7b524d8a-5a66-313d-9749-e1f7dbd60dbb.jpg)
Members code assist
![](../../../upload/picture/pic/14671/55cf7dc0-85a3-3edb-9e1e-b2a478b2498b.jpg)
Config option code assist
要下载和安装,请浏览他们的站点。
|
其它的IDE 还有其它的IDE,像由社区发起的正在工作着的IntelliJ和Visual Studio 2008。
总结 当工作中需要到Ext 2.0,的确有一些工具能辅助你提升工作效率,这真的要比较一番(Check them out、check out、checkout...)。如果你也发现有其它更好的工具,不妨雁过留声,与我们分享。
该表格框中内容原文:http://www.iteye.com/topic/161161
感谢作者sp42的分享。
|
字数过多,不能全部发布,可以下载附件查看。也可以查看yongtree CSDN博客:http://blog.csdn.net/yongtree/archive/2008/05/20/2460265.aspx
|
|
分享到:
相关推荐
### 我与EXTJS有个约会 #### 一、为什么学习EXTJS? 在现代Web开发领域,用户体验至关重要。随着Web 2.0时代的到来,越来越多的应用程序开始注重前端的表现力和交互性,而不仅仅是功能实现。JavaScript及其相关的...
JESD79-2F DDR2 JESD79-3F DDR3 JESD79-4D DDR4 JESD79-5C DDR5 JESD209-2F LPDDR2 JESD209-3C LPDDR3 JESD209-4E LPDDR4 JESD209-4-1A LPDDR4X JESD209-5C LPDDR5(X)
COMSOL二维光子晶体角态研究:单胞与超胞能带计算及边界态与角态特性分析,COMSOL二维光子晶体角态研究:单胞与超胞能带计算及边界态与角态特性分析,comsol二维光子晶体角态。 单胞能带,超胞能带,边界态以及角态计算。 ,comsol;二维光子晶体;角态;单胞能带;超胞能带;边界态计算,基于Comsol的二维光子晶体角态及能带边界计算研究
六自由度机械臂抓取动作仿真与代码解析:抓取动画、关节参数变化及轨迹图解详解,六自由度机械臂抓取动作仿真指南:掌握两套代码实现动画与轨迹图模拟学习攻略,六自由度机械臂抓取动作仿真-8 两套关于抓取动作的代码,包括抓取动画、关节角、角速度、角加速度的变化仿真、以及抓取轨迹图 简单易懂好上手~ ,六自由度机械臂;抓取动作仿真;抓取动画;关节角变化;角速度角加速度;抓取轨迹图;两套代码;简单易懂好上手,六自由度机械臂抓取动作仿真演示:代码与轨迹图解
ITC网络广播工具软件
Multisim四位密码锁电路仿真设计:设定、开锁与声光报警功能演示资料包,Multisim四位密码锁电路仿真设计:设定、输入、开锁与报警功能详解,附源文件、原理说明书与演示视频,multisim四位密码锁电路仿真设计 功能: 1.通过拨码开关1进行初始密码设定。 2.通过拨码开关2输入密码,实现开锁判断。 3.如果密码正确,LED绿灯亮,表示开锁。 4.如果密码不正确,LED红灯亮,蜂鸣器鸣叫,声光报警。 资料包含:仿真源文件+原理说明书+演示视频 ,四位密码锁电路、Multisim仿真设计、初始密码设定;拨码开关输入;开锁判断;LED灯显示;声光报警;仿真源文件;原理说明书;演示视频,Multisim四位密码锁电路仿真设计:初始密码设置与智能解锁功能的声光报警展示
俗话说,摸鱼摸的好,上班没烦恼,毕竟谁能拒绝带薪拉屎呢(手动狗头) 这是一个云开发职场打工人专属上班摸鱼划水微信小程序源码,没有后台 直接导入微信开发者工具即可运行,UI简约大气漂亮,只需登录微信公众平台配置完合法域名即可轻松上线。 用户进入摸鱼小程序,可以自由设置薪资,上班时间、下班时间、发薪日、 月工作天数以提醒自己摸鱼,全民打酱油,让自己成为摸鱼冠军,《商鞅摸鱼哲学》 摸鱼不是自我放纵,而是个人实力的积蓄,我们的小目标是晚睡晚起 小程序中的今日待办会提醒用户带薪拉屎和闲逛,下方展示的是距离休息日的天数,距离下一次发工资的天数和节日的天数。
【毕业设计】基于Java的开发的一个集合校园二手交易、拼车、失物招领等功能的app_pgj
个人记录:PICkit3离线烧录流程 使用软件:MPLAB X IDE v5.30 记录时间:20250215
基于Matlab代码的电力系统状态估计与实验仿真研究:扩展卡尔曼滤波和无迹卡尔曼滤波在电力系统动态状态估计中的应用及效果分析,Matlab仿真实验研究:基于扩展卡尔曼滤波器与无迹卡尔曼滤波器对电力系统状态估计的影响及验证,状态估计 电力系统状态估计 Matlab代码 实验仿真研究 电力系统由于测量值和传输误差,还有测量噪声的影响,会对状态估计产生影响。 因此,需要对嘈杂的测量进行滤波,以获得准确的电力系统运行动态。 本文使用扩展卡尔曼滤波器(EKF)和无迹卡尔曼滤波器(UKF)来估计电力系统的动态状态。 扩展卡尔曼滤波EKF、无迹卡尔曼滤波UKF 利用扩展的无迹卡尔曼滤波器估计了动力系统的动态状态。 对WECC 3机9总线系统和新英格兰10机39总线系统进行了案例研究。 结果表明EKF和UKF都能准确地估计电力系统的动态状态。 ,核心关键词:状态估计; 电力系统状态估计; Matlab代码; 实验仿真; 测量值误差; 测量噪声; 扩展卡尔曼滤波器(EKF); 无迹卡尔曼滤波器(UKF); 动力系统; 动态状态估计; WECC 3机9总线系统; 新英格兰10机39总线系统。,Matlab
springboot在线考试--
台达DVP EH3与MS300 PLC&变频器通讯程序的全面解决方案,台达DVP EH3与MS300通讯程序:稳定可靠的频率控制与启停管理系统,台达DVP EH3与台达MS300通讯程序(TDEH-9) 可直接用于实际的程序,程序带注释,并附送触摸屏程序,有接线方式和设置,通讯地址说明等。 程序采用轮询,可靠稳定 器件:台达DVP EH3系列PLC,台达MS300系列变频器,昆仑通态7022Ni 功能:实现频率设定,启停控制,实际频率读取,加减速时间设定。 资料:带注释程序,触摸屏程序,接线和设置说明,后续有技术咨询。 ,核心关键词:台达DVP EH3; 台达MS300; 通讯程序(TDEH-9); 轮询; 稳定; 频率设定; 启停控制; 实际频率读取; 加减速时间设定; 触摸屏程序; 接线方式; 设置说明; 技术咨询。,台达PLC与变频器通讯程序(带注释、触摸屏控制)
项目资源包含:可运行源码+sql文件 适用人群:学习不同技术领域的小白或进阶学习者;可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。项目具有较高的学习借鉴价值,也可拿来修改、二次开发。 个人账户管理:支持用户注册、登录与个人信息编辑;提供密码找回及账号安全保护措施。 声纹采集:利用麦克风设备录制用户的声纹样本;支持多种录音格式和质量调整,确保采集到清晰、准确的声纹数据。 声纹模板库管理:建立和维护一个安全的声纹模板库;支持声纹模板的添加、删除、更新和查询操作。 声纹比对与识别:运用深度学习算法对输入的声纹数据进行特征提取和匹配;实现快速、准确的声纹身份验证。 多场景应用支持:适用于多种场景,如门禁系统、移动支付、远程登录等;可根据实际需求定制开发相应的应用场景。 实时监控与报警:实时监控系统运行状态,包括声纹识别成功率、处理速度等指标;当出现异常情况时,及时发出报警信息。 数据分析与报告生成:收集并分析声纹识别过程中的数据,如识别准确率、处理时间等;根据用户需求输出包含详细图表说明的专业级文档供下载打印保存。 社区互动交流:设立论坛版块鼓励用户分享心得体会讨论热点话题;定期邀请行业专家举办线上讲座传授实用技巧知识。 音乐筛选与推荐:集成音乐平台API,根据用户的浏览习惯和情绪状态推荐背景音乐,增强用户体验。 数据可视化:提供交互式的数据可视化面板,使非技术用户也能轻松理解复杂的数据集,从而做出更明智的决策。
三相与多相开绕组永磁同步电机仿真模型的先进控制策略探讨与实现,三相与多相开绕组永磁同步电机的Simulink仿真模型与先进控制策略研究,开绕组电机,开绕组永磁同步电机仿真模型、simulink仿真 共直流母线、独立直流母线,两相容错,三相容错控制,零序电流抑制,控制策略很多 三相开绕组永磁同步电机,六相开绕组永磁同步电机 五相开绕组永磁同步电机,五相开绕组电机 ,开绕组电机; 永磁同步电机仿真模型; simulink仿真; 共直流母线; 独立直流母线; 两相容错; 三相容错控制; 零序电流抑制; 控制策略; 六相开绕组永磁同步电机; 五相开绕组永磁同步电机,开绕组电机仿真研究:共直流母线与独立直流母线的容错控制策略
【毕业设计】基于Java的开发的网上汽车租赁管理系统_pgj
csv 模块是 Python 的标准库,无需额外安装。 运行结果如下图: ['姓名', '年龄', '城市'] ['张三', '25', '北京'] ['李四', '30', '上海'] ['王五', '22', '广州']
【毕业设计】基于Java+Springboot+Vue的宠物领养系统_pgj
让前端开发者学习“机器学习”!
【毕业设计】基于Java的实现的以宠物为主体的论坛式的APP