`
yiminghe
  • 浏览: 1466842 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Extjs3.0 DomHelper Bug

阅读更多
Ext.apply(Ext.DomHelper,
function(){
	var pub,
		afterbegin = 'afterbegin',
    	afterend = 'afterend',
    	beforebegin = 'beforebegin',
    	beforeend = 'beforeend';

	// private
    function doInsert(el, o, returnElement, pos, sibling, append){
        el = Ext.getDom(el);
        var newNode;
        //错了,由于闭包,不能在外部设置useDom=true了。
        if (pub.useDom) {
        //应该为 Ext.DomHelper.useDom
            newNode = createDom(o, null);
            if (append) {
	            el.appendChild(newNode);
            } else {
	        	(sibling == 'firstChild' ? el : el.parentNode).insertBefore(newNode, el[sibling] || el);
            }
        } else {
            newNode = Ext.DomHelper.insertHtml(pos, el, Ext.DomHelper.createHtml(o));
        }
        return returnElement ? Ext.get(newNode, true) : newNode;
    }

	// build as dom
    /** @ignore */
    function createDom(o, parentNode){
        var el,
        	doc = document,
        	useSet,
        	attr,
        	val,
        	cn;

        if (Ext.isArray(o)) {                       // Allow Arrays of siblings to be inserted
            el = doc.createDocumentFragment(); // in one shot using a DocumentFragment
	        Ext.each(o, function(v) {
                createDom(v, el);
            });
        } else if (Ext.isString(o)) {         // Allow a string as a child spec.
            el = doc.createTextNode(o);
        } else {
            el = doc.createElement( o.tag || 'div' );
            useSet = !!el.setAttribute; // In IE some elements don't have setAttribute
            Ext.iterate(o, function(attr, val){
                if(!/tag|children|cn|html|style/.test(attr)){
	                if(attr == 'cls'){
	                    el.className = val;
	                }else{
                        if(useSet){
                            el.setAttribute(attr, val);
                        }else{
                            el[attr] = val;
                        }
	                }
                }
            });
            pub.applyStyles(el, o.style);

            if ((cn = o.children || o.cn)) {
                createDom(cn, el);
            } else if (o.html) {
                el.innerHTML = o.html;
            }
        }
        if(parentNode){
           parentNode.appendChild(el);
        }
        return el;
    }

	pub = {
		/**
	     * Creates a new Ext.Template from the DOM object spec.
	     * @param {Object} o The DOM object spec (and children)
	     * @return {Ext.Template} The new template
	     */
	    createTemplate : function(o){
	        var html = Ext.DomHelper.createHtml(o);
	        return new Ext.Template(html);
	    },

		/** True to force the use of DOM instead of html fragments @type Boolean */
	    useDom : false,

	    /**
	     * Applies a style specification to an element.
	     * @param {String/HTMLElement} el The element to apply styles to
	     * @param {String/Object/Function} styles A style specification string e.g. 'width:100px', or object in the form {width:'100px'}, or
	     * a function which returns such a specification.
	     */
	    applyStyles : function(el, styles){
		    if(styles){
				var i = 0,
	    			len,
	    			style;

	    		el = Ext.fly(el);
				if(Ext.isFunction(styles)){
   					styles = styles.call();
				}
				if(Ext.isString(styles)){
					styles = styles.trim().split(/\s*(?::|;)\s*/);
					for(len = styles.length; i < len;){
						el.setStyle(styles[i++], styles[i++]);
					}
				}else if (Ext.isObject(styles)){
					el.setStyle(styles);
				}
			}
	    },

	    /**
	     * Creates new DOM element(s) and inserts them before el.
	     * @param {Mixed} el The context element
	     * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
	     * @param {Boolean} returnElement (optional) true to return a Ext.Element
	     * @return {HTMLElement/Ext.Element} The new node
         * @hide (repeat)
	     */
	    insertBefore : function(el, o, returnElement){
	        return doInsert(el, o, returnElement, beforebegin);
	    },

	    /**
	     * Creates new DOM element(s) and inserts them after el.
	     * @param {Mixed} el The context element
	     * @param {Object} o The DOM object spec (and children)
	     * @param {Boolean} returnElement (optional) true to return a Ext.Element
	     * @return {HTMLElement/Ext.Element} The new node
         * @hide (repeat)
	     */
	    insertAfter : function(el, o, returnElement){
	        return doInsert(el, o, returnElement, afterend, 'nextSibling');
	    },

	    /**
	     * Creates new DOM element(s) and inserts them as the first child of el.
	     * @param {Mixed} el The context element
	     * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
	     * @param {Boolean} returnElement (optional) true to return a Ext.Element
	     * @return {HTMLElement/Ext.Element} The new node
         * @hide (repeat)
	     */
	    insertFirst : function(el, o, returnElement){
	        return doInsert(el, o, returnElement, afterbegin, 'firstChild');
	    },

	    /**
	     * Creates new DOM element(s) and appends them to el.
	     * @param {Mixed} el The context element
	     * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
	     * @param {Boolean} returnElement (optional) true to return a Ext.Element
	     * @return {HTMLElement/Ext.Element} The new node
         * @hide (repeat)
	     */
	    append: function(el, o, returnElement){
            return doInsert(el, o, returnElement, beforeend, '', true);
        },

	    /**
	     * Creates new DOM element(s) without inserting them to the document.
	     * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
	     * @return {HTMLElement} The new uninserted node
	     */
        createDom: createDom
	};
	return pub;
}());

 


        //错了,由于闭包,不能在外部设置useDom=true了。
        if (pub.useDom) {
        //应该为 Ext.DomHelper.useDom

 

 

 

有些情况需要 设置 Ext.DomHelper.useDom =true

 

如:

 

 

Ext.DomHelper 添加 option 问题



现在 Extjs 3.0 设置后无效了


另外发现 ext-core 3.0 和 extjs 3.0 完全版 相同功能的代码实现有些不一样,如 ext-core 3.0 DomHelper 根本没上述代码,也就是说 core 不能用dom方式了 ,好像 core 是 完全版的 简化降级形式 ,太不爽了!很多有用的基础函数都在core里被删掉了,完全版还有,看来要定制一个自己的core了!

 

 

 

 

分享到:
评论

相关推荐

    ExtJS3.0中文API

    绝对的ExtJS3.0中文API,本人在网上找了好久才找到的,在此奉献给大家!!解压后有30多兆!!

    extJS3.0完整包

    extJS3.0 extJS3.0 extJS3.0 extJS3.0 extJS3.0 extJS3.0 extJS3.0

    ExtJS3.0 源码分析与开发实例宝典

    ExtJS3.0 源码分析与开发实例宝典

    extjs3.0开发包含示例api

    EXTJS 3.0是一款基于JavaScript的开源UI框架,它为Web应用提供了丰富的组件和功能。这个开发包包含了EXTJS 3.0的核心API、示例代码和源文件,是学习和开发EXTJS应用程序的重要资源。 一、EXTJS 3.0 API EXTJS 3.0的...

    Extjs3.0 中文API帮助文档

    Extjs3.0中文API文档 够详细 够详细 够详细

    Extjs3.0 常用组件介绍及怎么安装开发利器Spket

    **ExtJS 3.0 常用组件介绍** ExtJS 是一款强大的JavaScript库,用于构建富客户端Web应用。在3.0版本中,它提供了一系列丰富的组件,这些组件可以帮助开发者构建功能丰富的用户界面。以下是一些ExtJS 3.0中的常用...

    EXTJS3.0登陆DEMO

    EXTJS3.0登录DEMO是一个基于EXTJS框架的示例项目,展示了如何将EXTJS与STRUTS2、SPRING和IBATIS等流行Java技术整合,构建一个完整的Web应用程序。EXTJS是一个用于创建富客户端界面的JavaScript库,而STRUTS2、SPRING...

    extjs3.0 组件

    EXTJS 3.0 版本是其历史上的一个重要里程碑,提供了丰富的组件库和强大的功能,为开发人员提供了构建复杂Web界面的能力。在这个课程中,我们将深入探讨EXTJS 3.0 的核心组件,这些组件是构建用户界面的基础。 首先...

    extjs3.0 中扩展的日期控件

    由于extjs3.0自己封装的时间不能够选择时分秒,给大家开发带来了一些麻烦。虽然网上有ext2.0的日期扩展控件,但在3.0中不能用。公司现在项目正用了,因此我就对extjs3.0时间控件的扩展,实现了可选择时分秒功能。...

    EXTJS3.0中文API (离线)

    EXTJS 3.0是该框架的一个重要版本,它提供了一系列先进的组件和功能,帮助开发者创建功能强大的Web应用。中文API手册是EXTJS开发者的重要参考资料,它使得不懂英语或者英语水平有限的开发者也能方便地学习和使用...

    EXTJS3.0多文件上传组件

    EXTJS3.0是一款强大的JavaScript框架,用于构建富客户端应用程序。它提供了丰富的组件库和灵活的布局管理,使得开发者能够创建功能丰富的Web应用界面。在"EXTJS3.0多文件上传组件"中,我们主要关注的是如何利用EXTJS...

    extjs3.0 API 中英

    这个压缩包包含了ExtJS 3.0的API文档,分别以中文和英文两种语言提供,对于学习和查阅非常便利。 在ExtJS 3.0的API中,我们可以找到以下几个重要的知识点: 1. **组件系统**:ExtJS的核心是它的组件模型,包括各种...

    ExtJS 3.0 API 文档离线包

    此“ExtJS 3.0 API 文档离线包”包含了所有开发者需要了解的关于3.0版本ExtJS框架的详细信息,以便在没有互联网连接的情况下进行学习和开发。 API文档是任何开发工具的核心部分,它提供了一个清晰的指南,解释了库...

    ExtJS3.0可视化开发工具

    通过"ExtJS3.0可视化开发工具",开发者可以更高效地创建和维护ExtJS应用程序,提升开发效率。然而,值得注意的是,虽然可视化工具简化了部分流程,深入理解ExtJS的底层原理和API仍然是必要的,特别是在处理复杂逻辑...

    extjs3.0部分插件代码

    在"extjs3.0部分插件代码"这个资料中,我们可以期待学习到关于ExtJS 3.0版本的一些关键插件的实现细节。 首先,让我们关注一下"spinner"这个文件名。在ExtJS中,Spinner是一个常见的组件,它通常用作数值输入框,...

    安装ExtJS3.0开发环境

    在网络上搜集,自己安装成功后在使用的开发环境。因ExtJS3.0和spket-1.6.18.jar的开发包太大不能上传,里面有安装说明和下载路径 ext-jsb2.zip jsb2是最新的。。请所需者取之

    ExtJs3.0API

    ExtJs3.0API,希望对大家有所帮助

    extjs3.0开发包以及文档

    extjs框架,学习,开发,extjs3.0开发包以及文档

    ExtJS 3.0 学习资源

    ExtJS 3.0 学习资源,有兴趣的 可以下载看看!!!!

    extjs3.0框架

    ExtJS 3.0框架是Sencha公司推出的一款基于JavaScript的富客户端开发框架,它主要用于构建功能强大、交互丰富的Web应用程序。这个框架以其强大的组件化系统、数据绑定机制和丰富的UI控件闻名,使得开发者可以方便地...

Global site tag (gtag.js) - Google Analytics