- 浏览: 88370 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
hzxlb910:
背景看的头晕
extJs 2.1学习笔记(Ext.data.JsonReader篇一) -
whyang:
先鄙视一下这个论坛,要做测试才能回复。
我是想问下楼主,
第 ...
Struts2的异常处理机制:
怪不得我对Ext.Panel穷追猛打,前面已经写过四篇针对它的文章了。不过。Ext.Panel的问题搞得差不多了。下面我贴出研究代码,及效果图。再解释一下。这下图文结合了。以后自己忘记了,看一下就明白了。
var panel1;
function newPanel1(){
var config1={title:'这是标题栏',
width:300,
height:300,
floating:true,
renderTo:Ext.getBody(),
draggable:{
insertProxy: false,
onDrag : function(e){
var pel = this.proxy.getEl();
this.x = pel.getLeft(true);
this.y = pel.getTop(true);
var s = this.panel.getEl().shadow;
if (s) {
s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
}
},
endDrag : function(e){
this.panel.setPosition(this.x, this.y);
}
},
tools:[{id:close,handler:function(event, toolEl, panel){panel.hide();}}],
layout:'border',
items: [{
title: '左边栏',
region: 'west',
split:true,
height: 100,
width:200,
minSize: 75,
maxSize: 250,
margins: '5 0 5 5'
},{
title: '中间主体部分',
region:'center',
margins:'5 5 5 0',
split:true,
minSize: 100,
}],
tbar:['请输入关键字:',
{xtype:'textfield',width:80},'-',
{text:'有种就点一下',handler:function(){alert("小子,你刚才点了此按钮!");}}],
collapsible:true,
shadow:false};
panel1=new Ext.Panel(config1);
panel1.setPosition(0,0);
var resizer=new Ext.Resizable(panel1.getEl(),{handlers:'all'});
resizer.on('resize',function(){panel1.updateBox(panel1.getSize());});
}
Ext.onReady(newPanel1);
效果图如下:
看了上面的效果心里痒了吧。多漂亮啊。上面代码的要点基本上在前面第四篇中讲过了。也有一些事还没有来得及讲。我分门别类的补充一下。
一、Ext.Panel的组成
Ext.Panel有五个部分,即:header、body、tbar、bbar、footer。在创建了panel的实例后,这五个对象就能被引用了,它们分别指向panel五个最重要的部分,tbar就是上面的工具栏,bbar就是下面的工具栏,footer就是放buttons的地方,它处于最下面。body就是整个panel的主体部分了。事实上,大伙只要用FireBug去看一下panel的dom结构就会发现,body外面还有一个 div。这个div也有一个引用,叫:bwrap。不过,官方API文档中没有提及,想必是不想让大伙去用它,怕以后会有变更。另外,tbar、bbar 也是非文档支持的。官方推荐使用:getTopToolbar()、getBottomToolbar(),用它们来获得上下两个工具栏的引用,不过,这种方法只有在render后才有效,有的兄弟使用了它,结果鸟结果都没有。大惑、不解。如果要在render前操作工具栏,还是要用tbar、bbar 的。
header、body、footer在官方文档中都有说明,是Ext.Element类型。不用说了。
基本上,有了这五个对象我们可以用它们来设置panel的各个部分了。
二、如臂使指的操作Ext.Panel的每一寸土地
有了上面五个对象,能搞定一些事情,但是,要说完全控制Ext.Panel这头驴还有所不及啊。这个问题一般人俺是不给他讲的哦。哈哈哈。
panel最外层的那个div,可以用panel.el或panel.getEl()来获得它的Element引用。很多人不能理解,有了它有个屁用?一个Panel能玩出前面所说的这么多的花样足够了。够用了。然而永远不要小看客户的花花肠子。他们名堂多着呐。有了panel.el,能有什么好处,嘿,晓得Ext.Fx不?Element能用到所有在它里面定义的特效(animations)。而在Panel中,你去看一看官方API文档,没一字提及。也没法控制它搞点特效出来。你哪怕看了Ext.Panel也不会结果的。怎么办,得依靠Element了。我现在庆幸当初把Element的 API研究得很彻底。
特效是一方面,另外,你去看一看Ext.Window的API文档,会发现,它有alignTo、anchorTo的功能了,这可是好东西啊。但是,Ext.Panel没有这个功能。我不用去看Ext.Window的代码就晓得,这肯定是取了panel.el来搞的,Element有 alignTo、anchorTo这两个API。例如:如何使Panel居中:panel.el.center()就行了。超强大啊。
所以啊。有了panel.el这个引用,依托于ExtJs对dom的强大封装结果所得的Element。我们可以做任何事(你能想到的、不能想到的)。
另外,还有一个东西没有被文档公开:component.container。那指向component.el的父元素(div)。也是个Element引用。尽管我们能用这个Element做事,但是,貌似还没有用到它的时候。机会不多。
好了,这儿谈到的都是关于控制Panel自身的架子的,说通俗点,架子是衣柜,但是衣柜里面的衣服怎么取出来呢?panel.el已经能很好地控制整个衣柜,但是,衣服还是一件都取不出来啊。有兄弟发火了,不是骗我吗?这就是所谓的控制每一寸土地吗?鉴于这个内容层次问题,把它放下一小节。
三、取panel这个衣柜里的衣服
这个问题是我老刘的独门武学,我敢保证晓得这事的人不多。晓得这事的人必定是用FireBug研究过panel的dom结构的人或者是研究过 layout的源代码的人。这种人不多啊。大伙都本着能用就行的想法啊。不吹了。还记得Ext.Panel的API文档上面一句话:
If this Panel is intended to be used as the host of a Layout (See layout then the body Element must not be loaded or changed - it is under the control of the Panel's Layout.
这是关于body的说明中的一句话,说得好,精辟,它说,如果你想在panel中用布局类,那么你不得以任意方式来修改body。不要想着用 panel.body.update(xxxx)来干活了。因为文档说了:it is under the control of the Panel's Layout。它正处在panel的layout的控制之下,嘿,这是我的layout的地盘,你就不要来整蛊了。
就是说,要么用body,要么就只能用layout。双方是排斥的,这不难理解。我一个小时前,在FireBug写了条命令语句:
console.dir(panel1);
这个东西诸位不晓得的话,那意味着你要去研究一下FireBug了。它的作用是把panel1的所有成员都输出到控制台窗口中。我看了输出的结果,发现:panel有一个layout的成员,如图:
可能图看不清,诸位点一下看原图吧。我发现了个有趣的结果:
layout有两个成员:center、west。
这儿我用的是border layout。因为这儿我只用到两个区,所以只有center、west。如果五个区都有了,推理得:那就会有五个了:west/east/center/south/north。原来,borderlayout是有五个这样的引用,可供我们来控制这五个区域。
哈哈哈,有了这五个对象,就相当于衣柜中有五个格子,我的手又能伸进更细致的地方了。
依此推理(我还没来得及研究layout的源代码)可知,我们是有能力利用layout的提供的一些接口来控制body内部的细节的。
刚才灵光一闪,API文档中,提到两个类:
Ext.layout.BorderLayout.Region
Ext.layout.BorderLayout.SplitRegion
我在FireBug控制台写下如下实验代码:
panel1.layout.west instanceof Ext.layout.BorderLayout.SplitRegion
结果为:true
嘿,可见,borderLayout是内部是以区域对象来进行控制的。不过,在BorderLayout的官方文档中没有对此提及,Ext.layout.BorderLayout.Region这两个类的文档倒是有的。
总结经验:layout不仅仅只是设计时布局,也许它提供给我们一些有意思的接口啊,只是,这个可能需要自己去研究、琢磨。
四、关于BorderLayout的钉子
再次吹牛,这个问题老实说,在API上面是没有讲到的。就是在定义borderLayout的各个区域时,注意要设几个量:region/split/margins/cmargins。这个用法应当不用讲了,自己瞎琢磨去吧。那个cmargins的用法我还没有摸明白。网上关于这方面的细节资料太少了,一个劲地在那儿打屁。难有实质性内容,真是的。
五、关于Toolbar的事
关于工具栏类我现在还没有来得及研究。不过初步用法还是要说一下:
'xxxxx'相当于{xtype:'tbtext',text:'xxxxx'}
'-'相当于{xtype:'tbseparator'}
也是个简写法。
六、关于resize功能与Ext.Panel的一些冲突
pinned:true不能设、shadow必须为false。不然冲突起来的效果……描述出来。这个是我个人摸索的结果。不想描述。试一试就出来了。
至此,Ext.Panel总算终结了。我等不及了,得研究一下Ext.data中的东西了。关于UI,一个理,把Element、Component、Observable、BoxComponent好好的研究一把,UI就触类旁通了。
var panel1;
function newPanel1(){
var config1={title:'这是标题栏',
width:300,
height:300,
floating:true,
renderTo:Ext.getBody(),
draggable:{
insertProxy: false,
onDrag : function(e){
var pel = this.proxy.getEl();
this.x = pel.getLeft(true);
this.y = pel.getTop(true);
var s = this.panel.getEl().shadow;
if (s) {
s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
}
},
endDrag : function(e){
this.panel.setPosition(this.x, this.y);
}
},
tools:[{id:close,handler:function(event, toolEl, panel){panel.hide();}}],
layout:'border',
items: [{
title: '左边栏',
region: 'west',
split:true,
height: 100,
width:200,
minSize: 75,
maxSize: 250,
margins: '5 0 5 5'
},{
title: '中间主体部分',
region:'center',
margins:'5 5 5 0',
split:true,
minSize: 100,
}],
tbar:['请输入关键字:',
{xtype:'textfield',width:80},'-',
{text:'有种就点一下',handler:function(){alert("小子,你刚才点了此按钮!");}}],
collapsible:true,
shadow:false};
panel1=new Ext.Panel(config1);
panel1.setPosition(0,0);
var resizer=new Ext.Resizable(panel1.getEl(),{handlers:'all'});
resizer.on('resize',function(){panel1.updateBox(panel1.getSize());});
}
Ext.onReady(newPanel1);
效果图如下:
看了上面的效果心里痒了吧。多漂亮啊。上面代码的要点基本上在前面第四篇中讲过了。也有一些事还没有来得及讲。我分门别类的补充一下。
一、Ext.Panel的组成
Ext.Panel有五个部分,即:header、body、tbar、bbar、footer。在创建了panel的实例后,这五个对象就能被引用了,它们分别指向panel五个最重要的部分,tbar就是上面的工具栏,bbar就是下面的工具栏,footer就是放buttons的地方,它处于最下面。body就是整个panel的主体部分了。事实上,大伙只要用FireBug去看一下panel的dom结构就会发现,body外面还有一个 div。这个div也有一个引用,叫:bwrap。不过,官方API文档中没有提及,想必是不想让大伙去用它,怕以后会有变更。另外,tbar、bbar 也是非文档支持的。官方推荐使用:getTopToolbar()、getBottomToolbar(),用它们来获得上下两个工具栏的引用,不过,这种方法只有在render后才有效,有的兄弟使用了它,结果鸟结果都没有。大惑、不解。如果要在render前操作工具栏,还是要用tbar、bbar 的。
header、body、footer在官方文档中都有说明,是Ext.Element类型。不用说了。
基本上,有了这五个对象我们可以用它们来设置panel的各个部分了。
二、如臂使指的操作Ext.Panel的每一寸土地
有了上面五个对象,能搞定一些事情,但是,要说完全控制Ext.Panel这头驴还有所不及啊。这个问题一般人俺是不给他讲的哦。哈哈哈。
panel最外层的那个div,可以用panel.el或panel.getEl()来获得它的Element引用。很多人不能理解,有了它有个屁用?一个Panel能玩出前面所说的这么多的花样足够了。够用了。然而永远不要小看客户的花花肠子。他们名堂多着呐。有了panel.el,能有什么好处,嘿,晓得Ext.Fx不?Element能用到所有在它里面定义的特效(animations)。而在Panel中,你去看一看官方API文档,没一字提及。也没法控制它搞点特效出来。你哪怕看了Ext.Panel也不会结果的。怎么办,得依靠Element了。我现在庆幸当初把Element的 API研究得很彻底。
特效是一方面,另外,你去看一看Ext.Window的API文档,会发现,它有alignTo、anchorTo的功能了,这可是好东西啊。但是,Ext.Panel没有这个功能。我不用去看Ext.Window的代码就晓得,这肯定是取了panel.el来搞的,Element有 alignTo、anchorTo这两个API。例如:如何使Panel居中:panel.el.center()就行了。超强大啊。
所以啊。有了panel.el这个引用,依托于ExtJs对dom的强大封装结果所得的Element。我们可以做任何事(你能想到的、不能想到的)。
另外,还有一个东西没有被文档公开:component.container。那指向component.el的父元素(div)。也是个Element引用。尽管我们能用这个Element做事,但是,貌似还没有用到它的时候。机会不多。
好了,这儿谈到的都是关于控制Panel自身的架子的,说通俗点,架子是衣柜,但是衣柜里面的衣服怎么取出来呢?panel.el已经能很好地控制整个衣柜,但是,衣服还是一件都取不出来啊。有兄弟发火了,不是骗我吗?这就是所谓的控制每一寸土地吗?鉴于这个内容层次问题,把它放下一小节。
三、取panel这个衣柜里的衣服
这个问题是我老刘的独门武学,我敢保证晓得这事的人不多。晓得这事的人必定是用FireBug研究过panel的dom结构的人或者是研究过 layout的源代码的人。这种人不多啊。大伙都本着能用就行的想法啊。不吹了。还记得Ext.Panel的API文档上面一句话:
If this Panel is intended to be used as the host of a Layout (See layout then the body Element must not be loaded or changed - it is under the control of the Panel's Layout.
这是关于body的说明中的一句话,说得好,精辟,它说,如果你想在panel中用布局类,那么你不得以任意方式来修改body。不要想着用 panel.body.update(xxxx)来干活了。因为文档说了:it is under the control of the Panel's Layout。它正处在panel的layout的控制之下,嘿,这是我的layout的地盘,你就不要来整蛊了。
就是说,要么用body,要么就只能用layout。双方是排斥的,这不难理解。我一个小时前,在FireBug写了条命令语句:
console.dir(panel1);
这个东西诸位不晓得的话,那意味着你要去研究一下FireBug了。它的作用是把panel1的所有成员都输出到控制台窗口中。我看了输出的结果,发现:panel有一个layout的成员,如图:
可能图看不清,诸位点一下看原图吧。我发现了个有趣的结果:
layout有两个成员:center、west。
这儿我用的是border layout。因为这儿我只用到两个区,所以只有center、west。如果五个区都有了,推理得:那就会有五个了:west/east/center/south/north。原来,borderlayout是有五个这样的引用,可供我们来控制这五个区域。
哈哈哈,有了这五个对象,就相当于衣柜中有五个格子,我的手又能伸进更细致的地方了。
依此推理(我还没来得及研究layout的源代码)可知,我们是有能力利用layout的提供的一些接口来控制body内部的细节的。
刚才灵光一闪,API文档中,提到两个类:
Ext.layout.BorderLayout.Region
Ext.layout.BorderLayout.SplitRegion
我在FireBug控制台写下如下实验代码:
panel1.layout.west instanceof Ext.layout.BorderLayout.SplitRegion
结果为:true
嘿,可见,borderLayout是内部是以区域对象来进行控制的。不过,在BorderLayout的官方文档中没有对此提及,Ext.layout.BorderLayout.Region这两个类的文档倒是有的。
总结经验:layout不仅仅只是设计时布局,也许它提供给我们一些有意思的接口啊,只是,这个可能需要自己去研究、琢磨。
四、关于BorderLayout的钉子
再次吹牛,这个问题老实说,在API上面是没有讲到的。就是在定义borderLayout的各个区域时,注意要设几个量:region/split/margins/cmargins。这个用法应当不用讲了,自己瞎琢磨去吧。那个cmargins的用法我还没有摸明白。网上关于这方面的细节资料太少了,一个劲地在那儿打屁。难有实质性内容,真是的。
五、关于Toolbar的事
关于工具栏类我现在还没有来得及研究。不过初步用法还是要说一下:
'xxxxx'相当于{xtype:'tbtext',text:'xxxxx'}
'-'相当于{xtype:'tbseparator'}
也是个简写法。
六、关于resize功能与Ext.Panel的一些冲突
pinned:true不能设、shadow必须为false。不然冲突起来的效果……描述出来。这个是我个人摸索的结果。不想描述。试一试就出来了。
至此,Ext.Panel总算终结了。我等不及了,得研究一下Ext.data中的东西了。关于UI,一个理,把Element、Component、Observable、BoxComponent好好的研究一把,UI就触类旁通了。
发表评论
-
Extjs3.0的变动记录(转载)
2009-09-24 11:23 2907Release Date: Jul 6, 2009 Curr ... -
Ext中TreePanel控件和TabPanel控件搭配测试
2009-08-25 13:51 1562在实际的项目中,左边树形菜单,提供各种功能点击,右边一个面板, ... -
extJs 2.1学习笔记(Ext.Updater篇二)
2009-08-05 22:02 1540全 称:Ext.Updater 命名 ... -
extJs 2.1学习笔记(Ext.Updater篇一)
2009-08-05 22:00 1167上几篇中老老实实地把E ... -
extJs 2.1 学习笔记(Ext.data.HttpProxy篇)
2009-08-05 21:59 2415关于Ext.data中各个类的 ... -
extJs 2.1学习笔记(Ext.data.JsonReader篇一)
2009-08-05 21:58 2073有个事要说一下:DataProxy的子类呢,都有一个load来 ... -
extJs 2.1学习笔记(Ext.data.JsonReader篇二)
2009-08-05 21:57 1240有了上一篇中所讲内容,一般情况下就可以应付了,不过,Jso ... -
extJs 2.1学习笔记(Ext.TabPanel篇)
2009-08-05 21:56 1394Ext.TabPanel这个东西是最常用的组件之一,它继承 ... -
extJs 2.1学习笔记(Function扩展篇)
2009-08-05 21:55 927ExtJs对JavaScript的内建对象进行了扩展,对什么O ... -
extJs 2.1学习笔记(Ext.data.Store篇)
2009-08-05 21:54 1476Ext.data.Store,这个东西是JavaScript ... -
extJs 2.1学习笔记(Ext.data.Connection篇二)
2009-08-05 21:54 1693上一篇主要是扎扎实实地翻译了一下Ext.data.Connec ... -
extJs 2.1学习笔记(Ext.data.Connection篇一)
2009-08-05 21:52 1347ExtJs之所以能异步请求数据,全依赖于Ext.data. ... -
extJs 2.0学习笔记(事件注册总结篇)
2009-08-05 21:48 1116本来,我也没把这档子 ... -
extJs 2.0学习笔记(Ext.Panel篇四)
2009-08-05 21:46 1666我刚才禁不住诱惑去看 ... -
extJs 2.0学习笔记(Ext.Panel篇三)
2009-08-05 21:45 1883上一篇中把panel的config部分的文档翻译了一下,事实 ... -
extJs 2.0学习笔记(Ext.Panel篇二)
2009-08-05 21:44 1349activeItem : String/Number 用 ... -
extJs 2.0学习笔记(Ext.Panel篇一)
2009-08-05 21:42 1194原文链接: http://hi.baidu ... -
EXT 中 类的继承
2009-07-31 09:36 974深入剖析ExtJS 2.2实现及 ... -
Ext架构分析:render方法
2009-07-16 08:51 5045Ext架构分析(3)--Widget之 ... -
Ext 2 概述
2009-07-16 08:48 786原文链接 http://hi.baidu.com/xcl1 ...
相关推荐
18. extJs 2.0学习笔记(Ext.Panel终结篇) 40 19. extJs 2.0学习笔记(事件注册总结篇) 45 20. extJs 2.0学习笔记(Ext.Panel篇一) 48 21. extJs 2.0学习笔记(Ext.Panel篇二) 50 22. extJs 2.0学习笔记(Ext.Panel篇三) ...
18. extJs 2.0学习笔记(Ext.Panel终结篇) 40 19. extJs 2.0学习笔记(事件注册总结篇) 45 20. extJs 2.0学习笔记(Ext.Panel篇一) 48 21. extJs 2.0学习笔记(Ext.Panel篇二) 50 22. extJs 2.0学习笔记(Ext.Panel篇三) ...
ExtJs2.0学习系列大全 共15个word文档,大部分介绍都在里面了
ExtJS2.0实用简明教程.rar
关于ext学习的资料,有些例子 ExtJs2.0学习系列.CHM
2. ExtJs2.0学习系列(2)--Ext.Panel 3. ExtJs2.0学习系列(3)--Ext.Window 4. ExtJs2.0学习系列(4)--Ext.FormPanel之第一式 5. ExtJs2.0学习系列(5)--Ext.FormPanel之第二式 6. ExtJs2.0学习系列(6)--Ext.FormPanel之...
如何给Ext.panel增加一个背景图片
extjs2.0.rar extjs2.0.rar extjs2.0.rar extjs2.0.rar
NULL 博文链接:https://maoyi606.iteye.com/blog/1782825
序 言 ExtJS是一个很不错的Ajax框架, 可以用来开发带有华丽外观的富客户端应用, 使得我 们的b/s应用更加具有...ExtJS的一些心得及小结, 希望能帮助正在学习或准备学习ExtJS的朋友们快速走进ExtJS2.0 的精彩世界。
extjs多选下拉框,Ext.ux.form.LovCombo,extjs 以修复多选下拉框火狐下取不到值的问题,火狐下div不显示背景色的问题
ExtJs2.0学习系列ExtJs2.0学习系列
ExtJS4+Accordion+SERVLET/STRUTS2+JSON+Ext.tree.Panel实例
ExtJS_V2.0教程.pdf ExtJS_V2.0教程.pdf
Extjs4.0学习笔记大全.pdf,供大家学习
extJs2.0+spket-1.6.11.zip extJs2.0+spket-1.6.11.zip
EXT2.0入门教程和API详细规范,适用于初级学习者和开发工作者
ExtJS是一个Ajax框架,是一个用javascript写的,用于在客户端创建丰富多彩的web应用程序界面。ExtJS可以用来开发RIA也即富客户端的AJAX应用,下 ExtJS是一个用javascript写的,主要用于创建前端用户界面,是一个与...