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

最新推荐文章于 2019-05-24 11:58:55 发布

zhaoqiliang527

最新推荐文章于 2019-05-24 11:58:55 发布

阅读量2.1k

点赞数

分类专栏： ExtJs JS ExtJs4.0 文章标签： extjs html autoload function ajax tabs

本文链接：https://blog.csdn.net/zhaoqiliang527/article/details/6733305

版权

ExtJs 同时被 3 个专栏收录

61 篇文章 0 订阅

订阅专栏

50 篇文章 0 订阅

订阅专栏

ExtJs4.0

22 篇文章 1 订阅

订阅专栏

创建一个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...

zhaoqiliang527

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ExtJS4学习笔记(十四)---TabPanel

创建一个tabPanel有两种方法：一：Ext.createWidget('tabpanel',{...})二：Ext.create('Ext.tab.Panel',{...})本文分别介绍这两种创建方法。HTML代码： "-//W3C//DT
复制链接

扫一扫

专栏目录