今天介绍extjs中的Panel组件。
Ext.Panel相当常用。子类组件包括TabPanel,GridPanel,FormPanel,TreePanel组件。
用法如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<link href="../ext-3.1.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="../ext-3.1.0/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="../ext-3.1.0/ext-all.js" type="text/javascript"></script>
<script>
function getPane()
{
var cfPane={
id:'pane1',
title:'title',
width:500,
height:500,
renderTo:document.getElementById("dv1"),
collapsible:true,
html:"<a href='#'> hello pane</a>"
}
var pan=new Ext.Panel(cfPane);
}
Ext.onReady(function(){
document.getElementById("Button1").οnclick=getPane;
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="dv1">
<input id="Button1" type="button" value="pane" />
</div>
</form>
</body>
</html>
//配置参数(只列举部分常用参数)
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内的内容呈现
17.renderTo:(id)呈现在哪个html元素里面
//关于这三个参数的区别(个人认为:applyTo和RenderTo强调to到html元素中,contentEl则是html元素到ext组件中去):