var panel = new Ext.Panel(
{
id:id值//通过id可以找到这个组件,建议一般加上这个id值
title:"标题",//如果标题为空 标题栏就不会显示
width:300,
height:200,
html:'<h1>hello,world!>',
collapsible:true,
region : 'west',//布局方式 注意如果是border 布局 region 一定要有控件显示于center
split : true,
titleCollapse:true,//标题处任何处点击都会展开
collapsible : true,
margins : '3 0 3 3',
cmargins : '3 3 3 3',
renderTo:"divDisplay"//要渲染的HTML标签id
resizable:false,(是否可以改变大小,默认可以)
applyTo:(id)呈现在哪个html元素里面
contentEl:(id)呈现在哪个html元素里面,把el内的内容呈现
renderTo:(id)呈现在哪个html元素里面
draggable:true则可拖动,但需要你提供操作过程,默认为false
//frame:true,//圆角
plain:true,//方角 默认
});
tabpanel
var tabs = new Ext.TabPanel({
renderTo: 'hello',
width:450,
height:200,
activeTab: 0,
frame:true,
defaults:{autoHeight: true},
items:[
{contentEl:'script', title: '子面板1'},
{contentEl:'markup', title: '子面板2'}
]
});
var tabs2 = new Ext.TabPanel({
renderTo: document.body,
activeTab: 0,
width:600,
height:250,
plain:true,
defaults:{autoScroll: true},
items:[{
title: 'Normal Tab',
html: "My content was added during construction."
},{
title: 'Ajax Tab 1',
autoLoad:'ajax1.htm'
},{
title: 'Ajax Tab 2',
autoLoad: {url: 'ajax2.htm', params: 'foo=bar&wtf=1'}
},{
title: 'Event Tab',
listeners: {activate: handleActivate},
html: "I am tab 4's content. I also have an event listener attached."
},{
title: 'Disabled Tab',
disabled:true,
html: "Can't see me cause I'm disabled"
}
]
});
对用HTML
<body style="padding:10px;">
<div id="hello">
</div>
<div id="script" class="x-hide-display">
<p>dddddddd<br/><br/> cccccccc</p>
</div>
<div id="markup" class="x-hide-display">
<p>aaaaaaaaaa<br/><br/>bbbbbb<p>
</div>
<br>
</body>
window
var win
if(!win)
{
win = new Ext.Window({
title : '信息显示',
closable : true,
width : 720,
height : 350,
//border : false,
plain : true,
layout : 'border',//布局方式 其他还有column,from,table,fit 等等
items : [tabs,nav ],//里面所包含的组件
maximizable:true,//是否显示最大化按钮
modal:true,//是否是模式窗口
closeAction:'hide',//关闭时的动作 hide或close
maximizable:true,//(是否增加最大化,默认没有)
draggable:false,//(是否可以拖动,默认可以)
minimizable:true,//(是否增加最小化,默认无)
closable:false//(是否显示关闭,默认有关闭)
});
}
win.show(button);//“button点击 触发此window的html 标签 的对象”