extjs 3.1 组件 使用
?
?
??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.TabPanelExt.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> </head> <body> <div id="win" ></div> </body></html>?
?
?
?
?
<%@ 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 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" } ] }); function handleActivate(tab) { alert(tab.title + ' was activated.'); } }); </script> </head> <body style="padding:10px;"> <div id="hello"> </div> <div id="script" alt="extjs 3.1 组件 应用">?
?
?
?Ext.Panel?Table 布局由类Ext.layout.TableLayout 定义，名称为table，该布局负责把容器中的子元素按照类似普通html 标签。
?
<%@ 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 panel=new Ext.Panel({renderTo:"hello",title:"Ext.Panel容器组件",width:500,height:200,layout:"table",layoutConfig: {columns: 3},items:[{title:"左元素1",html:"这是子元素1中的内容",rowspan:2,height:100},{title:"子元素2",html:"这是子元素2中的内容",colspan:2},{title:"子元素3",html:"这是子元素3中的内容"},{title:"子元素4",html:"这是子元素4中的内容"}] });}); </script> </head> <body style="padding:10px;"> <div id="hello"></div> <br> </body></html>?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
代码布置如图：
?
?
