- 浏览: 88546 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
hzxlb910:
背景看的头晕
extJs 2.1学习笔记(Ext.data.JsonReader篇一) -
whyang:
先鄙视一下这个论坛,要做测试才能回复。
我是想问下楼主,
第 ...
Struts2的异常处理机制:
我刚才禁不住诱惑去看了一下Ext.Window的API文档,发现只是比Panel多了点什么最大化、最小化、关闭、置前、置后、动画引发目标设置、可调整大小这些功能。像什么标题栏、工具栏之类的东西在Ext.Panel早就封装好了。搞定了Ext.Panel终于可以闷声发大财罗。哈哈哈。
这一文主要总结一下,panel的常见用法。
一、使Panel的标题栏隐藏
这是常有的事,常常,一个栏目并不需要标题。有什么办法呢,创建时config中加上:header:false。就ok了。
二、如何使Panel能被拖动
确保config中如下设置:
var config1={title:'这是标题栏',
width:300,
height:300,
header:false,
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);
}
},
html:'这是面板的内容!!!',
layout:'fit',
collapsible:true};
好了,关键就是上面红色部分了,由前面的文档可知:Ext.Panel.DD这个类只是提供移动Proxy元素的效果,鼠标一松,panel仍在老地方,所以得写代码实现。关于Ext.Panel.DD,这个类是非公开的,我在源代码中也没有找到。不晓得放在哪。最后,我只得打开 FireFox+FireBug才看到它里面的东西。
为什么一定要floating:true呢?原因很简单,要能拖动,那么这个div就是absolute的,而一个panel.el默认不会是absolute。所以非得设成floating,以让它能浮动。
三、如何有Panel能折叠、展开效果。
这个很简单,panel在title tools中提供一个toggle的工具,就是用它干这事的,不过,默认情况下,panel的这个功能是被关闭的。panel还提供一个功能,单击 title的任意一处都会产生toggle collapse效果。相关的config属性我提出来如下:
animCollapse : Boolean
collapseFirst : Boolean
collapsed : Boolean
collapsedCls : String
collapsible : Boolean //事实上,把它设成true就ok了,其它几个可以不设置。
titleCollapse : Boolean
关于它们的使用说明请参见前面的API文档。不过,单看名字应当就晓得用了,取名很直观。
四、怎样为panel设置title tools。
就是怎样为Panel的标题栏添加按钮,这个容器,在config中类似如下代码即可:
tools:[{id:close,handler:function(event, toolEl, panel){panel.hide();}}],
格式一般是:tools:[{……},{……},{……}]
五、怎样显示、隐藏panel
这个很容易,panel.show()/hide()就行了。但是,如果floating:true的话,那就麻烦了,show都显示不了,我在FireBug中一看,panel.el.dom.style.left="-10000px"。这当然是显示不出来的。所以,你show了还要 setPosition一下。这才行了。
六、为panel添加子组件
简单,在config中加items属性,类似于如下代码:
items:[{id:'win1',xtype:'window',title:'title',height:100,width:100}],
格式一般是:items:[{……},{……},{……}]
如果在定义时,没有设置xtype,则子组件创建是xtype取defaultType的值。像上面,由于window创建后是不显示的,所以,只得show出来。所以,我在定义时给它一个id。这样在Ext.onReady()中就可以:Ext.getCmp("win1").show()。嘿,就出来了。其他组件的加入类似。一个{}是一个组件。
像上面那样的叫惰性呈现,还有一种写法是:items:[new XXX(config)]。这样的定义会在组件创建时直接呈现。
七、为panel设置布局
这个是关键了。就是要设layout、layoutConfig。这个要详细的讲一下。平常要用嘛。这儿用BorderLayout的文档上的代码为例:
layout:'border',
items: [{
title: 'South Panel',
region: 'south',
height: 100,
minSize: 75,
maxSize: 250,
margins: '0 5 5 5'
},{
title: 'West Panel',
region:'west',
margins: '5 0 0 5',
cmargins: '5 5 0 5',
width: 200,
minSize: 100,
maxSize: 300
},{
title: 'Main Content',
region:'center',
margins: '5 5 0 0'
}],
其实,布局类的api接口很简单,使用也不复杂。果然是把swing的那一套学过来了。
Ext.layout.BorderLayout是一个比较特殊的布局类,它没有什么正儿八经的config,不像Panel它们。只需设一下 layout,然后,在成员组件那儿用region标明是哪个区域就是了。Ext.layout.BorderLayout把一块地盘分成五个区:east、west、south、north、center。
我个人非常喜欢这个布局,因为以它作为外层布局的话,就能很方便的实现cnblogs一样的效果,我到现在还不知道那个左边列固定宽,右边列占满剩余屏幕的布局是怎么搞的,除非写javascript代码在window.onload中手工调,否则,全靠css,真的是想不出办法来,后来,我也找到一个办法:用table。table有一个特性,可以把它设成占满整个水平方向,第一列固定宽,第二列自动就是剩余的。不过,不晓得有没有纯css的解决方式,老实说,div+css实在太难控制了,table在水平方向上的布局优势还是很大的。比如,同一行,放两个内容,左边的左对齐,右边的右对齐,用div就麻烦了,又是浮动,挖空心思,用table就很显然,两个格:一个align=left,一个align=right。这话题扯远了。发牢骚罢了。
八、怎样使得Panel能被改变大小
事实上,如果真的panel能被改变大小,那么可以考虑使用window。只要把dragable设成false就成了。如果不喜欢那些按钮,应当也可以想到办法去掉的。panel本身没有这个功能。不过,ExtJs有一个类提供这种功能,即:Ext.Resizable。它的用法很简单,如下:
var resizer = new Ext.Resizable("element-id", {
handles: 'all',
minWidth: 200,
minHeight: 100,
maxWidth: 500,
maxHeight: 400,
pinned: true
});
由上可知,它的功能是为一个指定的元素提供可改变大小的功能。这个功能不出奇吧。怎么把它用于panel。嘿,其实就一个关键,怎样取得x- panel所在元素的id。这个好办,事实上,这件事我曾在Ext.Panel篇一中就论述了。二种方法:panel.el或者 panel.getEl()都一样。
因此,代码应当这么写:
var resizer=new Ext.Resizable(panel1.getEl(),{handlers:'all',pinned:true});
resizer.on('resize',function(){panel1.updateBox(panel1.getSize());});
在创建好panel之后,紧跟着加上这两行代码就行了。为什么要加上后面的那行呢?因为这个Ext.Resizable只会改变 panel.getEl()的大小,但是里面的内容并不会因此而发生变化,结果是新增加的那一部分是灰色的。那是proxy的颜色吧。要把panel的子组件调整到实质大小必须要updateBox,可者是setWidth、setHeight。
这个功能蛮简单,如果要对Ext.Resizable的详情进行了解,请参见其官方文档。
九、怎样为Panel提供工具栏
这个问题重要,panel提供两种工具栏:tbar、bbar。但是定义的方法都一样。首先,我要研究一下tbar的类型:Object/Array,api文档说:可以是toolbar对象、可以是toolbar的config、还可以是按钮的数组,当然也可以是前两者的数组。目标清楚了,就要小小地研究一下toolbar,toolbar这个主题比较大,事实上应当作为一个专题来搞的。不过,先搞清楚个大概用着先吧。
这儿有一篇关于Ext.Toolbar的好文章,点此处查看!关于在Ext.Panel中使用工具栏,最直观、傻瓜式的用法,点此处查看。关于toolbar的更详细的研究、使用方法将在下一篇中给出。
至此,关于Ext.Panel的常见问题都在这儿了,搞清楚了这些,基本上常规需求都可以实现了。
这一文主要总结一下,panel的常见用法。
一、使Panel的标题栏隐藏
这是常有的事,常常,一个栏目并不需要标题。有什么办法呢,创建时config中加上:header:false。就ok了。
二、如何使Panel能被拖动
确保config中如下设置:
var config1={title:'这是标题栏',
width:300,
height:300,
header:false,
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);
}
},
html:'这是面板的内容!!!',
layout:'fit',
collapsible:true};
好了,关键就是上面红色部分了,由前面的文档可知:Ext.Panel.DD这个类只是提供移动Proxy元素的效果,鼠标一松,panel仍在老地方,所以得写代码实现。关于Ext.Panel.DD,这个类是非公开的,我在源代码中也没有找到。不晓得放在哪。最后,我只得打开 FireFox+FireBug才看到它里面的东西。
为什么一定要floating:true呢?原因很简单,要能拖动,那么这个div就是absolute的,而一个panel.el默认不会是absolute。所以非得设成floating,以让它能浮动。
三、如何有Panel能折叠、展开效果。
这个很简单,panel在title tools中提供一个toggle的工具,就是用它干这事的,不过,默认情况下,panel的这个功能是被关闭的。panel还提供一个功能,单击 title的任意一处都会产生toggle collapse效果。相关的config属性我提出来如下:
animCollapse : Boolean
collapseFirst : Boolean
collapsed : Boolean
collapsedCls : String
collapsible : Boolean //事实上,把它设成true就ok了,其它几个可以不设置。
titleCollapse : Boolean
关于它们的使用说明请参见前面的API文档。不过,单看名字应当就晓得用了,取名很直观。
四、怎样为panel设置title tools。
就是怎样为Panel的标题栏添加按钮,这个容器,在config中类似如下代码即可:
tools:[{id:close,handler:function(event, toolEl, panel){panel.hide();}}],
格式一般是:tools:[{……},{……},{……}]
五、怎样显示、隐藏panel
这个很容易,panel.show()/hide()就行了。但是,如果floating:true的话,那就麻烦了,show都显示不了,我在FireBug中一看,panel.el.dom.style.left="-10000px"。这当然是显示不出来的。所以,你show了还要 setPosition一下。这才行了。
六、为panel添加子组件
简单,在config中加items属性,类似于如下代码:
items:[{id:'win1',xtype:'window',title:'title',height:100,width:100}],
格式一般是:items:[{……},{……},{……}]
如果在定义时,没有设置xtype,则子组件创建是xtype取defaultType的值。像上面,由于window创建后是不显示的,所以,只得show出来。所以,我在定义时给它一个id。这样在Ext.onReady()中就可以:Ext.getCmp("win1").show()。嘿,就出来了。其他组件的加入类似。一个{}是一个组件。
像上面那样的叫惰性呈现,还有一种写法是:items:[new XXX(config)]。这样的定义会在组件创建时直接呈现。
七、为panel设置布局
这个是关键了。就是要设layout、layoutConfig。这个要详细的讲一下。平常要用嘛。这儿用BorderLayout的文档上的代码为例:
layout:'border',
items: [{
title: 'South Panel',
region: 'south',
height: 100,
minSize: 75,
maxSize: 250,
margins: '0 5 5 5'
},{
title: 'West Panel',
region:'west',
margins: '5 0 0 5',
cmargins: '5 5 0 5',
width: 200,
minSize: 100,
maxSize: 300
},{
title: 'Main Content',
region:'center',
margins: '5 5 0 0'
}],
其实,布局类的api接口很简单,使用也不复杂。果然是把swing的那一套学过来了。
Ext.layout.BorderLayout是一个比较特殊的布局类,它没有什么正儿八经的config,不像Panel它们。只需设一下 layout,然后,在成员组件那儿用region标明是哪个区域就是了。Ext.layout.BorderLayout把一块地盘分成五个区:east、west、south、north、center。
我个人非常喜欢这个布局,因为以它作为外层布局的话,就能很方便的实现cnblogs一样的效果,我到现在还不知道那个左边列固定宽,右边列占满剩余屏幕的布局是怎么搞的,除非写javascript代码在window.onload中手工调,否则,全靠css,真的是想不出办法来,后来,我也找到一个办法:用table。table有一个特性,可以把它设成占满整个水平方向,第一列固定宽,第二列自动就是剩余的。不过,不晓得有没有纯css的解决方式,老实说,div+css实在太难控制了,table在水平方向上的布局优势还是很大的。比如,同一行,放两个内容,左边的左对齐,右边的右对齐,用div就麻烦了,又是浮动,挖空心思,用table就很显然,两个格:一个align=left,一个align=right。这话题扯远了。发牢骚罢了。
八、怎样使得Panel能被改变大小
事实上,如果真的panel能被改变大小,那么可以考虑使用window。只要把dragable设成false就成了。如果不喜欢那些按钮,应当也可以想到办法去掉的。panel本身没有这个功能。不过,ExtJs有一个类提供这种功能,即:Ext.Resizable。它的用法很简单,如下:
var resizer = new Ext.Resizable("element-id", {
handles: 'all',
minWidth: 200,
minHeight: 100,
maxWidth: 500,
maxHeight: 400,
pinned: true
});
由上可知,它的功能是为一个指定的元素提供可改变大小的功能。这个功能不出奇吧。怎么把它用于panel。嘿,其实就一个关键,怎样取得x- panel所在元素的id。这个好办,事实上,这件事我曾在Ext.Panel篇一中就论述了。二种方法:panel.el或者 panel.getEl()都一样。
因此,代码应当这么写:
var resizer=new Ext.Resizable(panel1.getEl(),{handlers:'all',pinned:true});
resizer.on('resize',function(){panel1.updateBox(panel1.getSize());});
在创建好panel之后,紧跟着加上这两行代码就行了。为什么要加上后面的那行呢?因为这个Ext.Resizable只会改变 panel.getEl()的大小,但是里面的内容并不会因此而发生变化,结果是新增加的那一部分是灰色的。那是proxy的颜色吧。要把panel的子组件调整到实质大小必须要updateBox,可者是setWidth、setHeight。
这个功能蛮简单,如果要对Ext.Resizable的详情进行了解,请参见其官方文档。
九、怎样为Panel提供工具栏
这个问题重要,panel提供两种工具栏:tbar、bbar。但是定义的方法都一样。首先,我要研究一下tbar的类型:Object/Array,api文档说:可以是toolbar对象、可以是toolbar的config、还可以是按钮的数组,当然也可以是前两者的数组。目标清楚了,就要小小地研究一下toolbar,toolbar这个主题比较大,事实上应当作为一个专题来搞的。不过,先搞清楚个大概用着先吧。
这儿有一篇关于Ext.Toolbar的好文章,点此处查看!关于在Ext.Panel中使用工具栏,最直观、傻瓜式的用法,点此处查看。关于toolbar的更详细的研究、使用方法将在下一篇中给出。
至此,关于Ext.Panel的常见问题都在这儿了,搞清楚了这些,基本上常规需求都可以实现了。
发表评论
-
Extjs3.0的变动记录(转载)
2009-09-24 11:23 2912Release Date: Jul 6, 2009 Curr ... -
Ext中TreePanel控件和TabPanel控件搭配测试
2009-08-25 13:51 1563在实际的项目中,左边树形菜单,提供各种功能点击,右边一个面板, ... -
extJs 2.1学习笔记(Ext.Updater篇二)
2009-08-05 22:02 1545全 称:Ext.Updater 命名 ... -
extJs 2.1学习笔记(Ext.Updater篇一)
2009-08-05 22:00 1169上几篇中老老实实地把E ... -
extJs 2.1 学习笔记(Ext.data.HttpProxy篇)
2009-08-05 21:59 2418关于Ext.data中各个类的 ... -
extJs 2.1学习笔记(Ext.data.JsonReader篇一)
2009-08-05 21:58 2078有个事要说一下:DataProxy的子类呢,都有一个load来 ... -
extJs 2.1学习笔记(Ext.data.JsonReader篇二)
2009-08-05 21:57 1243有了上一篇中所讲内容,一般情况下就可以应付了,不过,Jso ... -
extJs 2.1学习笔记(Ext.TabPanel篇)
2009-08-05 21:56 1395Ext.TabPanel这个东西是最常用的组件之一,它继承 ... -
extJs 2.1学习笔记(Function扩展篇)
2009-08-05 21:55 928ExtJs对JavaScript的内建对象进行了扩展,对什么O ... -
extJs 2.1学习笔记(Ext.data.Store篇)
2009-08-05 21:54 1479Ext.data.Store,这个东西是JavaScript ... -
extJs 2.1学习笔记(Ext.data.Connection篇二)
2009-08-05 21:54 1695上一篇主要是扎扎实实地翻译了一下Ext.data.Connec ... -
extJs 2.1学习笔记(Ext.data.Connection篇一)
2009-08-05 21:52 1349ExtJs之所以能异步请求数据,全依赖于Ext.data. ... -
extJs 2.0学习笔记(Ext.Panel终结篇)
2009-08-05 21:49 1113怪不得我对Ext.Panel穷追猛打,前面已经写过四篇针对它的 ... -
extJs 2.0学习笔记(事件注册总结篇)
2009-08-05 21:48 1117本来,我也没把这档子 ... -
extJs 2.0学习笔记(Ext.Panel篇三)
2009-08-05 21:45 1885上一篇中把panel的config部分的文档翻译了一下,事实 ... -
extJs 2.0学习笔记(Ext.Panel篇二)
2009-08-05 21:44 1354activeItem : String/Number 用 ... -
extJs 2.0学习笔记(Ext.Panel篇一)
2009-08-05 21:42 1196原文链接: http://hi.baidu ... -
EXT 中 类的继承
2009-07-31 09:36 977深入剖析ExtJS 2.2实现及 ... -
Ext架构分析:render方法
2009-07-16 08:51 5049Ext架构分析(3)--Widget之 ... -
Ext 2 概述
2009-07-16 08:48 787原文链接 http://hi.baidu.com/xcl1 ...
相关推荐
23. extJs 2.0学习笔记(Ext.Panel篇四) 62 24. extJs 2.0学习笔记(组件总论篇) 66 25. extJs 2.0学习笔记(Ext.Element API总结) 69 26. extJs 2.0学习笔记(Element.js篇) 73 27. extJs 2.0学习笔记(DomHelper.js篇) ...
23. extJs 2.0学习笔记(Ext.Panel篇四) 62 24. extJs 2.0学习笔记(组件总论篇) 66 25. extJs 2.0学习笔记(Ext.Element API总结) 69 26. extJs 2.0学习笔记(Element.js篇) 73 27. extJs 2.0学习笔记(DomHelper.js篇) ...
ExtJs2.0学习系列大全 共15个word文档,大部分介绍都在里面了
ExtJS2.0实用简明教程.rar
关于ext学习的资料,有些例子 ExtJs2.0学习系列.CHM
7. ExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇) 8. ExtJs2.0学习系列(8)--Ext.FormPanel之第五式(综合篇) 9. ExtJs2.0学习系列(9)--Ext.TabPanel之第一式 10. ExtJs2.0学习系列(10)--Ext.TabPanel...
如何给Ext.panel增加一个背景图片
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学习系列
extjs2.0.rar extjs2.0.rar extjs2.0.rar extjs2.0.rar
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写的,主要用于创建前端用户界面,是一个与...