`
gkuiyj
  • 浏览: 91015 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Ext架构分析:render方法

阅读更多
Ext架构分析(3)--Widget之父Component:render方法
原文链接
http://blog.ccidnet.com/blog-htm-do-showone-uid-77419-type-blog-itemid-246167.html
  首先,让我们回忆一下对于组件的讨论:
  1.只有配置了applyTo或renderTo属性才会在构建组件时立刻进行render方法的调用;
  2.如果是applyTo属性,则会对component的容器进行渲染;renderTo则是对component进行渲染;
 
  现在,让我们看一下render方法的实现:
render : function(container, position){
//如果还没有被渲染 并且beforerender方法返回值为true,则进行渲染,这样,确保了对于组件仅进行一次渲染; position参数指定了组件被插入容器的位置(即在position指定的元素前插入组件)
if(!this.rendered && this.fireEvent("beforerender", this) !== false){
//没有传入任何参数(即未指定容器container)并且设置了this.el,增配置this.container属性
if(!container && this.el){
  this.el = Ext.get(this.el);
  container = this.el.dom.parentNode;
  this.allowDomMove = false;
}
this.container = Ext.get(container);
//如果配置了ctCls,对container进行ctCls的渲染,ctCls(Container Class)是容器的渲染类名,cls(Class)是元素的渲染类名
if(this.ctCls){
  this.container.addClass(this.ctCls);
}
this.rendered = true;
//设置position
if(position !== undefined){
  if(typeof position == 'number'){
  position = this.container.dom.childNodes[position];
  }else{
  position = Ext.getDom(position);
  }
}
//进行onRender方法调用
this.onRender(this.container, position || null);
//如果设置了autoShow,则移除x-hidden和x-hide-hideMode(根据hideMode该属性可以配置为display,visibility,offsets三种属性),从这个方法可以看出,一搬来说,组件创建后缺省的模式为hidden或者none
if(this.autoShow){
  this.el.removeClass(['x-hidden','x-hide-' + this.hideMode]);
}
//如果设置了cls,则对元素进行渲染
if(this.cls){
  this.el.addClass(this.cls);
  delete this.cls;
}
//如果设置了style,则对元素Style属性进行设置
if(this.style){
  this.el.applyStyles(this.style);
  delete this.style;
}
//触发fireEvent和AfterRender事件
this.fireEvent("render", this);
this.afterRender(this.container);
//如果设置了hidden和disabled则进行相应的处理
if(this.hidden){
  this.hide();
}
if(this.disabled){
  this.disable();
}
this.initStateEvents();
}
return this;
}
onRender实现的方法如下:
onRender : function(ct, position){
//如果配置了autoEl属性,则根据autoEl属性生成el属性, 如果autoEl属性为字符串,则根据字符串生成元素;否则,则在autoEl指定的元素外包裹一层div元素
if(this.autoEl){
if(typeof this.autoEl == 'string'){
  this.el = document.createElement(this.autoEl);
}else{
  var div = document.createElement('div');
  Ext.DomHelper.overwrite(div, this.autoEl);
  this.el = div.firstChild;
}
}
//把position元素插入到el元素前
if(this.el){
this.el = Ext.get(this.el);
if(this.allowDomMove !== false){
  ct.dom.insertBefore(this.el.dom, position);
}
}
}


分享到:
评论

相关推荐

    Ext树创建说明.rar

    其中,“Ext树”(Ext Tree)是ExtJS中的一个重要组件,用于展示层级结构的数据,如文件系统、组织架构等。本文将深入探讨如何在ExtJS中创建一个树形视图。 首先,理解Ext树的基本结构至关重要。一个Ext树由节点...

    Rails GUI Development with Ext JS 10-Jan-08 RUG-B.pdf

    format.ext_json { render :json => Post.find(:all).to_ext_json } end end def create @post = Post.new(params[:post]) respond_to do |format| if @post.save flash[:notice] = 'Post was successfully...

    ExtJs树形结构 ext的简单应用

    renderTo: Ext.getBody() }); ``` 这里,`store`配置项定义了树的数据源,`root`属性指定了根节点,`expanded`为true表示默认展开根节点。`viewConfig`用于设置视图样式,`renderTo`指定渲染到页面的哪个元素。 ...

    EXT带右击菜单的树

    TreePanel是EXT中用于显示层次数据结构的一个重要组件,可以用来表示具有层级关系的数据集,如文件系统目录结构、组织架构等。 ##### 1. 树节点(TreeNode) 树形控件中的每个条目称为一个节点,可以通过TreeNode类来...

    Ext3.2(不是API,是开发需要引入的文件)

    Ext3.2还支持数据绑定和Model-View-Controller (MVC)架构,这使得开发者可以轻松地处理数据并管理应用程序的状态。例如,通过Ext.data.Store可以方便地加载和操作数据,而Ext.grid.Panel则可以用于展示和编辑表格...

    Extjs 4.2.0 MVC 架构 官方文档例子中文

    renderTo: Ext.getBody() }); } }); ``` #### 五、控制Grid 在Extjs中,Grid是一个常用的视图组件,用于展示表格形式的数据。通过定义控制器的方法,我们可以轻松地控制Grid的行为。 ##### 5.1 控制Grid 在...

    Extjs 4.0 MVC分页实例

    renderTo: Ext.getBody() }); ``` **控制器(Controller)** 控制器(Controller)是MVC架构的关键部分,它协调视图和模型之间的交互。在这个实例中,虽然没有显示具体的控制器代码,但通常我们会创建一个控制器来...

    JFinal技术框架解析

    * Render:渲染处理,比如对于FreeMark的支持 * Server:服务器 * Token:令牌 * Upload:文件上传处理 * Validate:验证处理,主要是数据持久化时的验证 运作原理 我们从一次新增页面的add操作请求来看: 1. 首先...

    extjs3.4如何创建对象

    创建Controller时,可以使用`Ext.app.Controller`类,定义控制方法和引用视图组件: ```javascript Ext.application({ name: 'MyApp', controllers: ['MyController'] }); Ext.define('MyController', { extend...

    jfinal技术框架解析[整理].pdf

    JFinal 的空间架构由五个主要部分组成:Handler、Interceptor、Controller、Render、Plugin。这些组件都是基于接口实现的,允许开发者进行高度定制和扩展。 - **Handler**:全局处理器,处理HTTP请求,提供公共处理...

    extjs详细讲解!并给出生动例子!并含有多个ext帮助文档

    renderTo: Ext.getBody() }); ``` 在提供的"ext-3.2.1"压缩包中,可能包含了ExtJS 3.2.1版本的库文件、文档、示例代码等资源,这可以帮助开发者更好地学习和使用该框架。通过阅读文档和尝试例子,你可以进一步了解...

    使用ExtJs构建树形菜单功能

    在ExtJs中,可以使用`Ext.tree.TreeNode`类来创建节点,并通过`appendChild`方法将子节点添加到父节点下。 ```javascript var root = new Ext.tree.TreeNode({ text: '区域信息' }); var node1 = new Ext.tree....

    extmvc的资料

    render: this.onPanelRendered } }); }, onPanelRendered: function () { console.log('The panel was rendered'); } }); ``` 这里使用了ComponentQuery语法来选择特定的组件,并为其注册事件处理器。 ####...

    extjs详细ppt

    #### 二、ExtJS 架构分析 ExtJS 发布包包含多个重要的目录和文件,了解这些组成部分对于掌握 ExtJS 至关重要: 1. **builds** 目录包含了经过压缩的 ExtJS 代码,压缩后的代码体积更小,有助于提高页面加载速度。...

    TreePanel基本使用

    renderTo: Ext.getBody(), // 渲染到body store: myTreeStore, // 使用的store rootVisible: true // 是否显示根节点 }); ``` 2. **TreeStore与数据** TreePanel的数据由`Ext.data.TreeStore`(简称TreeStore...

    ExtJS MVC入门级开发案例

    renderTo: Ext.getBody() }); ``` 3. **控制器(Controller)**:控制器处理视图和模型之间的交互。你可以监听视图事件,然后调用模型的方法或者更新视图。在ExtJS中,控制器通过`Ext.app.Controller`定义,并可以...

    ExtJs MVC例子

    renderTo: Ext.getBody() }); ``` **控制器(Controller)** 控制器作为视图和模型之间的桥梁,处理用户的交互事件,更新视图或模型。`Ext.app.Controller`是控制器的基本类,可以监听事件、定义方法来响应这些...

    轻松搞定ExtJS.pdf

    - **组件渲染**: 使用`render`方法将组件渲染到DOM中。 #### 9. 按钮与日期选择器 - **按钮**: 基础组件之一,可以通过配置选项自定义样式和行为。 - **日期选择器**: 用于选择日期的组件,内置了许多实用的功能。 ...

Global site tag (gtag.js) - Google Analytics