深入学习ExtJS4.2(1)

接触ExtJS4.2也有一段时间了,总的觉得还是个不错的JS库,虽然体积略大了点。现在想根据官网提供的API,再结合自己一些的认知,重新审视学习一下它。

首先想谈一下ExtJS4.2中的动态加载功能。因为在HTML文件中一次性把1.4MB的ext-all.js文件引入进来着实有点太大了(这恐怕是为什么一般的小型WEB程序都不用它的原因吧),所以考虑使用Dynamic Loading功能。我们先来测试一下这个功能,并且配合FireBug来进行调试。首先来看下我代码的截图。

可以看到右边的目录里有ext-all-debug.js和ext-debug.js。我这里引用的是ext-debug.js,它并不是全部的EXT核心组件,但是这个文件可以指引我们去取所需要的EXT类。我的app.js代码如下:

可以看到,当JS解析到这里的时候,首先会去到ext-debug.js里面去读Ext.application类的定义,紧接着再要去src/app/Application.js中再去读这个类更具体的信息。这种动态方式还是不错的,因为毕竟ext-debug这个JS还算是比较小的。

来看看FIREBUG,结果是最好的证明。

时间: 2024-08-04 08:30:23

深入学习ExtJS4.2(1)的相关文章

以前用过Extjs技术的开发人员在学习Extjs4时需要注意的问题

        以前学习过Extjs的同学,在学习Extjs4的时候需要注意几个关键改变: 1.Extjs4的新的类系统. 2.Extjs4中MVC思路 3.Extjs4中的新的命名规范(结合新的MVC系统). 4.EXtjs4中的动态加载系统 当然除了这些以外,还有很多细节方面的改变,请阅读API.      参考文档:       http://www.cnblogs.com/fsjohnhuang/archive/2013/01/29/2880705.html       http://w

深入学习ExtJS4.2(2)类体系

今天学习一下Ext4中的类,它相对于3做了很大程度上的重构,所以习惯了Ext3的人猛然写4的代码会感觉到十分的不适应吧. Ex4中涵盖了200多个类,开发它的人员数以万计,而且这些人员是来自世界各地.有着不同编程背景的人.所以Ext4开发初始,为了要统一编程风格,就面临着这几个问题: 这种风格要让大家感觉非常熟悉,并且学习起来轻松 开发要快速,调试要简单,部署要便捷 组织性,扩展性,维护性都要好 JavaScript这门语言还是比较特殊的.它不能算作面向对象的语言,是基于原型的一种弱类型的解释性

ExtJS4.2 Grid知识点六:自动选中指定记录、自动选中全部记录、反向选择

本节主要学习ExtJS4.2 Grid自动选中指定记录.自动选中全部记录.反向选择,即在表格Grid加载数据后自动将符合条件的记录行选中,示例图片: 示例代码  /  在线演示 本例是通过监听Grid的afterrender事件来实现自动选择指定记录行,代码如下实现自动选中性别为男性的记录行: 自动选中指定记录代码 'userlist': {     afterrender: function(testGrid){//侦听goodslistview渲染           // 选中所有记录  

ExtJS4.2 Grid知识点七:显示行号、斑马线效果(奇偶行背景色不一致)、复制单元格文字、禁止点击列排序

本节主要学习ExtJS4.2 Grid显示行号.斑马线效果(奇偶行背景色不一致).复制单元格文字.禁止点击列排序.禁止列头部右侧菜单,示例图片: 在线演示  /  在线演示 主要内容如下: 显示行号 斑马线效果(奇偶行背景颜色不一致) 复制单元格问题 禁止点击列排序 禁止列头部右侧菜单 1.显示行号 在Grid中增加行号列,xtype指定为rownumberer. {header: 'NO',xtype: 'rownumberer',width: 40,sortable: false} 2.斑马

ExtJS4.2 Grid行编辑、新增行及删除行

本节主要学习ExtJS4.2 Grid行编辑.新增行及删除行,示例图片: 在线演示  /  在线演示 主要内容如下: 行编辑模式 新增行 删除行 1.行编辑模式 在Grid中定义中配置插件Ext.grid.plugin.RowEditing,点击单元格时即启动行编辑模式,见上图. var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {     clicksToMoveEditor: 1,     autoCancel: false

ExtJS4.2 Grid知识点五:多选行(可以点击行选中记录与只能点击多选框选中记录)

本节主要学习ExtJS4.2 Grid多选行知识,示例图片: 在线演示  /  示例代码 主要内容如下: 可以点击行选中记录与只能点击多选框选中记录 选中Grid中数据加载到Form 获取Grid中多行数据,生成JSON格式 1.可以点击行来选中记录,此时多选Grid只需要配置selType: 'checkboxmodel',此时有一个缺陷,当你通过多选框勾选多条记录时,如果不小心点击某行,则当前点击行被选中,其它选中的记录行都被取消选择了. 2.只能点击多选框选中记录,此时多选Grid需要配置

java系列课程精品推荐

深入学习ExtJs4.1的布局及常用控件 http://edu.ibeifeng.com/view-index-id-129.html 专题-深入Java OOP编程 http://edu.ibeifeng.com/view-index-id-88.html 案例:Red5 & Flex聊天室架构与实现 http://edu.ibeifeng.com/view-index-id-84.html 深入学习Java图表组件JFreeChart开发统计图表 http://edu.ibeifeng.co

EXTJS 4.2 资料 控件之Grid 那些事

最近在学习Extjs4.2 ,积累文章,看得不错,再此留年: //表格数据最起码有列.数据.转换原始数据这3项 Ext.onReady(function(){ //定义列 var columns = [ {header:'编号',dataIndex:'id',width:50}, //sortable:true 可设置是否为该列进行排序 {header:'名称',dataIndex:'name',width:80}, {header:'描述',dataIndex:'descn',width:11

【转载】《Ext JS 4 First Look》翻译之一:新特性

免责声明:     本文转自网络文章,转载此文章仅为个人收藏,分享知识,如有侵权,请联系博主进行删除.     原文作者:^_^肥仔John      原文地址:http://www.cnblogs.com/fsjohnhuang/archive/2013/01/29/2880705.html 第一章 新特性 Extjs 4相对于之前的版本作出了重大的修正.其中包括全新的类系统.新平台的引入.API的修整和加强还有新组件的引入(如新的图表和图形组件).Extjs 4提供更快速.更稳定的用户体验,