Ext学习笔记4-Panel
2012-07-07 15:49
323 查看
13-Ext_Panel
Ext.Panel的主要配置项
tools配置项明细表
id图对应表
* 属性:12
- frame : 就是把四个角变成圆角, 默认为直角, 值为true就可以设成圆角,
并且拥有背景颜色且将button也包含在其中
- renderTo : 将该元素放到某个元素中 其对应的方法是 render
- applyTo: 将该元素在某个元素的基础上创建 其对应的方法是 applyToMarkup
- plain : Boolean : True 表示为渲染window body的背景为透明的背景,这样看来window body 与边框元素(framing elements)融为一体,false表示为加入浅色的背景, 使得在视觉上body元素与外围边框清晰地分辨出来(默认为 false).
* 方法:
- addButton(String/Object_config,
Function_handler, Object_scope ): 添加一个按钮对象到面板中,它为设计时方法(即一旦该组件被添加到网页之后就不能再用该方法了
)
- add(Ext.Component/Object_component) : 添加一个组建到面板中
- applyToMarkup(在什么节点上,添加什么节点,
是Ext元素,还是普通的HTML元素): 将该元素在某个元素的基础上创建 ,见示例3
- render : 将该元素放到某个元素中
* 事件:
- render : 当前对象被正确构造后触发
* 由Ext_form_TextField组建产生的引申话题(1)
- Ext.layout.FormLayout : 只有在次布局下才能正确现实文本框的标签名,
布局的宿主对象必须是Ext.Container或者Ext.Container的子类
- 在应用FormLayout布局时只要在宿主对象的构造参数中指定layout:'form' 即可
- Ext.getCmp(string _id) : 得到id为_id的组建(EXT组建)对象
* 由Ext_form_TextField组建产生的引申话题(2)
- xtype : 在ExtJS的可视化组建部署中有一种xtype机制, 即:通过指定xtype的值, 来告诉容器组建如何初始化包含组建,
如:xtype : 'textfield', 表示使用Ext.form.TextField来进行初始化(示例3)
- 其他xtype值如下:
xtype 类Class
------------- ------------------
box Ext.BoxComponent
button Ext.Button
colorpalette Ext.ColorPalette
component Ext.Component
container Ext.Container
cycle Ext.CycleButton
dataview Ext.DataView
datepicker Ext.DatePicker
editor Ext.Editor
editorgrid Ext.grid.EditorGridPanel
grid Ext.grid.GridPanel
paging Ext.PagingToolbar
panel Ext.Panel
progress Ext.ProgressBar
splitbutton Ext.SplitButton
tabpanel Ext.TabPanel
treepanel Ext.tree.TreePanel
viewport Ext.ViewPort
window Ext.Window
Toolbar components 工具条组件
---------------------------------------
toolbar Ext.Toolbar
tbbutton Ext.Toolbar.Button
tbfill Ext.Toolbar.Fill
tbitem Ext.Toolbar.Item
tbseparator Ext.Toolbar.Separator
tbspacer Ext.Toolbar.Spacer
tbsplit Ext.Toolbar.SplitButton
tbtext Ext.Toolbar.TextItem
Form components 表单组件
---------------------------------------
form Ext.FormPanel
checkbox Ext.form.Checkbox
combo Ext.form.ComboBox
datefield Ext.form.DateField
field Ext.form.Field
fieldset Ext.form.FieldSet
hidden Ext.form.Hidden
htmleditor Ext.form.HtmlEditor
numberfield Ext.form.NumberField
radio Ext.form.Radio
textarea Ext.form.TextArea
textfield Ext.form.TextField
timefield Ext.form.TimeField
trigger Ext.form.TriggerField
示例代码1:
Ext.onReady(function(){
var _panel = new Ext.Panel({
renderTo:Ext.getBody(),
layout:'form',
labelWidth:30,
listeners:{
'render' : function(_panel){ //这里之所以在这里用这个render事件而不像下面注释掉的代码那样添加组建
_panel.add(new Ext.form.TextField({ //,是因为那样的话很可能该组建还没有实例化完全,久像其中添加组建,很可能会出错!
fieldLabel:'姓名',
id:'txt_name'
}))
}
}
});
//_panel.add(new Ext.form.TextField({
// fieldLabel:'姓名11',
// id:'txt_name1'
// }));
new Ext.Button({
text:"按钮",
renderTo:Ext.getBody(),
handler:function(){
alert(Ext.getCmp('txt_name').getValue());
}
});
})
示例代码2:
/// <reference path="../ext/vswd-ext_2.0.2.js" />< /FONT>
Ext.onReady(function(){
var _panel = new Ext.Panel({
// renderTo:Ext.getBody(),
title : '人员信息',
frame : true, //设成圆角,并且拥有背景颜色且将button也包含在其中
width : 300,
height : 200
});
_panel.addButton({text:'确定'}); //这个按钮是由form创建的
_panel.addButton(new Ext.Button({ //这个按钮是我们创建好了再加进去的,区别在于自己创建
//的最小宽度由内部字体的宽度而定,而由form创建的有默认最小宽度
text : '取消',
}));
_panel.render(Ext.getBody()); //可以看到上面属性中的注释,如果和这条语句换一下,就可以看到按钮并没有加上,原因就是addButton方法是设计时方法
});
示例代码3:
<!--cssStyle-->
<style type="text/css">
.contain
{
width:100%;
height:100%;
top:0;
left:0;
}
.center
{
position:absolute;
top:30%;
left:43%;
text-align:left;
}
</style>
//js代码
Ext.onReady(function(){
var _panel = new Ext.Panel({
// renderTo:Ext.getBody(),
title : '人员信息',
frame : true, //设成圆角,并且拥有背景颜色且将button也包含在其中
width : 300,
height : 200,
layout : 'form' //记得添加表单,一定要有form布局
});
_panel.add({
xtype:'textfield', //xtype用法
fieldLabel:'用户名'
})
_panel.addButton({text:'确定'}); //这个按钮是由form创建的
_panel.addButton(new Ext.Button({ //这个按钮是我们创建好了再加进去的,区别在于自己创建的最小宽度由内部字体的宽度而定,而由form创建的有默认最小宽度
text : '取消'
}));
_panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(),
//applyToMarkup(在什么节点上,添加什么节点,是Ext元素,还是普通的HTML元素)
{
tag : 'div',
cls : 'contain',
cn : [{ //cn是子结点
tag : 'div',
cls : 'center'
}]
},
true).child('div')); //child 指的是 元素的子节点
});
综合实例:
Ext.onReady(function(){
//var lp = new LP();
//lp.render(Ext.getBody());
var _loginBox = new Ext.Panel({
title : '登陆',
width : 270,
autoHeight:true, //这里是关键 不加它将不能正常现实文本框
layout : 'form',
frame : true,
labelWidth : 65,
labelAlign : 'right',
buttonAlign :'center',
defaults : {xtype:'textfield',width:150},
items:[{
id : 'username',
fieldLabel : '用户名'
},{
id : 'password',
fieldLabel : '密 码'
}],
buttons:[{
text : '登陆',
handler:function(){
alert(String.format('用户名是:{0}\n密码是:{1}',Ext.getCmp('username').getValue(),Ext.getCmp('password').getValue()));
}
},{
text:'注册',
handler : function(){
alert('注册');
}
},{
text : '退出',
handler:function(){
_loginBox.hide();
}
}]
});
_loginBox.applyToMarkup(Ext.DomHelper.append(Ext.getBody(),{tag:'div',cls:'contian',cn:{tag:'div',cls:'center'}},true).child('div'));
})
Ext.Panel的主要配置项
| 配置项 | 参数类型 | 说 明 |
| animCollapse | Boolean | 设置面板折叠或展开时是否显示动画效果,如果Ext.Fx类可用则默认为true |
| applyTo | Mixed | 一个页面上已经存在的元素或元素id,组件将会追加到元素的后面,而不是 将其作为新组件的容器 |
| autoDestroy | Boolean | 设置是否自动销毁从容器中移除的组件,默认为true,否则要手工销毁 |
| autoHeight | Boolean | 是否使用自动高度,true则使用自动高度,false则使用固定高度,默认为false |
| autoLoad | Object/ string/ Function | 设置面板自动加载的url地址.如果不为null则面板会尝试加载该url并立刻在面板中进行渲染, 这个连接将变成面板的body元素,所以可以根据需要在任何时候刷新面板内容 |
| autoScroll | Boolean | 设置是否自动显示滚动条,true则设置面板的body元素样式为overflow:'auto', 内容溢出时会自动显示滚动条,false则不显示滚动条,而对溢出的内容进行截断 默认为false |
| autoShow | Boolean | 设置是否移除组件的隐藏样式(例如:'x-hidden' or 'x-hide-display'), 如果true则在渲染的时候移除他们,默认为false |
| autoWidth | Boolean | 是否使用自动宽度,true为自动宽度,false为固定宽度,默认为false |
| baseCls | String | 应用于面板元素的基本样式类,默认为'x-panel' |
| bbar | Object/ Array | 设置面板的低端工具栏,可以是Ext.Toolbar对象,工具栏配置对象或button配置对象的数组 |
| bodyBorder | Boolean | 设置是否显示面板体(body)的内部边框,true则显示,false则隐藏,默认为true, 并且该项值在border:true时生效 |
| bodyStyle | Object/ string/ Function | 应用于面板体(body)的自定义样式,默认为null |
| border | Boolean | 是否显示面板体(body)的边框,true则显示,,false则隐藏,默认为true,默认边框宽度为2px |
| buttonAlign | String | 设置面板底部(footer)中按钮对齐方式,有效值为left,center,right(默认) |
| buttons | Array | 加入到面板底部中的按钮配置对象的数组 |
| collapseFirst | Boolean | 设置渲染展开或收缩按钮的顺序.true则最后渲染,默认为true. true则在其他按钮渲染前渲染展开或收缩按钮,false则最后渲染 默认为true,该配置项决定了展开或收缩按钮的位置 |
| collapsed | Boolean | 设置面板在第一次渲染时是否处于收缩状态,true则收缩,false则展开,默认为false |
| collapsible | Boolean | 设置是否允许面板进行展开和收缩,true则允许进行展开和收缩,并在面板头部显示收缩按钮. 默认为false |
| contentEl | String | 设置面板的内容元素,可以时页面元素的id或已存在的HTML节点 |
| defaultType | String | 面板中元素的默认类型,默认为'panel' |
| defaults | Object | 应用到面板容器中所有元素的配置对象,例如:defaults{bodyStyle:'padding:15px'} |
| floating | Boolean | 设置面板是否可以浮动,true则允许,默认为false, 注意:设置floating为true会导致面板显示在负偏移位置,从而面板不可见,因为浮动状态下, 面板时采用绝对定位的,位置必须在渲染之后进行明确设置(例如myPanel.setPosition(100,100);) 浮动面板也需要有固定宽度 |
| footer | Boolean | 设置是否创建面板底部元素,true则创建,false则跳过footer元素的创建,如果一个或多个按钮 加入到footer中,则footer的设置会被忽略,而直接创建footer元素 |
| frame | Boolean | 设置是否渲染面板,true则渲染面板为自定义的圆角框,false则渲染为1px的直角框 |
| header | Boolean | 设置是否创建面板头部元素,如果提供了title,但明确色设置header为false则默认为true |
| headerAsText | Boolean | 设置是否在面板header中显示title,true则显示,默认true |
| height | Number | 面板高度 |
| hideBorders | Boolean | true则隐藏面板容器综合那个所有组件的边框,false则根据组件的具体配置进行显示 |
| hideCollapseTool | Boolean | 设置当collapsible为true时,是否显示展开或收缩按钮 |
| html | String/ Object | 设置面板(body)元素的内容为HTML片段,或DomHeper生成的内容 |
| items | Mixed | 单独一个子组件或子组件的数组 |
| layout | String | 面板的布局类型,默认Ext.layout.ContainerLayout布局, 被选布局的配置项通过layoutConfig进行设置 |
| layoutConfig | Object | 这个配置对象包含被选布局的配置项,针对每种布局的配置项需要查看相应布局类说明 |
| maskDisabled | Boolean | 设置当面板不能使用时是否遮罩面板,true则遮罩,么哦人为true |
| shadow | Boolean/ String | 设置是否在面板后面显示阴影,true则显示,通过字符串指定阴影的显示模式, 有效值包括:sides,frame,drop 默认为sides,该项只有在floating为true时生效 |
| shadowOffset | Number | 设置面板阴影的偏移量,以像素为单位,默认为4,该项只有在floating为true时生效 |
| tbar | Object/ Array | 设置面板的顶端工具栏,可以时Ext.Toolbar对象,工具栏配置对象或button配置对象的数组, 注意,面板渲染后只能通过getTopToolbar方法防卫该工具栏 |
| title | String | 显示在面板头部的标题信息 |
| titleCollapse | Boolean | 设置是否允许通过单击面板头部进行展开和收缩操作,true则允许,默认为false |
| tools | Array | 工具按钮配置对象数组,这写按钮会被添加到面板头部功能区,在下表中会有详细说明 |
| width | Number | 面板宽度,默认为auto |
| 配置项 | 参数类型 | 说 明 |
| id | String | 必选项,可能值及效果见下表 |
| handler | Function | 单击按钮后触发的处理函数, 参数包括event:Ext.EventObject,toolEl:Ext.Element,Panel:Ext.Panel |
| scope | Object | 处理函数的执行范围 |
| qtip | String/ Object | 为按钮制定提示信息,可以时自负串,或配置对象 |
| hidden | Boolean | 设置初次渲染时,是否隐藏 |
| on | Object | 为按钮配置事件监听器 |
| tooggle | close | minimize | maximize | restore | gear | pin | unpin | right | left | up | down | refresh | minus | plus | help | search | save |
- frame : 就是把四个角变成圆角, 默认为直角, 值为true就可以设成圆角,
并且拥有背景颜色且将button也包含在其中
- renderTo : 将该元素放到某个元素中 其对应的方法是 render
- applyTo: 将该元素在某个元素的基础上创建 其对应的方法是 applyToMarkup
- plain : Boolean : True 表示为渲染window body的背景为透明的背景,这样看来window body 与边框元素(framing elements)融为一体,false表示为加入浅色的背景, 使得在视觉上body元素与外围边框清晰地分辨出来(默认为 false).
* 方法:
- addButton(String/Object_config,
Function_handler, Object_scope ): 添加一个按钮对象到面板中,它为设计时方法(即一旦该组件被添加到网页之后就不能再用该方法了
)
- add(Ext.Component/Object_component) : 添加一个组建到面板中
- applyToMarkup(在什么节点上,添加什么节点,
是Ext元素,还是普通的HTML元素): 将该元素在某个元素的基础上创建 ,见示例3
- render : 将该元素放到某个元素中
* 事件:
- render : 当前对象被正确构造后触发
* 由Ext_form_TextField组建产生的引申话题(1)
- Ext.layout.FormLayout : 只有在次布局下才能正确现实文本框的标签名,
布局的宿主对象必须是Ext.Container或者Ext.Container的子类
- 在应用FormLayout布局时只要在宿主对象的构造参数中指定layout:'form' 即可
- Ext.getCmp(string _id) : 得到id为_id的组建(EXT组建)对象
* 由Ext_form_TextField组建产生的引申话题(2)
- xtype : 在ExtJS的可视化组建部署中有一种xtype机制, 即:通过指定xtype的值, 来告诉容器组建如何初始化包含组建,
如:xtype : 'textfield', 表示使用Ext.form.TextField来进行初始化(示例3)
- 其他xtype值如下:
xtype 类Class
------------- ------------------
box Ext.BoxComponent
button Ext.Button
colorpalette Ext.ColorPalette
component Ext.Component
container Ext.Container
cycle Ext.CycleButton
dataview Ext.DataView
datepicker Ext.DatePicker
editor Ext.Editor
editorgrid Ext.grid.EditorGridPanel
grid Ext.grid.GridPanel
paging Ext.PagingToolbar
panel Ext.Panel
progress Ext.ProgressBar
splitbutton Ext.SplitButton
tabpanel Ext.TabPanel
treepanel Ext.tree.TreePanel
viewport Ext.ViewPort
window Ext.Window
Toolbar components 工具条组件
---------------------------------------
toolbar Ext.Toolbar
tbbutton Ext.Toolbar.Button
tbfill Ext.Toolbar.Fill
tbitem Ext.Toolbar.Item
tbseparator Ext.Toolbar.Separator
tbspacer Ext.Toolbar.Spacer
tbsplit Ext.Toolbar.SplitButton
tbtext Ext.Toolbar.TextItem
Form components 表单组件
---------------------------------------
form Ext.FormPanel
checkbox Ext.form.Checkbox
combo Ext.form.ComboBox
datefield Ext.form.DateField
field Ext.form.Field
fieldset Ext.form.FieldSet
hidden Ext.form.Hidden
htmleditor Ext.form.HtmlEditor
numberfield Ext.form.NumberField
radio Ext.form.Radio
textarea Ext.form.TextArea
textfield Ext.form.TextField
timefield Ext.form.TimeField
trigger Ext.form.TriggerField
示例代码1:
Ext.onReady(function(){
var _panel = new Ext.Panel({
renderTo:Ext.getBody(),
layout:'form',
labelWidth:30,
listeners:{
'render' : function(_panel){ //这里之所以在这里用这个render事件而不像下面注释掉的代码那样添加组建
_panel.add(new Ext.form.TextField({ //,是因为那样的话很可能该组建还没有实例化完全,久像其中添加组建,很可能会出错!
fieldLabel:'姓名',
id:'txt_name'
}))
}
}
});
//_panel.add(new Ext.form.TextField({
// fieldLabel:'姓名11',
// id:'txt_name1'
// }));
new Ext.Button({
text:"按钮",
renderTo:Ext.getBody(),
handler:function(){
alert(Ext.getCmp('txt_name').getValue());
}
});
})
示例代码2:
/// <reference path="../ext/vswd-ext_2.0.2.js" />< /FONT>
Ext.onReady(function(){
var _panel = new Ext.Panel({
// renderTo:Ext.getBody(),
title : '人员信息',
frame : true, //设成圆角,并且拥有背景颜色且将button也包含在其中
width : 300,
height : 200
});
_panel.addButton({text:'确定'}); //这个按钮是由form创建的
_panel.addButton(new Ext.Button({ //这个按钮是我们创建好了再加进去的,区别在于自己创建
//的最小宽度由内部字体的宽度而定,而由form创建的有默认最小宽度
text : '取消',
}));
_panel.render(Ext.getBody()); //可以看到上面属性中的注释,如果和这条语句换一下,就可以看到按钮并没有加上,原因就是addButton方法是设计时方法
});
示例代码3:
<!--cssStyle-->
<style type="text/css">
.contain
{
width:100%;
height:100%;
top:0;
left:0;
}
.center
{
position:absolute;
top:30%;
left:43%;
text-align:left;
}
</style>
//js代码
Ext.onReady(function(){
var _panel = new Ext.Panel({
// renderTo:Ext.getBody(),
title : '人员信息',
frame : true, //设成圆角,并且拥有背景颜色且将button也包含在其中
width : 300,
height : 200,
layout : 'form' //记得添加表单,一定要有form布局
});
_panel.add({
xtype:'textfield', //xtype用法
fieldLabel:'用户名'
})
_panel.addButton({text:'确定'}); //这个按钮是由form创建的
_panel.addButton(new Ext.Button({ //这个按钮是我们创建好了再加进去的,区别在于自己创建的最小宽度由内部字体的宽度而定,而由form创建的有默认最小宽度
text : '取消'
}));
_panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(),
//applyToMarkup(在什么节点上,添加什么节点,是Ext元素,还是普通的HTML元素)
{
tag : 'div',
cls : 'contain',
cn : [{ //cn是子结点
tag : 'div',
cls : 'center'
}]
},
true).child('div')); //child 指的是 元素的子节点
});
综合实例:
Ext.onReady(function(){
//var lp = new LP();
//lp.render(Ext.getBody());
var _loginBox = new Ext.Panel({
title : '登陆',
width : 270,
autoHeight:true, //这里是关键 不加它将不能正常现实文本框
layout : 'form',
frame : true,
labelWidth : 65,
labelAlign : 'right',
buttonAlign :'center',
defaults : {xtype:'textfield',width:150},
items:[{
id : 'username',
fieldLabel : '用户名'
},{
id : 'password',
fieldLabel : '密 码'
}],
buttons:[{
text : '登陆',
handler:function(){
alert(String.format('用户名是:{0}\n密码是:{1}',Ext.getCmp('username').getValue(),Ext.getCmp('password').getValue()));
}
},{
text:'注册',
handler : function(){
alert('注册');
}
},{
text : '退出',
handler:function(){
_loginBox.hide();
}
}]
});
_loginBox.applyToMarkup(Ext.DomHelper.append(Ext.getBody(),{tag:'div',cls:'contian',cn:{tag:'div',cls:'center'}},true).child('div'));
})
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ExtJS学习笔记（1）-表单验证，Ext.FormPanel
- 【Ext.Net学习笔记】05：Ext.Net GridPanel的用法（包含Filter、Sorter、Grouping、汇总(Summary)的用法）
- ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport第1/3页
- ExtJS学习笔记（2）-From的类型，Ext.FormPanel
- Ext.Net学习笔记17：Ext.Net GridPanel Selection
- Ext学习笔记一（使用Ext.Panel创建一个登录面板）
- Ext第一周 史上最强学习笔记---GridPanel（基础篇）
- Ext.Net学习笔记11：Ext.Net GridPanel的用法
- ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport第1/3页
- Extjs学习笔记--Ext.tree.Panel
- Ext学习笔记(1):Panel配置及使用Demo
- ExtJS学习笔记（5）- Form表单的提交 -Ext.FormPanel
- ExtJS学习笔记 Ext.FormPanel
- Ext学习笔记05 - UI组件 - Panel,TextField
- Ext.Net学习笔记17：Ext.Net GridPanel Selection
- 【Ext.Net学习笔记】06：Ext.Net GridPanel的用法（GridPanel 折叠/展开行、GridPanel Selection、 可编辑的GridPanel）
- 【Ext.Net学习笔记】05：Ext.Net GridPanel的用法（包含Filter、Sorter、Grouping、汇总(Summary)的用法）
- Ext第一周 史上最强学习笔记---GridPanel（基础篇）
- ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport（转）
- Dotnet_c#循环学习笔记_01_Panel控件