13-Ext_Panel
- 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则不显示滚动条,而对溢出的内容进行截断
默认为falseautoShow
Boolean
设置是否移除组件的隐藏样式(例如:'x-hidden' or 'x-hide-display'),
如果true则在渲染的时候移除他们,默认为falseautoWidth
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则允许进行展开和收缩,并在面板头部显示收缩按钮.
默认为falsecontentEl 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
- tools配置项明细表
配置项
参数类型
说 明
id String 必选项,可能值及效果见下表 handler Function 单击按钮后触发的处理函数,
参数包括event:Ext.EventObject,toolEl:Ext.Element,Panel:Ext.Panelscope Object 处理函数的执行范围 qtip String/
Object为按钮制定提示信息,可以时自负串,或配置对象 hidden Boolean 设置初次渲染时,是否隐藏 on Object 为按钮配置事件监听器
id图对应表
tooggle close minimize maximize restore gear pin unpin right left up down refresh minus plus help search save
* 属性: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.WindowToolbar 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.TextItemForm 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'));
})