plain:true,(默认不是)
resizable:false,(是否可以改变大小,默认可以)
maximizable:true,(是否增加最大化,默认没有)
draggable:false,(是否可以拖动,默认可以)
minimizable:true,(是否增加最小化,默认无)
closable:false,(是否显示关闭,默认有关闭)
//几个前面没有介绍的参数
1.closeAction:枚举值为:close(默认值),当点击关闭后,关闭window窗口 hide,关闭后,只是hidden窗口
3.constrain:true则强制此window控制在viewport,默认为false
4.modal:true为模式窗口,后面的内容都不能操作,默认为false
5.plain://true则主体背景透明,false则主体有小差别的背景色,默认为false
而pannel 和window是差不多的,比如构造参数我都可以直接通用:
一些常见配置参数:
1.autoLoad:有效的url字符串,把那个url中的body中的数据加载显示,但是可能没有样式和js控制,只是html数据
2.autoScroll:设为true则内容溢出的时候产生滚动条,默认为false
3.autoShow:设为true显示设为"x-hidden"的元素,很有必要,默认为false
4.bbar:底部条,显示在主体内,//代码:bbar:[{text:'底部工具栏bottomToolbar'}],
5.tbar:顶部条,显示在主体内,//代码:tbar:[{text:'顶部工具栏topToolbar'}],
6.buttons:按钮集合,自动添加到footer中(footer参数,显示在主体外)//代码:buttons:[{text:"按钮位于footer"}]
7.buttonAlign:footer中按钮的位置,枚举值为:"left","right","center",默认为right
8.collapsible:设为true,显示右上角的收缩按钮,默认为false
9.draggable:true则可拖动,但需要你提供操作过程,默认为false
10.html:主体的内容
11.id:id值,通过id可以找到这个组件,建议一般加上这个id值
12.width:宽度
13.height:高度
13.title:标题
14.titleCollapse:设为true,则点击标题栏的任何地方都能收缩,默认为false.
15.applyTo:(id)呈现在哪个html元素里面
16.contentEl:(id)呈现在哪个html元素里面,把el内的内容呈现 (如:contentEI='config'
...
17.renderTo:(id)呈现在哪个html元素里面
eg:
Ext.onReady(function()
{
var panel = new Ext.Panel(
{
title:"标题",
width:300,
height:200,
//frame:true,//圆角
plain:true,//方角 默认
collapsible:true,
tbar:[{text:"按钮1",handler:function(){Ext.MessageBox.alert("我是按钮1","我是通过按钮1激发出来的弹出框!")}},{text:"按钮2"}], //顶部工具栏
bbar:[{text:"按钮3"},{text:"按钮4"}], //底部工具栏
html:'
hello,my name is 274!
',buttons:[{text:"按钮5"},{text:"按钮6"}], //footer部工具栏
buttonAlign:"left"
});
//win.show();
panel.render("hello");
});
Tabpanel 使用:
对应的显示效果:
注意上面代码中使用了items 属性,表示子面板组。内容可以用html 元素ID 。比如:
items:[
{contentEl:'script', title: 'Short Text'},
{contentEl:'markup', title: 'Long Text'}
]
这样这两个子面板的内容将是ID为sript 和markup 的元素内容。
也可以,以html属性直接表示子面板的内容:
items:[
{html:'script', title: 'Short Text'},
{html:'markup', title: 'Long Text'}
]
语句解释: defaults:{autoHeight: true}, 默认自适应高度。当然这里面还可以设置为: defaults:{autoScroll: true},如果设置为 defaults:{autoScroll: true},高度就最好指定了。
下面还有一个tab面板,其子面板更多了。
我们发现renderTo 不仅可以绑在div (id) 也可以绑定在:document.body。
而其中比较特别的有:
1.autoLoad: {url: 'ajax2.htm', params: 'foo=bar&wtf=1'}
指切换到这个页面,内容显示为动态加载的,比如这里用了一个ajax方式,url 发送目标,params是参数形式。
2.listeners: {activate: handleActivate},
当面板切换到这个页面将触发事件:handleActivate
3.disabled:true,
指这个页面不能点击。
对于: plain:true, frame:true,
前者是子面板标题处样式,前者并无背景,后者有背景(看起来像个框架),请参看上图二者效果差异。
而activeTab:0 是指,默认显示(访问)的是哪一个子面板。0是第一次,如果不指定该属性,默认不显示子面板内容,只有当用户点击子面板后才显示。