ExtJs 1.1(zh-CN)

/* * 更新地址：http://jstang.5d6d.com/thread-715-1-1.html * 欢迎参与我们翻译的工作！详见《EXT API2Chinese 相关事宜》： * http://jstang.5d6d.com/thread-90-1-2.html * * 本翻译采用“创作共同约定、Creative Commons”。您可以自由： * 复制、发行、展览、表演、放映、广播或通过信息网络传播本作品 * 创作演绎作品 * 请遵守： * 署名. 您必须按照作者或者许可人指定的方式对作品进行署名。 * # 对任何再使用或者发行，您都必须向他人清楚地展示本作品使用的许可协议条款。 * # 如果得到著作权人的许可，您可以不受任何这些条件的限制 * http://creativecommons.org/licenses/by/2.5/cn/ */ /* * Ext JS Library 1.1 * Copyright(c) 2006-2007, Ext JS, LLC. * licensing@extjs.com * * http://www.extjs.com/license */ /** * @class Ext.Element * 呈现DOM里面的一个元素。<br><br> * 用法：<br> <pre><code> var el = Ext.get("my-div"); // 或者是 getEl var el = getEl("my-div"); // 或者是一个 DOM element var el = Ext.get(myDivElement); </code></pre> * 使用Ext.get或是getEl()来代替调用构造函数，保证每次调用都是获取相同的对象而非构建新的一个。 * <br><br> * <b>动画</b><br /> * 操作DOM元素，很多情况下会用一些到动画效果（可选的）。 * 动画选项应该是布尔值（true ）或是Object Literal 。动画选项有： <pre> 可选项 默认值 描述 --------- -------- --------------------------------------------- duration .35 动画持续的时间（单位：秒） easing easeOut YUI的消除方法 callback none 动画完成之后执行的函数 scope this 回调函数的作用域 </pre> *另外，可通过配置项中的“anim“来获取动画对象，这样便可停止或操控这个动画效果。例子如下： <pre><code> var el = Ext.get("my-div"); // 没有动画 el.setWidth(100); // 默认动画 el.setWidth(100, true); // 对动画的一些设置 el.setWidth(100, { duration: 1, callback: this.foo, scope: this }); // 使用属性“anim”来获取动画对象 var opt = { duration: 1, callback: this.foo, scope: this }; el.setWidth(100, opt); ... if(opt.anim.isAnimated()){ opt.anim.stop(); } </code></pre> * <b> 组合（集合的）元素</b><br /> * 要处理一组的元素，参阅<a href="Ext.CompositeElement.html">Ext.CompositeElement</a> * @constructor 直接创建新元素 * @param {String/HTMLElement} element * @param {Boolean} forceNew (可选的) 构建函数默认会检查在Cache中是否已经有这个element的实例，并是否能返回一致的实例。设置这个布尔值会中止检查（扩展这个类时较有用）。 */ (function(){ var D = Ext.lib.Dom; var E = Ext.lib.Event; var A = Ext.lib.Anim; // local style camelizing for speed var propCache = {}; var camelRe = /(-[a-z])/gi; var camelFn = function(m, a){ return a.charAt(1).toUpperCase(); }; var view = document.defaultView; Ext.Element = function(element, forceNew){ var dom = typeof element == "string" ? document.getElementById(element) : element; if(!dom){ //无效的id/element return null; } var id = dom.id; if(forceNew !== true && id && Ext.Element.cache[id]){ // 元素对象已存在 return Ext.Element.cache[id]; } /** * DOM元素 * @type HTMLElement */ this.dom = dom; /** * DOM元素之ID * @type String */ this.id = id || Ext.id(dom); }; var El = Ext.Element; El.prototype = { /** * 元素默认的显示模式 @type String */ originalDisplay : "", visibilityMode : 1, /** *如不指定CSS值的单位则默认为px。 * @type String */ defaultUnit : "px", /** * 设置元素的可见模式。 * 当调用setVisible()时，会确定可见模式究竟是“可见性visibility”的还是“显示display”的。 * @param visMode Element.VISIBILITY 或 Element.DISPLAY * @return {Ext.Element} this */ setVisibilityMode : function(visMode){ this.visibilityMode = visMode; return this; }, /** * setVisibilityMode(Element.DISPLAY)快捷方式 * @param {String} display (可选的)当可见时显示的内容 * @return {Ext.Element} this */ enableDisplayMode : function(display){ this.setVisibilityMode(El.DISPLAY); if(typeof display != "undefined") this.originalDisplay = display; return this; }, /** * 传入一个选择符的参数，找到整个节点并按照选择符查找父节点。选择符应是简易的选择符，如 div.some-class or span:first-child。 * @param {String} simpleSelector 要测试的简易选择符 * @param {Number/String/HTMLElement/Element} maxDepth (可选的) 搜索深度（MaxDepth），可以为number或元素(默认是 10 || document.body) * @param {Boolean} returnEl (可选的) True：返回Ext.Element对象代替DOM节点 * @return {HTMLElement} 匹配的DOM节点（null的话表示没有匹配结果） */ findParent : function(simpleSelector, maxDepth, returnEl){ var p = this.dom, b = document.body, depth = 0, dq = Ext.DomQuery, stopEl; maxDepth = maxDepth || 50; if(typeof maxDepth != "number"){ stopEl = Ext.getDom(maxDepth); maxDepth = 10; } while(p && p.nodeType == 1 && depth < maxDepth && p != b && p != stopEl){ if(dq.is(p, simpleSelector)){ return returnEl ? Ext.get(p) : p; } depth++; p = p.parentNode; } return null; }, /** * 传入一个选择符的参数，按照选择符查找父节点。选择符应是简易的选择符，如 div.some-class or span:first-child。 * @param {String} simpleSelector 要测试的简易选择符 * @param {Number/String/HTMLElement/Element} maxDepth (可选的) 搜索深度（MaxDepth），可以为number或元素(默认是 10 || document.body) * @param {Boolean} returnEl (可选的) True：返回Ext.Element对象代替DOM节点 * @return {HTMLElement} 匹配的DOM节点（null的话表示没有匹配结果） */ findParentNode : function(simpleSelector, maxDepth, returnEl){ var p = Ext.fly(this.dom.parentNode, '_internal'); return p ? p.findParent(simpleSelector, maxDepth, returnEl) : null; }, /** * 传入一个选择符的参数，按照选择符并沿着dom查找父节点。选择符应是简易的选择符，如 div.some-class or span:first-child。 * @param {String} simpleSelector 要测试的简易选择符 * @param {Number/String/HTMLElement/Element} maxDepth (可选的) 搜索深度（MaxDepth），可以为number或元素(默认是 10 || document.body) * @param {Boolean} returnEl (可选的) True：返回Ext.Element对象代替DOM节点 * @return {HTMLElement} 匹配的DOM节点（null的话表示没有匹配结果） */ up : function(simpleSelector, maxDepth){ return this.findParentNode(simpleSelector, maxDepth, true); }, /** * 返回true，如果这个元素就是传入的简易选择符参数（如 div.some-class或span:first-child） * @param {String} ss 要测试的简易选择符 * @return {Boolean} true表示元素匹配选择符成功，否则返回false */ is : function(simpleSelector){ return Ext.DomQuery.is(this.dom, simpleSelector); }, /** * 在元素上执行动画 * @param {Object} args YUI之动画配置参数 * @param {Float} duration (可选的) 动画持续多久 (默认为 .35 秒)