- 浏览: 90857 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
hzxlb910:
背景看的头晕
extJs 2.1学习笔记(Ext.data.JsonReader篇一) -
whyang:
先鄙视一下这个论坛,要做测试才能回复。
我是想问下楼主,
第 ...
Struts2的异常处理机制:
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);
}
}
}
原文链接
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);
}
}
}
发表评论
-
Extjs3.0的变动记录(转载)
2009-09-24 11:23 2963Release Date: Jul 6, 2009 Curr ... -
Ext中TreePanel控件和TabPanel控件搭配测试
2009-08-25 13:51 1610在实际的项目中,左边树形菜单,提供各种功能点击,右边一个面板, ... -
extJs 2.1学习笔记(Ext.Updater篇二)
2009-08-05 22:02 1594全 称:Ext.Updater 命名 ... -
extJs 2.1学习笔记(Ext.Updater篇一)
2009-08-05 22:00 1227上几篇中老老实实地把E ... -
extJs 2.1 学习笔记(Ext.data.HttpProxy篇)
2009-08-05 21:59 2475关于Ext.data中各个类的 ... -
extJs 2.1学习笔记(Ext.data.JsonReader篇一)
2009-08-05 21:58 2123有个事要说一下:DataProxy的子类呢,都有一个load来 ... -
extJs 2.1学习笔记(Ext.data.JsonReader篇二)
2009-08-05 21:57 1295有了上一篇中所讲内容,一般情况下就可以应付了,不过,Jso ... -
extJs 2.1学习笔记(Ext.TabPanel篇)
2009-08-05 21:56 1435Ext.TabPanel这个东西是最常用的组件之一,它继承 ... -
extJs 2.1学习笔记(Function扩展篇)
2009-08-05 21:55 974ExtJs对JavaScript的内建对象进行了扩展,对什么O ... -
extJs 2.1学习笔记(Ext.data.Store篇)
2009-08-05 21:54 1535Ext.data.Store,这个东西是JavaScript ... -
extJs 2.1学习笔记(Ext.data.Connection篇二)
2009-08-05 21:54 1721上一篇主要是扎扎实实地翻译了一下Ext.data.Connec ... -
extJs 2.1学习笔记(Ext.data.Connection篇一)
2009-08-05 21:52 1391ExtJs之所以能异步请求数据,全依赖于Ext.data. ... -
extJs 2.0学习笔记(Ext.Panel终结篇)
2009-08-05 21:49 1158怪不得我对Ext.Panel穷追猛打,前面已经写过四篇针对它的 ... -
extJs 2.0学习笔记(事件注册总结篇)
2009-08-05 21:48 1159本来,我也没把这档子 ... -
extJs 2.0学习笔记(Ext.Panel篇四)
2009-08-05 21:46 1715我刚才禁不住诱惑去看 ... -
extJs 2.0学习笔记(Ext.Panel篇三)
2009-08-05 21:45 1923上一篇中把panel的config部分的文档翻译了一下,事实 ... -
extJs 2.0学习笔记(Ext.Panel篇二)
2009-08-05 21:44 1386activeItem : String/Number 用 ... -
extJs 2.0学习笔记(Ext.Panel篇一)
2009-08-05 21:42 1226原文链接: http://hi.baidu ... -
EXT 中 类的继承
2009-07-31 09:36 1009深入剖析ExtJS 2.2实现及 ... -
Ext 2 概述
2009-07-16 08:48 824原文链接 http://hi.baidu.com/xcl1 ...
相关推荐
其中,“Ext树”(Ext Tree)是ExtJS中的一个重要组件,用于展示层级结构的数据,如文件系统、组织架构等。本文将深入探讨如何在ExtJS中创建一个树形视图。 首先,理解Ext树的基本结构至关重要。一个Ext树由节点...
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...
renderTo: Ext.getBody() }); ``` 这里,`store`配置项定义了树的数据源,`root`属性指定了根节点,`expanded`为true表示默认展开根节点。`viewConfig`用于设置视图样式,`renderTo`指定渲染到页面的哪个元素。 ...
TreePanel是EXT中用于显示层次数据结构的一个重要组件,可以用来表示具有层级关系的数据集,如文件系统目录结构、组织架构等。 ##### 1. 树节点(TreeNode) 树形控件中的每个条目称为一个节点,可以通过TreeNode类来...
Ext3.2还支持数据绑定和Model-View-Controller (MVC)架构,这使得开发者可以轻松地处理数据并管理应用程序的状态。例如,通过Ext.data.Store可以方便地加载和操作数据,而Ext.grid.Panel则可以用于展示和编辑表格...
renderTo: Ext.getBody() }); } }); ``` #### 五、控制Grid 在Extjs中,Grid是一个常用的视图组件,用于展示表格形式的数据。通过定义控制器的方法,我们可以轻松地控制Grid的行为。 ##### 5.1 控制Grid 在...
renderTo: Ext.getBody() }); ``` **控制器(Controller)** 控制器(Controller)是MVC架构的关键部分,它协调视图和模型之间的交互。在这个实例中,虽然没有显示具体的控制器代码,但通常我们会创建一个控制器来...
* Render:渲染处理,比如对于FreeMark的支持 * Server:服务器 * Token:令牌 * Upload:文件上传处理 * Validate:验证处理,主要是数据持久化时的验证 运作原理 我们从一次新增页面的add操作请求来看: 1. 首先...
创建Controller时,可以使用`Ext.app.Controller`类,定义控制方法和引用视图组件: ```javascript Ext.application({ name: 'MyApp', controllers: ['MyController'] }); Ext.define('MyController', { extend...
JFinal 的空间架构由五个主要部分组成:Handler、Interceptor、Controller、Render、Plugin。这些组件都是基于接口实现的,允许开发者进行高度定制和扩展。 - **Handler**:全局处理器,处理HTTP请求,提供公共处理...
renderTo: Ext.getBody() }); ``` 在提供的"ext-3.2.1"压缩包中,可能包含了ExtJS 3.2.1版本的库文件、文档、示例代码等资源,这可以帮助开发者更好地学习和使用该框架。通过阅读文档和尝试例子,你可以进一步了解...
在ExtJs中,可以使用`Ext.tree.TreeNode`类来创建节点,并通过`appendChild`方法将子节点添加到父节点下。 ```javascript var root = new Ext.tree.TreeNode({ text: '区域信息' }); var node1 = new Ext.tree....
render: this.onPanelRendered } }); }, onPanelRendered: function () { console.log('The panel was rendered'); } }); ``` 这里使用了ComponentQuery语法来选择特定的组件,并为其注册事件处理器。 ####...
#### 二、ExtJS 架构分析 ExtJS 发布包包含多个重要的目录和文件,了解这些组成部分对于掌握 ExtJS 至关重要: 1. **builds** 目录包含了经过压缩的 ExtJS 代码,压缩后的代码体积更小,有助于提高页面加载速度。...
renderTo: Ext.getBody(), // 渲染到body store: myTreeStore, // 使用的store rootVisible: true // 是否显示根节点 }); ``` 2. **TreeStore与数据** TreePanel的数据由`Ext.data.TreeStore`(简称TreeStore...
renderTo: Ext.getBody() }); ``` 3. **控制器(Controller)**:控制器处理视图和模型之间的交互。你可以监听视图事件,然后调用模型的方法或者更新视图。在ExtJS中,控制器通过`Ext.app.Controller`定义,并可以...
renderTo: Ext.getBody() }); ``` **控制器(Controller)** 控制器作为视图和模型之间的桥梁,处理用户的交互事件,更新视图或模型。`Ext.app.Controller`是控制器的基本类,可以监听事件、定义方法来响应这些...
- **组件渲染**: 使用`render`方法将组件渲染到DOM中。 #### 9. 按钮与日期选择器 - **按钮**: 基础组件之一,可以通过配置选项自定义样式和行为。 - **日期选择器**: 用于选择日期的组件,内置了许多实用的功能。 ...