2007-12-21

applyTo和renderTo配置项

对于applyTo和renderTo，我们在Ext 2.0的官方文档上可以看到，

引用
applyTo : Mixed
The id of the node, a DOM node or an existing Element corresponding to a DIV that is already present in the document that specifies some structural markup for this component. When applyTo is used, constituent parts of the component can also be specified by id or CSS class name within the main element, and the component being created may attempt to create its subcomponents from that markup if applicable. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.

即applyTo代表一个在页面上已经存在的元素或该元素的id，该元素通过markup的方式来表示欲生成的组件的某些结构化信息，Ext在创建一个组件时，会首先考虑使用applyTo元素中的存在的元素，你可以认为applyTo是组件在页面上的模板，与YUI中的markup模式很相似。当你在config中配置了applyTo属性后，renderTo属性将会被忽略。并且生成的组件将会被自动置去applyTo元素的父元素中。


引用
renderTo : Mixed
The id of the node, a DOM node or an existing Element that will be the container to render this component into. Using this config, a call to render() is not required.

renderTo主要用来表示新生成的组件在页面上的container


让我们来看看Component.js中的相应代码： 

if(this.applyTo){   
    this.applyToMarkup(this.applyTo);   
    delete this.applyTo;   
}else if(this.renderTo){   
    this.render(this.renderTo);   
    delete this.renderTo;   
}   
  
applyToMarkup : function(el){   
    this.allowDomMove = false;   
    this.el = Ext.get(el);   
    this.render(this.el.dom.parentNode);   
}



可见applyTo在Component级别是取得applyTo的parentNode来调用render()，各种继承自Component的组件会在各自的onRender方法中来构建组件，使用CSS选择器来选择相应的元素而不是新生成相应的元素。
例如Panel.js中 

if(this.el){ // existing markup   
    this.el.addClass(this.baseCls);   
    this.header = this.el.down('.'+this.headerCls);   
    this.bwrap = this.el.down('.'+this.bwrapCls);   
    var cp = this.bwrap ? this.bwrap : this.el;   
    this.tbar = cp.down('.'+this.tbarCls);   
    this.body = cp.down('.'+this.bodyCls);   
    this.bbar = cp.down('.'+this.bbarCls);   
    this.footer = cp.down('.'+this.footerCls);   
    this.fromMarkup = true;   
}else{   
    this.el = ct.createChild({   
        id: this.id,   
        cls: this.baseCls   
    }, position);   
}
评论
bbiao 2007-12-21
bigxxs 写道
呵呵，响应真快，是否可以简单理解为：

applyTo是直接使用指定元素来生成组件，
renderTo是在指定容器内部生成组件（该元素被用作容器）
applyToMarkup和render则是分别对应于以上两个属性的lazyRender方法

是否是lazyRender要视具体的组件来看，不过你前两点的认识是对的
bigxxs 2007-12-21
呵呵，响应真快，是否可以简单理解为：

applyTo是直接使用指定元素来生成组件，
renderTo是在指定容器内部生成组件（该元素被用作容器）
applyToMarkup和render则是分别对应于以上两个属性的lazyRender方法
发表评论

提醒: 该博客已发表在公共论坛，博客所有留言会成为论坛回贴，留言请注意遵守论坛发贴规则

您还没有登录，请登录后发表评论

bbiao
搜索本博客
博客分类
存档
最新评论
  • Apache的中配置Directory ...
    多谢了！！今天部署也出现和你一样的问题！也整了二三个小时 最后看你的贴子关了se ...
    -- by javadonkey
  • YUI的一点优点
    老朽的HTML已经不能适应这个时代的需要了，应该有新的标准语言出来统一大家的标识 ...
    -- by clia
  • YUI的一些不足
    刚看了YUI的代码，对于Container下的属性的配置，是不区别大小写的，所以 ...
    -- by bbiao
  • YUI的一点优点
    air已经是这样做，号称是可利用当前的HTML/CSS/JS技术。迁移到桌面程序 ...
    -- by sp42
  • YUI的一点优点
    jellyme 写道LZ在YUI的看法上，我是非常赞同的。但是LZ提及的Prog ...
    -- by bbiao