ExtJS4学习笔记(十一)---TabPanel

最新推荐文章于 2017-09-19 16:18:00 发布

转载最新推荐文章于 2017-09-19 16:18:00 发布 · 482 阅读

ExtJS 专栏收录该内容

38 篇文章

订阅专栏

本文详细介绍了在Ext JS中使用两种方法创建tabPanel：通过Ext.createWidget和Ext.create。并通过示例展示了如何配置和使用这些方法。

创建一个tabPanel有两种方法：

一：Ext.createWidget('tabpanel',{...})

二：Ext.create('Ext.tab.Panel',{...})

本文分别介绍这两种创建方法。

HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../bootstrap.js"></script>
<script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="tabs.js"></script>
<title>MHZG.NET--Tabs</title>
</head>

<body>
<div id="tab"></div>
</body>
</html>

tabs.js：

Ext.require('Ext.tab.*');
Ext.onReady(function(){
       //第一种方式创建
    var tabs = Ext.createWidget('tabpanel', {
        renderTo: 'tab',
        width: 450,
        activeTab: 0,
        margin:'50 10 50 80',
        defaults :{
            bodyPadding: 10
        },
        items: [{
            //contentEl:'script',//将指定容器中的内容加载到tabPanel的内容区 
      title: 'Tabs-1',
            closable: true,
            html:'Tabs-1内容。'
        },{
            title: 'Tabs-2',
            closable: false,
            html:'Tabs-2内容'
        }]
    });
	
	//第二种方式创建
    var tabs2 = Ext.create('Ext.tab.Panel',{
        renderTo: document.body,
        activeTab: 0,
        width: 600,
        height: 250,
        plain: true,
        margin:'0 10 0 80',
        defaults :{
            autoScroll: true,
            bodyPadding: 10
        },
        items: [{
                title: 'Tabs-1',
                html: "这里显示内容"
            },{
                title: '异步加载内容',
                loader: {
                    url: 'ajax.htm',
                    contentType: 'html',
                    loadMask: true
                },
                listeners: {
                    activate: function(tab) {
                        tab.loader.load();
                    }
                }
            },{
                title: '异步加载内容1',
                loader: {
                    url: 'ajax1.htm',
                    contentType: 'html',
                    autoLoad: true,
                    params: 'foo=123&bar=abc'
                }
            },{
                title: '点击触发事件',
                listeners: {
                    activate: function(tab){
                        alert(tab.title);
                    }
                },
                html: "点击Tab之后，触发事件，监听事件：activate。activate可传递两个参数。1、Ext.Component this。2、Object options "
            },{
                title: 'Tabs不可能',
                disabled: true
			}
        ]
	})
});

第二个tabPanel中有两个html文件，分别是ajax.htm和ajax1.htm，这两个文件代码就不写了，里面就是敲了一些字，而这些字就是tabPanel内容区的那些文字，不过需要注意的一点就是，在异步获取其他文件中的内容时，这些文件返回的编码格式应该是UTF-8...