- 浏览: 90839 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
hzxlb910:
背景看的头晕
extJs 2.1学习笔记(Ext.data.JsonReader篇一) -
whyang:
先鄙视一下这个论坛,要做测试才能回复。
我是想问下楼主,
第 ...
Struts2的异常处理机制:
Ext.TabPanel这个东西是最常用的组件之一,它继承自Ext.Panel。看了一个下午的源代码,对它的一些基本原理有所了解了。
下面要讲一些问题,这些问题绝对是本人独门秘笈,非入室弟子不传。哈哈哈。
一、组件的组成:
因为继承自Ext.Panel,所以,它也是由header、tbar、body、bbar、footer这几个部分构成,有人问:TabPanel的面板标签是在哪儿呢(就是你点击换页的东西)?它默认是放在header中的。但是,如果设置了:tabPosition的话就不一定了,tabPosition可取两个值:top、bottom。所以,标签可以是放在下面,但是,Ext目前还不支技放在左边、右边。
那么,不同的标签是用什么元素来组织的呢?用ul。一页对应一个li。li的id的取值有规律哦,它的取值公式如下:tabpanel.id+tabpanel.idDelimiter+面板的id。正是因为有了这个规律,才能根据点击的标签而找到对应的面板。这个问题是一大主题,在下面讲。
这是面板的标签,下面的面板呢?简单!!!一个Ext.Panel对应一个面板,注意:这儿的面板是没有header的,如果你想 tab.items.get(1).header,在这儿,header===undefined。为什么为面板定义的title会对应到标签中去呢?这个是TabPanel的特意处理的。至于换页效果是怎么出来的?CardLayout。这下组件的大概结构都清楚了。还有不明白,自己new Ext.TabPanel({……})一个,然后在FireBug下面去查看dom结构,就一清二楚了。
二、处理标签的事件
为什么要研究这个问题?有需求的,如何在鼠标移到标签上时就显示对应的面板呢?默认情况下,TabPanel是不支持这个功能的,但是,这个功能有时是需要的。这儿有点小技巧。
看Ext.TabPanel源代码中关于标签的事件处理:
this.strip.on('mousedown', this.onStripMouseDown, this);
this.strip.on('click', this.onStripClick, this);
this.strip.on('contextmenu', this.onStripContextMenu, this);
if(this.enableTabScroll){
this.strip.on('mousewheel', this.onWheel, this);
}
这段代码写在initEvents函数中,先解释一下,this.strip是指头部放标签的那个ul元素,相信,98%的读者会想,要注册事件也应当是为li元素注册,怎么会统统注册到ul这个父容器上面呢?原理就是事件冒泡。关于事件传递的原理,本人在下一文中有详细的实验、明确的结论,不再赘言。
ul元素捕获了事件,怎样在事件处理函数中得知倒底是哪个li发生了事件呢?Ext写了个函数:findTargets。详情请见如下代码:
findTargets : function(e){
var item = null;
var itemEl = e.getTarget('li', this.strip);
if(itemEl){
item = this.getComponent(itemEl.id.split(this.idDelimiter)[1]);
if(item.disabled){
return {
close : null,
item : null,
el : null
};
}
}
return {
close : e.getTarget('.x-tab-strip-close', this.strip),
item : item,
el : itemEl
};
},
// private
onStripMouseDown : function(e){
e.preventDefault();
if(e.button != 0){
return;
}
var t = this.findTargets(e);
if(t.close){
this.remove(t.item);
return;
}
if(t.item && t.item != this.activeTab){
this.setActiveTab(t.item);
}
},
一切的关键就在于li元素的id的命名规则,从中取出对应的面板的id,这样就能getComponent,从而获得对应的面板引用,再 setActiveTab就办成了。至于getTarget这个是EventObject中封装的函数,作用是在事件传播路径上查找满足指定选择条件的元素。这个函数的详情见它的源码。
下面要讲一些问题,这些问题绝对是本人独门秘笈,非入室弟子不传。哈哈哈。
一、组件的组成:
因为继承自Ext.Panel,所以,它也是由header、tbar、body、bbar、footer这几个部分构成,有人问:TabPanel的面板标签是在哪儿呢(就是你点击换页的东西)?它默认是放在header中的。但是,如果设置了:tabPosition的话就不一定了,tabPosition可取两个值:top、bottom。所以,标签可以是放在下面,但是,Ext目前还不支技放在左边、右边。
那么,不同的标签是用什么元素来组织的呢?用ul。一页对应一个li。li的id的取值有规律哦,它的取值公式如下:tabpanel.id+tabpanel.idDelimiter+面板的id。正是因为有了这个规律,才能根据点击的标签而找到对应的面板。这个问题是一大主题,在下面讲。
这是面板的标签,下面的面板呢?简单!!!一个Ext.Panel对应一个面板,注意:这儿的面板是没有header的,如果你想 tab.items.get(1).header,在这儿,header===undefined。为什么为面板定义的title会对应到标签中去呢?这个是TabPanel的特意处理的。至于换页效果是怎么出来的?CardLayout。这下组件的大概结构都清楚了。还有不明白,自己new Ext.TabPanel({……})一个,然后在FireBug下面去查看dom结构,就一清二楚了。
二、处理标签的事件
为什么要研究这个问题?有需求的,如何在鼠标移到标签上时就显示对应的面板呢?默认情况下,TabPanel是不支持这个功能的,但是,这个功能有时是需要的。这儿有点小技巧。
看Ext.TabPanel源代码中关于标签的事件处理:
this.strip.on('mousedown', this.onStripMouseDown, this);
this.strip.on('click', this.onStripClick, this);
this.strip.on('contextmenu', this.onStripContextMenu, this);
if(this.enableTabScroll){
this.strip.on('mousewheel', this.onWheel, this);
}
这段代码写在initEvents函数中,先解释一下,this.strip是指头部放标签的那个ul元素,相信,98%的读者会想,要注册事件也应当是为li元素注册,怎么会统统注册到ul这个父容器上面呢?原理就是事件冒泡。关于事件传递的原理,本人在下一文中有详细的实验、明确的结论,不再赘言。
ul元素捕获了事件,怎样在事件处理函数中得知倒底是哪个li发生了事件呢?Ext写了个函数:findTargets。详情请见如下代码:
findTargets : function(e){
var item = null;
var itemEl = e.getTarget('li', this.strip);
if(itemEl){
item = this.getComponent(itemEl.id.split(this.idDelimiter)[1]);
if(item.disabled){
return {
close : null,
item : null,
el : null
};
}
}
return {
close : e.getTarget('.x-tab-strip-close', this.strip),
item : item,
el : itemEl
};
},
// private
onStripMouseDown : function(e){
e.preventDefault();
if(e.button != 0){
return;
}
var t = this.findTargets(e);
if(t.close){
this.remove(t.item);
return;
}
if(t.item && t.item != this.activeTab){
this.setActiveTab(t.item);
}
},
一切的关键就在于li元素的id的命名规则,从中取出对应的面板的id,这样就能getComponent,从而获得对应的面板引用,再 setActiveTab就办成了。至于getTarget这个是EventObject中封装的函数,作用是在事件传播路径上查找满足指定选择条件的元素。这个函数的详情见它的源码。
发表评论
-
Extjs3.0的变动记录(转载)
2009-09-24 11:23 2962Release 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 1226上几篇中老老实实地把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学习笔记(Function扩展篇)
2009-08-05 21:55 974ExtJs对JavaScript的内建对象进行了扩展,对什么O ... -
extJs 2.1学习笔记(Ext.data.Store篇)
2009-08-05 21:54 1534Ext.data.Store,这个东西是JavaScript ... -
extJs 2.1学习笔记(Ext.data.Connection篇二)
2009-08-05 21:54 1720上一篇主要是扎扎实实地翻译了一下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 1157怪不得我对Ext.Panel穷追猛打,前面已经写过四篇针对它的 ... -
extJs 2.0学习笔记(事件注册总结篇)
2009-08-05 21:48 1158本来,我也没把这档子 ... -
extJs 2.0学习笔记(Ext.Panel篇四)
2009-08-05 21:46 1714我刚才禁不住诱惑去看 ... -
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 1008深入剖析ExtJS 2.2实现及 ... -
Ext架构分析:render方法
2009-07-16 08:51 5084Ext架构分析(3)--Widget之 ... -
Ext 2 概述
2009-07-16 08:48 823原文链接 http://hi.baidu.com/xcl1 ...
相关推荐
目录 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 ...28. extJs 2.0学习笔记(ext.js篇) 77
15. **extJs 2.0 学习笔记(Ext.Panel终结篇)** Panel是构建UI的基本组件,涵盖了布局、标题、工具栏等多种功能。掌握Panel的使用和配置,能创建复杂而灵活的界面。 16. **extJs 2.0 学习笔记(事件注册总结篇)*...
通过本篇学习笔记,我们可以了解到如何使用ExtJs的面板控件,并通过一些简单的例子来展示它们的基本用法。这些基础知识是构建复杂ExtJs应用程序的基石。学习和掌握Ext.Panel、Ext.TabPanel和Ext.Viewport的使用方法...
### ExtJS 学习笔记概览 #### 一、ExtJS 入门 **1.1 ExtJS 构成及如何引用** ExtJS 是一款基于 JavaScript 的开源框架,专为 Web 应用程序的前端界面设计。其核心优势在于提供了一套丰富的 UI 组件和强大的数据...
这个学习笔记涵盖了从基础到高级的多个主题,帮助读者深入理解ExtJs的核心概念和技术。以下是一些关键知识点的详细说明: 1. **ExtJs 结构树**:这部分内容可能涉及ExtJs如何构建可自定义的用户界面组件树,包括...
- **ExtJs2.0学习笔记(Ext.data序论篇)**:这部分内容是对Ext JS 2.0中`Ext.data`模块的概述,讲解了如何管理和操作数据。 - **ExtJs2.0学习笔记(Ext.Panel终结篇)**:深入探讨了`Ext.Panel`组件的各种特性和用法。...
ExtJS4学习笔记(十一)---TabPanel ExtJS4学习笔记(十三)---上传文件(upload) ExtJS4学习笔记(十二)---选项卡(tabs) ExtJS4学习笔记(十五)---Ext.data.Model ExtJS4学习笔记(十六)---Combobox三级联动 ExtJS4学习笔记...
本资源包含ExtJs的API文档、笔记以及示例,帮助开发者深入理解和使用ExtJs。 首先,API文档是ExtJs开发的基础,其中包括ExtJs3.2和3.1-3.3的中文版本。这些CHM文件提供了详细的类、方法和事件的参考,有助于开发者...
首先,`var tabs = new Ext.TabPanel({})`创建了Tab Panel对象,并设置了其渲染目标为HTML页面的Body部分以及固定的高度200px。接下来,通过调用`tabs.add({})`方法三次,分别添加了三个Tab页。每个Tab页都有一个...
本文将基于标题“入门基础学习 ExtJS笔记(一)”和描述,介绍ExtJS的基础知识,特别是如何创建一个基本的界面框架。 首先,要使用ExtJS,我们需要引入必要的CSS样式表和JavaScript库。在HTML文件中,我们看到引用...