- 浏览: 90805 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
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 2962Release Date: Jul 6, 2009 Curr ... -
Ext中TreePanel控件和TabPanel控件搭配测试
2009-08-25 13:51 1608在实际的项目中,左边树形菜单,提供各种功能点击,右边一个面板, ... -
extJs 2.1学习笔记(Ext.Updater篇二)
2009-08-05 22:02 1593全 称: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 1291有了上一篇中所讲内容,一般情况下就可以应付了,不过,Jso ... -
extJs 2.1学习笔记(Ext.TabPanel篇)
2009-08-05 21:56 1434Ext.TabPanel这个东西是最常用的组件之一,它继承 ... -
extJs 2.1学习笔记(Function扩展篇)
2009-08-05 21:55 972ExtJs对JavaScript的内建对象进行了扩展,对什么O ... -
extJs 2.1学习笔记(Ext.data.Store篇)
2009-08-05 21:54 1532Ext.data.Store,这个东西是JavaScript ... -
extJs 2.1学习笔记(Ext.data.Connection篇二)
2009-08-05 21:54 1719上一篇主要是扎扎实实地翻译了一下Ext.data.Connec ... -
extJs 2.1学习笔记(Ext.data.Connection篇一)
2009-08-05 21:52 1390ExtJs之所以能异步请求数据,全依赖于Ext.data. ... -
extJs 2.0学习笔记(Ext.Panel终结篇)
2009-08-05 21:49 1157怪不得我对Ext.Panel穷追猛打,前面已经写过四篇针对它的 ... -
extJs 2.0学习笔记(事件注册总结篇)
2009-08-05 21:48 1157本来,我也没把这档子 ... -
extJs 2.0学习笔记(Ext.Panel篇三)
2009-08-05 21:45 1922上一篇中把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 1224原文链接: http://hi.baidu ... -
EXT 中 类的继承
2009-07-31 09:36 1007深入剖析ExtJS 2.2实现及 ... -
Ext架构分析:render方法
2009-07-16 08:51 5083Ext架构分析(3)--Widget之 ... -
Ext 2 概述
2009-07-16 08:48 822原文链接 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篇) ...
15. **extJs 2.0 学习笔记(Ext.Panel终结篇)** Panel是构建UI的基本组件,涵盖了布局、标题、工具栏等多种功能。掌握Panel的使用和配置,能创建复杂而灵活的界面。 16. **extJs 2.0 学习笔记(事件注册总结篇)*...
- **ExtJs2.0学习笔记(Ext.Panel篇一/二/三/四)**:这一系列内容分别讲述了`Ext.Panel`的不同方面,如布局管理、事件处理等。 - **ExtJs2.0学习笔记(组件总论篇)**:这是一个综合性的章节,概括了Ext JS 2.0中各种...
通过本篇学习笔记,我们可以了解到如何使用ExtJs的面板控件,并通过一些简单的例子来展示它们的基本用法。这些基础知识是构建复杂ExtJs应用程序的基石。学习和掌握Ext.Panel、Ext.TabPanel和Ext.Viewport的使用方法...
### ExtJS面板学习笔记 #### 一、基础:弹出框 在ExtJS中,`Ext.MessageBox`提供了创建各种模态对话框的功能,包括提示、确认、输入等。以下是几个基本示例: 1. **简单警告对话框**: ```javascript Ext....
### ExtJS 学习笔记概览 #### 一、ExtJS 入门 **1.1 ExtJS 构成及如何引用** ExtJS 是一款基于 JavaScript 的开源框架,专为 Web 应用程序的前端界面设计。其核心优势在于提供了一套丰富的 UI 组件和强大的数据...
EXT 4.0 是一款流行的JavaScript库,专门用于构建富...EXT 4.0提供了丰富的API文档,允许开发者深入学习并自定义更多功能,如分页、筛选、编辑等。对于初学者来说,了解和实践这些基本概念是掌握EXT 4.0的第一步。
11. **数据源(Ext.grid.Panel)**:`store`是EXTJS中数据的容器,`columnLines`控制是否显示列分割线,`columns`定义了列的结构。`viewConfig`允许自定义网格视图的属性,如`stripeRows`用于开启斑马线效果,`...
在Extjs中,给Panel设置布局的方法是设置Panel的Layout配置项,Extjs3.1.0版本提供了17种布局方式,这里会挑选一些常用的进行介绍: 1. AbsoluteLayout(绝对布局) 绝对布局是最直接的布局方式,每个组件的位置...
根据给定的文件信息,我们可以深入探讨两个关键的Extjs组件——Tab Panel(标签页控件)和Grid(表格控件)。这两个控件是Extjs框架中非常实用且功能丰富的部分,广泛应用于Web应用程序的界面设计与交互逻辑构建。 ...
1. **EXTJS Form Panel**: 批量上传通常会用到EXTJS的Form Panel组件,它允许我们创建表单并处理表单数据。在批量上传中,表单通常包含一个或多个文件输入字段,用于选择待上传的文件。 2. **File Input Field**: ...