extjs 3.1 组件使用 -

atgoingguoat

浏览: 195869 次
性别:
来自: 长沙

最近访客更多访客>>

jesonlee86

hellodota

gj158187

jameslee7537

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

extjs 3.1 组件使用

博客分类：

EXT CSS HTML JavaScript Ajax

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>

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>

    </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" class="x-hide-display">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus.<br/><br/> Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.</p>
        </div>
        <div id="markup" class="x-hide-display">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.</p>
        </div>
        <br>
    </body>
</html>

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>