extjs 3.1 组件 应用
日期：2014-05-16 浏览次数：20331 次
-
?
?
??Ext.Window
?
使用new Ext.Window()，创建一个表格则使用new Ext.GridPanel()。当然，除了一些普通的组件以外，一般都会在构造函数中通过传递构造参数来创建组件。
?
?
<%@ page language="java" contentType="text/html; charset=GBK" ?pageEncoding="GBK"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ?<head> ??<meta http-equiv="Content-Type" content="text/html; charset=GBK"> ??<title>formpanel</title> ?<link rel="stylesheet" type="text/css" ???href="<%=request.getContextPath()%>/css/ext2/ext-all.css" />
?
??? </style>
??<script src="<%=request.getContextPath()%>/js/ext2/ext-base.js"></script>
??<script src="<%=request.getContextPath()%>/js/ext2/ext-all.js"></script>
?
<script language="javascript" type="">
Ext.onReady(function(){
?
var w=new Ext.Window({
?????????? contentEl:"win",//主体显示的html元素，也可以写为el:"win"
?????????? width:300,
?????????? height:200,
?????????? title:"标题"
??????? });
??????? w.show();
?
});
</script>
?
??? </head>
??? <body>
???
??????? <div id="win" ></div>
??? </body>
</html>
?
?
?
?
?
//几个前面没有介绍的window自己的配置参数
1.closeAction:枚举值为：close(默认值)，当点击关闭后，关闭window窗口
???????????????????????hide,关闭后，只是hidden窗口
2.closable:true在右上角显示小叉叉的关闭按钮，默认为true
3.constrain：true则强制此window控制在viewport，默认为false
4.modal:true为模式窗口，后面的内容都不能操作，默认为false
5.plain：//true则主体背景透明，false则主体有小差别的背景色，默认为false
?
//需要显示下show（）方法,默认的窗口是可拖动的，可关闭的，可拖动大小的
w.show（）
?
/*******************************************/
?
- ??Ext.TabPanel
Ext.TabPanel这个东西是最常用的组件之一，它继承自Ext.Panel。因为继承自Ext.Panel，所以，它也是由header、tbar、body、bbar、footer这几个部分构成。
?
?
<%@ page language="java" contentType="text/html; charset=GBK"
pageEncoding="GBK"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>formpanel</title>
<link rel="stylesheet" type="text/css"
href="<%=request.getContextPath()%>/css/ext2/ext-all.css" />
</style>
<script src="<%=request.getContextPath()%>/js/ext2/ext-base.js"></script>
<script src="<%=request.getContextPath()%>/js/ext2/ext-all.js"></script>
<script language="javascript" type="">
Ext.onReady(function(){
var tabsDemo=new Ext.TabPanel({
renderTo:Ext.getBody(),
width:300,
activeTab:0,//当前激活标签
frame:true,
items:[{
contentEl:"tabOne",//标签页的页面元素id(加入你想显示的话)
title:"Ext.TabPanel",
closable:true//是否现实关闭按钮,默认为false
},{
contentEl:"tabTwo",
title:"我爱老婆"
}]
});
});
</script&g
