ext的学习心得

1、Ext.onReady(function(){}) 该函数主要是在页面加载完毕，js的dom都加载完毕之后执行。确保不会出错
2、var myDiv = Ext.get('myDiv'); Ext.get取页面上对象的id。同时赋值给一个申明的对象，以便之后直接使用。
   可以直接作为对象使用。
 myDiv.highlight();      //黄色高亮显示然后渐退
 myDiv.addClass('red');  // 添加自定义CSS类 (在ExtStart.css定义)。更改该对象的css的，可以指向其他css
 myDiv.center();         //在视图中将元素居中
 myDiv.setOpacity(.25);  // 使元素半透明
3、Ext.select('p').highlight();可以用Ext.select来取得页面上的所有name相同的对象一并处理。
4、Ext.get('myButton').on('click', function(){});监听myButton的事件。on之后两个参数，第一个是什么事件，第二个是这个事件出发什么函数
上面的事件处理的function均是简单几句，没有函数的名称，这种类型函数称为“匿名函数（anonymous function）”，即是没有名的的函数。你也可以分配一个有名字的event handler,这对于代码的重用或多个事件很有用。
 4.1、在Ext中。函数也是按照变量方式定义的。
  var paragraphClicked = function() {
   alert("You clicked a paragraph"); 
  }
  Ext.select('p').on('click', paragraphClicked);
 此时第二个参数就是函数名。
 4.2、可以传入事件对象，比如一个页面有多个按钮，这里了可以得到点的那个按钮。而只是对该对象处理。
  var paragraphClicked = function(e) {
   Ext.get(e.target).highlight(); 
  }
  Ext.select('p').on('click', paragraphClicked);
 这里的e.target就是得到鼠标点击事件的时候的对象，也就是常说的DOM节点。
5、Ext.MessageBox.show({
            title: '提示窗',
            msg: paragraph.dom.innerHTML,//得到传入对象的html代码作为msg内容
            width: 400,
            buttons: Ext.MessageBox.OK,//是否有确认按钮,有OK和show两个属性
     animEl: paragraph //动画效果  
        }
   Ext提供的alert窗体。

.net+ext
http://www.dojochina.com/?q=node/579

将ext-base.js中的"application/x-www-form-urlencoded" 修改为"application/x-www-form-urlencoded;charset=gb2312"即可

http://ajaxbbs.net/blog/read.php?230

布局说明
http://jstang.5d6d.com/thread-722-1-1.html

http://203.93.254.59:8889/extdoc/html/ext-ch-03.html

http://jstang.5d6d.com/thread-59-1-1.html

布局
http://www.cnitblog.com/yemoo/archive/2007/10/23/35249.html

Ext-API详解--core/Ext.js
http://www.cnitblog.com/yemoo/archive/2007/12/18/37850.html

布局例子
http://www.javaeye.com/topic/146426

http://www.javaeye.com/topic/151255

applyTo和renderTo配置项
http://www.javaeye.com/topic/149881

Ext中的button中文字体的CSS修正
http://www.javaeye.com/topic/148343

根据数据库自动生成基于EXT的应用（增加了界面抓图和一点源代码)
http://www.javaeye.com/topic/144990

Extending Ext Class Chinese
http://extjs.com/learn/Tutorial:Extending_Ext_Class_Chinese

记住在ext2.0里：
1、Panel/TabPanel/Viewport就是1.x中的Layout
2、如果想在Panel/TabPanel/Viewport里划分东南西北中，设置layout:'border'
3、把被放置在东南西北中的组件设置region:'east'/'south'/'west'/'north'/'center'，然后丢到Panel/TabPanel/Viewport的items属性里
4、抛弃在html里设置<div id='..">的做法，根本不需要
5、使用Ext.Viewport做为主框架,Ext.Viewport只能有一个
6、不需要render()，因为组件放置于其容器组件中后，会自动render
7、组件没有render之前，不能在其上使用dhtml/xmldom语句,在render事件处理中使用dhtml/xmldom语句

如此方可随心所欲地玩转ext布局

var west = new Ext.tree.TreePanel({
region:'west',
...
});

var northOfCenter = new Ext.Toolbar({
region:'north',
...
});

var westOfCenter = new Ext.Panel({
region:'west',
...
});

var center = new Ext.Panel({
region:'center',
layout:'border',
autoScroll:false,
items:[northOfCenter,westOfCenter],
...
});

var viewport = new Ext.Viewport({
layout:'border',
items:[
west,
center
]
});

1、先看一些资料，了解要怎样开发ext的扩展
http://extjs.com/learn/Manual:Ext_Source_Overview_%28Chinese%29# 这个是告诉你怎样阅读ext代码，每一个控件的代码都是分开放到，我们测试应用的都是发布文件，整合到一起，在开发的时候这样不容易理解，你看看这篇文章大约就了解了
http://www.javaeye.com/topic/149727 关于扩展的一些讨论
http://www.javaeye.com/topic/135853 Ext 2.0 XTemleate API 提前预览。对需要扩展页面的地方比较有用（比如grid的汇总列的应用）。需要了解，不过现在估计看不懂，了解了，慢慢向下，回头就看明白了。
http://www.javaeye.com/topic/147596 Ext核心代码分析之Function.createDelegate。看了有一定帮助
http://www.javaeye.com/topic/154369 一个ext简单的列子，虽然里面很多你都懂了。但是人家提供了一个学习方法。主要在帖子的第四点，在不清楚控件的用法的情况你可以到ext2/source/widgets目录下面看影响的源码，也不是很复杂的

2、看官方提供的成熟的解决方案，而不是你先前构想的服务端生成，因为本来ria方式的应用，就是把计算分不到客户端，提高效率。如果又丢会服务器，有什么意义了？
http://extjs.com/learn/Tutorial:Extending_Ext_Class_Chinese
官方一个最简单的扩展例子，但是好像是rc1的，反正我没有成功，不过也可能是我自己的问题，不过就算没有成功。也可以大约了解ext的扩展开发方式
http://extjs.com/learn/Tutorial:Extending_Ext2_Class
同样的例子e文版，这个可能是对的

3、学习他人简单的扩展列子
http://www.javaeye.com/topic/148955 一个扩展combobox的方法，主要是扩展了一个样式显示。这个看明白之后，最后可以修改grid里面选择显示字段的样式，因为如果字段太多，还是单列的话，操作性很差。
http://www.javaeye.com/topic/148441 一个扩展combobox下拉数的方法。

 

主要是在思考些“为什么”，“怎么会这样”的问题

/*
* Ext JS Library 2.0
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/

//构建Ext单例对象
//js中可以直接创建对象，这和java、c++等OO语言中
//只能定义类，再创建对象是不一样的了
//这种方式是js中构建单例对象的一个比较好的方式了
Ext = {version: '2.0'};

//在浏览器端开发中，window是全局对象
//下面句子往window这个全局对象中动态注入undefined属性
//尽管在emac的标准中要求全局对象中必须有个undefined的状态
//但是当浏览器替换了全局对象时间，undefined这个变量的状态可能
//就定义了。特别是old browsers....这样的解释有任何问题可以一起留言商讨
//这样的处理方式只能针对undefined的了。
// for old browsers
window["undefined"] = window["undefined"];

/**
* @class Ext
* Ext core utilities and functions.
* @singleton
*/

/**
* Copies all the properties of config to obj.
* @param {Object} obj The receiver of the properties
* @param {Object} config The source of the properties
* @param {Object} defaults A different object that will also be applied for default values
* @return {Object} returns obj
* @member Ext apply
*/
Ext.apply = function(o, c, defaults){ //从代码的实现过程来看defaults中的属性会被c中属性覆盖，default只有在
//c中没有定义的时候，才会用default中定义的属性

if(defaults){

//显然这里用this也是可以调用到Ext中的apply方法的，但是想想为什么这里不用this呢？就是说下面的句子直接改为
//this.apply(o.defaults)。
//下面作者的注释已经说明了问题的所在了。为了在scope(作用域)之外可以友好地调用到该方法,该方法定义
//在Ext这个全局的单例的对象之中，那么scope就是指Ext内了。那么在Ext之外调用时什么意思呢？不是可以通过
//Ext.apply直接调用到吗，这有什么问题？
//这样当然没有问题。不过想想js中函数调用的另外一种方式：Ext.apply.apply或者Ext.apply.call。

//我想作者指的调用方式，就是call和apply这种scope范围之外的调用方式吧。这样作用域外调用会的话，用this关键字的话
//问题就来了。如：function Man(){} ,Ext.apply.call(new Man(),new Man(),new Woman());
//用上“this” reference
//会抛出个错误说Man中的apply未定义。

//apply和call的这种调用方式，都会有this问题。如果是Ext这样的单例对象的话，建议都不要this来内部调用，都搞Ext前缀算了。
//以免引发一些“friendly”的问题。

// no "this" reference for friendly out of scope calls
Ext.apply(o, defaults); //这里要开始递归调用Ext.apply的方法了，如果defaults存在的话，递归第一轮就走到下面的代码去了。
}

//这里o&&c都还好理解，说明只要在o和c都存在的时候才有必要做某些操作，那么typeof c=='object'又是为了限制什么呢
//如果不加上这个条件会怎么样？
//这个问题与typeof能区分出什么东西息息相关，从犀牛中的typeof的解释上看，typeof只能区分对象类型与基本类型。
//也就是说，如果发现c是基本类型的话，下面的属性拷贝工作就根本不会做了(也不应该做，但是如果真得传递一个1进去，好像也不会出现啥恐怖的事情)。

if(o && c && typeof c == 'object'){

//这个就没啥好说的，c中的属性被全部拷贝到o中了
for(var p in c){
o[p] = c[p];
}
}

return o;
};

//这里使用匿名函数来完成Ext这个单例对象中相关属性的设置
//形如：(function(){})();
//那么这里使用匿名函数是否是有什么特殊的考虑？
//尽管这个匿名函数的逻辑可以定义在某个有名的函数，如init_ext()中，然后再加以调用
//但是能用匿名函数一步到位的事情为啥要分两个步骤呢:)
//充分利用语言的性质，看来使用匿名函数形成的闭包来做初始化工作也是不错的了。

(function(){

var idSeed = 0; //查看下面的Ext.id方法,用来对id递增

//下面这些策略就是为了判断浏览器的类型了，很常见的一种用法
//既然Ext是一个cross-browser的框架，那么肯定要知道自己运行的平台是哪种浏览器了... ...
var ua = navigator.userAgent.toLowerCase();

//下面是摘自dhtml网页制作完全手册中，对document.caompatMode的描述
When standards-compliant mode is switched on, Internet Explorer renders the document in compliance with the Cascading Style Sheets (CSS), Level 1 (CSS1) standard. When standards-compliant mode is not switched on,
// rendering behavior is consistent with previous versions of Internet Explorer.
var isStrict = document.compatMode == "CSS1Compat",
isOpera = ua.indexOf("opera") > -1,
isSafari = (/webkit|khtml/).test(ua),
isIE = !isOpera && ua.indexOf("msie") > -1,
isIE7 = !isOpera && ua.indexOf("msie 7") > -1,
isGecko = !isSafari && ua.indexOf("gecko") > -1,
isBorderBox = isIE && !isStrict,
isWindows = (ua.indexOf("windows") != -1 || ua.indexOf("win32") != -1),
isMac = (ua.indexOf("macintosh") != -1 || ua.indexOf("mac os x") != -1),
isLinux = (ua.indexOf("linux") != -1),
isSecure = window.location.href.toLowerCase().indexOf("https") === 0;

//就是说ie7之前的ie浏览器对背景图像有些默认的处理方式，按作者的注释说，如果不执行这个command的话
//css 图片会晃动。
// remove css image flicker
if(isIE && !isIE7){
try{
document.execCommand("BackgroundImageCache", false, true);
}catch(e){}
}

//来了，在这里将往Ext这个大对象中加入属性了
Ext.apply(Ext, {
/**
* True if the browser is in strict mode
* @type Boolean
*/
isStrict : isStrict, //函数开始位置对平台检测的结果用上了...
/**
* True if the page is running over SSL
* @type Boolean
*/
isSecure : isSecure,
/**
* True when the document is fully initialized and ready for action
* @type Boolean
*/
isReady : false,

/**
* True to automatically uncache orphaned Ext.Elements periodically (defaults to true)
* @type Boolean
*/
enableGarbageCollector : true, //注意看下面的Ext的垃圾回收算法... ...

/**
* True to automatically purge event listeners after uncaching an element (defaults to false).
* Note: this only happens if enableGarbageCollector is true.
* @type Boolean
*/
enableListenerCollection:false, //注意Ext中对缓存机制....在缓存元素被删除之后，元素上面的监听器(元素上面可能绑定很多类似事件的监听器)一并会被删除掉

/**
* URL to a blank file used by Ext when in secure mode for iframe src and onReady src to prevent
* the IE insecure content warning (defaults to javascript:false).
* @type String
*/
SSL_SECURE_URL : "javascript:false", //这个用在啥地方，很用途还不是很清楚

/**
* URL to a 1x1 transparent gif image used by Ext to create inline icons with CSS background images. (Defaults to
* "http://extjs.com/s.gif" and you should change this to a URL on your server).
* @type String
*/
BLANK_IMAGE_URL : "http:/"+"/extjs.com/s.gif", //空白css背景图片，这个一定要该，否则在内存上部了网的时候，可能会出现图标正在下载的情况//下不到的话，则可能会有叉叉

/**
* A reusable empty function
* @property
* @type Function
*/
emptyFn : function(){}, //一个占位符函数，就是用了指导某个函数上... ...prototype框架里面也专门定义了个 空函数 属性

/**
* Copies all the properties of config to obj if they don't already exist.
* @param {Object} obj The receiver of the properties
* @param {Object} config The source of the properties
* @return {Object} returns obj
*/
applyIf : function(o, c){ //注意与Ext.apply方法的区别，该方法只有在属性没有定义的时候才会拷贝c中的属性
if(o && c){
for(var p in c){ //回忆下undefined状态，undefined状态意味着对象属性没有定义，或者某个对象声明却没有赋值
if(typeof o[p] == "undefined"){ o[p] = c[p]; }
}
}
return o;
},

/**
* Applies event listeners to elements by selectors when the document is ready.
* The event name is specified with an @ suffix.
<pre><code>
Ext.addBehaviors({
// add a listener for click on all anchors in element with id foo
'#foo a@click' : function(e, t){
// do something
},

// add the same listener to multiple selectors (separated by comma BEFORE the @)
'#foo a, #bar span.some-class@mouseover' : function(){
// do something
}
});
</code></pre>
* @param {Object} obj The list of behaviors to apply
*/

addBehaviors : function(o){ //似乎是因为使用上DomQuery库，在Ext中似乎有许多地方都使用 css的 selector(选择器）来定位一个dom节点
if(!Ext.isReady){ //想想使用css定位器来定位对象，看来也挺ok的，元素都定位得到了。
Ext.onReady(function(){
Ext.addBehaviors(o);
});
return;
}

//这个cache只是用来，做为算法的辅助工具
//Ext.select毕竟是耗时间的事情，能省则省啊，而且一般情况下，我们调用一次addBehaviors方法只对一个元素增加监听器会比较清楚些。
var cache = {}; // simple cache for applying multiple behaviors to same selector does query multiple times
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]); //Element的on方法了
}
}
cache = null;
},

/**
* Generates unique ids. If the element already has an id, it is unchanged
* @param {Mixed} el (optional) The element to generate an id for
* @param {String} prefix (optional) Id prefix (defaults "ext-gen")
* @return {String} The generated Id.
*/
id : function(el, prefix){ //产生一个唯一的ID
prefix = prefix || "ext-gen";
el = Ext.getDom(el);
var id = prefix + (++idSeed);

//由于js支持类型转化，所以对象本身可以直接成为条件运算的内容,el是否存在在js中直接用if(el)来判断。
return el ? (el.id ? el.id : (el.id = id)) : id; //el没id则才弄出id；这个要是弄好点的话，可以在函数的最开始做判断，这样就有可能免掉Ext.getDom(e1)这样的运算了。
},

/**
* Extends one class with another class and optionally overrides members with the passed literal. This class
* also adds the function "override()" to the class that can be used to override
* members on an instance.
* @param {Object} subclass The class inheriting the functionality
* @param {Object} superclass The class being extended
* @param {Object} overrides (optional) A literal with members
* @method extend
*/
extend : function(){

//extend是重要的函数了，OO的继承在Ext中靠它了
//语法上使用上了个闭包
//函数定义完之后，马上进行调用，并且返回了也是个函数

//从该函数的实现上看，该函数值针对子类以及父类的prototype操作，难怪Ext要求要在子类的构造函数中进行这样的调用语句
//Subclass.superclass.constructor.call(this,arguments);显示地拷贝父类中非prototype定义的属性
//如果非prototype所定义的方法，将不会被overrides中的属性所覆盖.

// inline overrides
var io = function(o){
for(var m in o){
this[m] = o[m];
}
};

return function(sb, sp, overrides){

/**
（转）
1,关于F的用法
使用F是为了避免对sb原型对象的操作,联动影响sp的原型对象.
2,当typeof sp == "function"时
sb的原型将被替换,不保留任何原型属性
sb的superclass指向sp的原型对象

3,当typeof sp == "object"时
sb的原型属性将被保留
sb的superclass指向自己的原型对象
效果略等同于override

另:
1,apply,applyIf主要用于typeof == "object"时的对象操作
2,override,extend主要用于typeof == "function"时的对象原型操作

**/

 

 

if(typeof sp == 'object'){ //如果sp也是对象的话（一般来说sp这里放的是父类的构造函数），那么第三个参数overrides参数相当于被忽略掉
overrides = sp;
sp = sb; //sb重新定义了函数
}

 

var F = function(){}, sbp, spp = sp.prototype;
F.prototype = spp;
sbp = sb.prototype = new F();
sbp.constructor=sb;

sb.superclass=spp;

if(spp.constructor == Object.prototype.constructor){
spp.constructor=sp;
}
sb.override = function(o){
Ext.override(sb, o);
};
sbp.override = io;

//覆盖掉子类prototype中的属性
Ext.override(sb, overrides);
return sb;
};
}(),