- 浏览: 842699 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (530)
- Java编程 (64)
- C/C++/D (6)
- .Net/C# (9)
- Ruby (12)
- JavaScript (77)
- XML (1)
- JSON (1)
- Ajax (17)
- ExtJs (81)
- YUI (1)
- JQuery (7)
- DWR (1)
- HTML (7)
- CSS (7)
- Database (6)
- PowerDesigner (23)
- DB2 (2)
- Oracle (57)
- MS SQL Server (8)
- MySQL (6)
- JSP/Servlet/JSTL/TagLib (3)
- Spring (1)
- Hibernate (0)
- iText (0)
- Struts (0)
- Struts2 (0)
- iReport (0)
- FreeMarker (0)
- HttpClient (1)
- POI (6)
- FckEditor (15)
- Eclipse / MyEclipse (10)
- IntelliJ IDEA (0)
- NetBeans (0)
- Tomcat (11)
- WebLogic (1)
- Jboss (3)
- jetty (4)
- IIS (2)
- CVS/VSS (1)
- FTP (1)
- Windows/DOS (6)
- Linux/Unix (0)
- 软件建模 UML (0)
- Design Pattern & Thinking In Programming (10)
- 数据结构与算法 (12)
- 软件项目管理 (9)
- 行业应用解决方案 (3)
- 电脑软件与故障解决 (13)
- 编程语言 (1)
- 十万个为什么 (3)
- JBPM (2)
- sysbase (2)
- JDBC (8)
- Ant (2)
- Case-计算机辅助软件工程 (1)
- WebService (4)
- 浏览器 (1)
最新评论
-
gaoqiangjava:
同一楼,还请大手帮解决
JAVA读取word文件 -
hyl523:
// 判断数组中的第一个值是否未定义,如果未定义,便定义为空对 ...
javascript面向对象之二 命名空间 -
ping12132200:
ping12132200 写道我抱着个错不是因为:body标签 ...
extjs在IE报对象不支持此属性或方法 -
ping12132200:
我抱着个错不是因为:body标签内的第一个元素不能为文本tex ...
extjs在IE报对象不支持此属性或方法 -
fireinjava:
呀,不错,转走了,谢谢啦~
利用OpenOffice将word转换成PDF
要是以前,我铁定整天到处找教程看,光说不练,现在觉悟了,看教程看得最多,不一定能看完,看完了不一定能比作者更明白,看明白了不一定能用得好。所以看教程其实好处不大,只能作为小小的参考。很多东西看别人的始终是没有用。只有将实验进行到底才是王道……
这儿主要是代码分析。
研究工具: Dreamweave cs3( 装那个 extJs 2.0 插件老装不上 ) 、 Aptana( 一个好处,好看代码,有括号匹配, json 语法好是好,就是括号多了,搞清在哪儿结束 )
发现, extJs 的代码最喜欢用 json 语法定义,类基本上都是用 json 语法定义的。而不是在外面一大路的 xx.prototype.yyyy=function(){ …… } 。不过这种语法蛮清晰。我喜欢。
extJs 时面只有一个类: Ext ,它是一个静态类。提供了经常要用到的函数。
Ext.apply = function(o, c, defaults){
if(defaults){
// no "this" reference for friendly out of scope calls
Ext.apply(o, defaults);
}
if(o && c && typeof c == 'object'){
for(var p in c){
o[p] = c[p];
}
}
return o;
};
这是 apply 函数,作用其实相当于克隆,它把对象 c 中的成员全部复制到 o 中去。如果有 defaults ,也把它的内容复制到 o 中。这儿其实揭示 javascript 的一种语法:
javascript 中的对象的成员有两种引用方法:
一、 o.propertyName
二、 o[propertyName]
这段代码关键就在 o[p]=c[p] 。这个要理解。尽管如此,但是不能像下面一样做:
var newelem=new Object();
Ext.apply(newelem,Ext.getDom("a1"));
Ext.getDom("form1").appendChild(newelem);
下面一大段的代码,由于 dw 不好看代码,半天才晓得那儿是个 (function(){ …… Ext.apply(Ext,{ …… }})() ,这是我把概述出来。这样写呢,实在有点叫人别扭,作者的意图是想把这相关的一段全部放到括号中,以免造成理解上的混乱。能理解。不过,这种写法不大招人喜欢。
applyIf : function(o, c){
if(o && c){
for(var p in c){
if(typeof o[p] == "undefined"){ o[p] = c[p]; }
}
}
return o;
}
这是 applyIf 的代码,事实上,在文档上面,它的描述有问题,应当是是当 o,c 两个对象都存在时,则把 o 中不存在, c 中存在的属性复制到 o 中,且属性名不变。而不是所谓“如果 o 不存在时就把属性复制到 o 中”,哪有这种说法的。另外,判断一个对象是不是存在,最严谨的还是用 typeof 的方法。
addBehaviors : function(o){
if(!Ext.isReady){
Ext.onReady(function(){
Ext.addBehaviors(o);
});
return;
}
var cache = {};
for(var b in o){
var parts = b.split('@');
if(parts[1]){ // for Object prototype breakers
var s = parts[0];
if(!cache[s]){
cache[s] = Ext.select(s);
}
cache[s].on(parts[1], o[b]);
}
}
cache = null;
}
这个地方巧妙在于依赖于 Ext.isReady 。这个属性我估计应当是在 onload 第一行将它设成 true 的,它的作用就是用于标志当前是不是已经文档模型加载完了。前面几行的意思:如果 dom 模型还没有加载完,没有准备好,就将这些事件注册代码交给 onload 去做。即 Ext.onReady 。
如果 DOM 模型已加载完,那么就马上注册事件,区别:前者是延迟注册、后者是马上注册。为什么要延迟,因为 DOM 都没有创建完,有些元素在 DOM 树中还不存在,当然就没法设置它了。其余的地方则不足道,后面的关键就是 Ext.select 了。
id : function(el, prefix){
prefix = prefix || "ext-gen";
el = Ext.getDom(el);
var id = prefix + (++idSeed);
return el ? (el.id ? el.id : (el.id = id)) : id;
}
这儿有一个技巧: prefix = prefix || "ext-gen" ,这是最简捷的代码啊。本来要一个 if 语句的。
extend 、 namespace 两个函数硬是没有看懂,等水平高了再来研究。
urlEncode 的源代码原理简单,但是,要是我的话还是没法写得这么清楚,主要是情况比较多。这儿主要是学到了数组的 push ,原来以为 push 只能传一个参数,没想到能一次传多个。发现,很多时候,在构造一个复杂的字符串时都是用到数组的。至于 urlEncode 的作用,就是把一个 JSON 对象编码成一个查询字符串。
each : function(array, fn, scope){
if(!Ext.isArray(array)){
array = [array];
}
for(var i = 0, len = array.length; i < len; i++){
if(fn.call(scope || array[i], array[i], i, array) === false){ return i; };
}
}
这个函数的功能并不是像它的名字一样简单啊,这儿又学到了:
一、原来构造单元素数组可以直接这样写: a=[a] 。
二、 scope 在这儿是默认伪调用者,同时,还把当前数组元素值、序号、数组引用都传过去了。这个可能在 fn 中用得着。要注意。
另外就是 x===false 这个语句要注意。要知道 undefined==false 。
callback : function(cb, scope, args, delay){
if(typeof cb == "function"){
if(delay){
cb.defer(delay, scope, args || []);
}else{
cb.apply(scope, args || []);
}
}
}
吃了一惊, Function 什么时候有个成员叫 defer 了?后来才知, defer 是 extJs 扩展出来的。 delay 是时延。老实说 scope 这个东西不能言传只可意会,不看代码是不清楚的。事实上 javascript 中的确是存在 defer 属性的。用于修饰 script 元素的,确实是用于延迟 script 里面内容的加载。详情见此处。
destroy : function(){
for(var i = 0, a = arguments, len = a.length; i < len; i++) {
var as = a[i];
if(as){
if(typeof as.destroy == 'function'){
as.destroy();
}
else if(as.dom){
as.removeAllListeners();
as.remove();
}
}
}
}
这个函数用来销毁对象,由代码可知一点, extJs 鼓励大家在创建自己的类有必要的话就写 destroy 。如大量没用的 dom 元素。在这里, destory 相当于析构造函数一样。至于 removeAllListenners , remove 这两个函数,它们是 Ext.Element 类的成员。
removeNode : isIE ? function(){
var d;
return function(n){
if(n && n.tagName != 'BODY'){
d = d || document.createElement('div');
d.appendChild(n);
d.innerHTML = '';
}
}
}() : function(n){
if(n && n.parentNode && n.tagName != 'BODY'){
n.parentNode.removeChild(n);
}
}
这个代码作用显然,就是删除一个结点。但是这个代码的写法实在有点让人难以接受啊。最郁闷是如果 ie ,那么,那个参数 n 是怎么传进去的呢,因为外面罩住的那个函数没有参数,本来没有参数也好办,关键是外面的那个函数根本没有传参数给 return 里面的函数,这居然也能传进去,见识到了。
经过一番实验与琢磨,发现,其实并不是外面的函数能传参给里面的那个函数,实在是因为那个 () 用得好,如有:
var do1=function(){return function(n){}}();
关键是要外面的函数 {} 之后要马上“自调用”一下,这样就会返回一个结果,这个结果是个函数表达式,它就能传参了。所以如果外面的函数没有 () 的话,那么实际调用将必须写成: do1()(3) 的形式,连写两个括号。。这个问题我想了好久,终于想清楚了。
createCallback : function(/*args...*/){
// make args available, in function below
var args = arguments;
var method = this;
return function() {
return method.apply(window, args);
};
}
顾名思意,回调。这个函数是对 Function 对象的原型扩展。所以,所有函数都有这个成员。例如:
function A(){}
B=A.createCallback();
B();
最后 B() 执行调用的是 A 。有人说,既然调用 B 就相当于调用 A ,还不如直接用
function B(){A.apply(window,this.argments);}
的确,这样确实可以达到差不多的目的,但是,写代码要注意封装。尽管这只有一行代码,但是,相对于客户程序员来说, createCallback 比 apply 亲切多了,而且,它还节省了不少字符,这就节省带宽。
什么时回调?让别人来调,那为什么不定义在那个调用者里面?因为,只有定义在别人的里面才可以获得别人的信息。
当然,在这儿我还是学到了一点,以前没意识到,怎样把外层的 this 传给内层的 function 。只需 method=this 。
有一些 Ext 下的函数并没有定义在 ext.js 中。如: Ext.onReady 、 Ext.reg 、 Ext.select 、 Ext.query 。
发表评论
-
extjs在IE报对象不支持此属性或方法
2010-10-06 13:28 2630ExtJS在Firefox里面显示正常,但是用IE打开的时候报 ... -
Ext.grid.EditorGridPanel
2010-10-06 11:38 1616<HTML> <HEAD> ... -
国内首个基于Ext开发开源企业级框架,免费下载!!
2010-07-02 19:47 1814http://www.17ext.com/showforum- ... -
Ext.form.*使用技巧
2010-05-03 12:20 1125设置表单控件为只读: setFieldRead ... -
Ext JS高级插件开发教程
2010-05-03 12:19 1780当创建一个跨浏览器 ... -
项目中常使用的Ext插件
2010-05-03 12:12 1979http://bbs.ajaxjs.com/viewthrea ... -
Ext.ux.DataDrop.js
2010-05-03 12:10 1088http://code.google.com/p/ext-ux ... -
ExtJs 中 xtype 与组件类的对应表
2010-04-26 12:25 2450原文地址:http://blog.sina ... -
iframe in a tab panal
2010-04-11 13:25 1256http://www.extjs.com/forum/show ... -
ext中autoLoad页面中js的问题记录
2010-04-11 12:33 15271.增加script属性,如: var n = this.ad ... -
EXT card布局
2010-01-25 17:17 1577Ext.onReady(function(){ /// ... -
EXT window中加入照片
2010-01-25 17:15 1223Ext.onReady(function(){ ... -
Ext的Card布局示例
2010-01-25 17:14 1270//这个代码就有点通用性了 var navH ... -
Ext card布局
2010-01-25 17:13 1433Ext.layout.CardLayout扩展自Ext.lay ... -
实现Ext.TabPanel中tab内容的更新
2010-01-25 13:19 3088Ext.TabPanel中,如果一个tab项使用了autoLo ... -
Ext.TabPanel中autoLoad实现页面内容加载
2010-01-25 13:18 4013Ext.TabPanel中autoLoad属性可以实现异步加载 ... -
extjs中TabPanel中tab引用页面刷新导致这个页面刷新的问题
2010-01-25 13:16 5569Ext.getCmp('maintab').getActive ... -
SSH+Extjs分页小例子
2010-01-25 13:13 2290刚学,只做了简单的分 ... -
ExtJs是通过Ext.ToolTip和Ext.QuickTips两个组件来实现浮动提示功能的
2010-01-24 23:07 3768Ext.QuickTips QuickTips代码示例:只需 ... -
程序设置Extjs树中CheckBox的选中和取消选中设置
2010-01-22 14:11 4422在Extjs中treepanel中树节点为checkbox类的 ...
相关推荐
目录 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 ...28. extJs 2.0学习笔记(ext.js篇) 77
14. **extJs 2.0 学习笔记(Ext.data序论篇)** 这部分介绍了Ext.data模块的基础,包括DataModel、Reader和Writer,是理解数据绑定和数据管理的关键。 15. **extJs 2.0 学习笔记(Ext.Panel终结篇)** Panel是...
- **ExtJs2.0学习笔记(Element.js篇/DomHelper.js篇/ext.js篇)**:分别介绍了这三个核心文件中提供的功能和方法。 综上所述,文档涵盖了Ext JS框架的核心知识点,从基本概念到具体应用都有详细的阐述,这对于初学者...
13. **extJs 2.0 学习笔记**:这部分内容专注于ExtJs 2.0版本,可能包括新特性、改进和兼容性问题。 通过这些笔记,读者可以逐步掌握ExtJs的基本用法,从构建简单的UI组件到处理复杂的异步数据交互,为开发高质量的...
EXTJS in Action 是一本专为学习EXTJS编写的书籍,但这里我们主要关注学习笔记中的关键知识点。 首先,EXTJS的目录结构非常重要,因为它包含了所有必要的资源和源码: 1. `adapter`:这部分包含了适配器,用于将...
### ExtJS面板学习笔记 #### 一、基础:弹出框 在ExtJS中,`Ext.MessageBox`提供了创建各种模态对话框的功能,包括提示、确认、输入等。以下是几个基本示例: 1. **简单警告对话框**: ```javascript Ext....
1. **引入EXT_JS库**:在使用EXT_JS开发时,首先需要在HTML页面中引入EXT_JS的CSS样式文件和JavaScript库文件,例如`extjs/resources/css/ext-all.css`、`extjs/adapter/ext/ext-base.js`和`extjs/ext-all.js`。EXT_...
《EXT学习笔记.doc》可能是个人或团队在学习EXTJS过程中整理的笔记,包含了他们的实践经验、技巧和问题解决方案,对于学习EXTJS非常有帮助。 《EXT核心API详解.pdf》是对EXTJS核心API的深入解析,适合想要深入研究...
接下来是"ExtJS2.0开发与实践笔记"系列文档。这些文档深入探讨了Ext2.0的各个方面,可能包括布局管理(Layouts)、数据存储(Data Stores)、Ajax通信(Ajax Requests)以及组件扩展(Component Extension)。布局...
在"ExtJS2.0开发与实践笔记"系列文档中,你将了解到EXTJS2.0版本的基础知识,包括如何创建基本组件,设置布局,处理事件,以及如何利用EXTJS提供的API进行交互设计。这些笔记将帮助初学者快速入门EXTJS的开发。 ...
外一篇 用javascript改变onclick调用的函数 用JavaScript加密保护网站页面 用Javascript检测网速的方法 用Javascript评估用户输入密码的强度 用JavaScript实现仿Windows关机效果 用javascript实现...