ExtJS 用XTemplate+DataView模拟TabPanel标签页

模拟下tab....

 

为何要这样呢... 需要一个tab样式的标签页,但是点击后不希望切换panel,而是做一些其他的操作.

 

当然,可以通过其他方法操作TabPanel达到效果,但是觉得不好.(代码在后面第2段)

 

 

模拟Tab的代码,两种方式:

一种是XTemplate+Panel,然后自己监控事件

一种是XTemplate+DataView,这种就优雅多了.

 

先上图,免得大漠猪又说我...

 

代码如下:

Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL = '/images/s.gif';
  Ext.QuickTips.init();
  testTab();
});

function testTab(){
//::用xtemplate+panel模拟::
  //firebug偷来的,可以精简
  var tpl = new Ext.XTemplate(
    '<div class="x-tab-panel-header x-unselectable x-tab-panel-header-plain" style="-moz-user-select: none; width:100%;">',
      '<div class="x-tab-strip-wrap">',
        '<ul class="x-tab-strip x-tab-strip-top">',
          '<tpl for=".">',
            '<li class="{[values.isActive?"x-tab-strip-active" : ""]}">',
              '<a onclick="return false;" class="x-tab-strip-close"/>',
              '<a onclick="return false;" href="#" class="x-tab-right">',
                '<em class="x-tab-left">',
                  '<span class="x-tab-strip-inner">',
                    '<span class="x-tab-strip-text ">{values.name}</span>',
                  '</span>',
                '</em>',
              '</a>',
            '</li>',
          '</tpl>',
          '<li class="x-tab-edge"/><div class="x-clear"/>',
        '</ul>',
        '</div><div class="x-tab-strip-spacer"/>',
    '</div>'
  );
  var str = tpl.apply([{name:'成功视图',isActive:true},{name:'失败视图'},{name:'错误视图'},{name:'加拨视图'}])
  
  //顶上的Tab标签
  var p=new Ext.Panel({
    html:str,
    title:'::用xtemplate+panel模拟::',
    height:300,
    width:600,
    renderTo:document.body,
    listeners:{
      'render':function(panel){
        //找到标签页
        var tabs = panel.getEl().select('ul.x-tab-strip li[class!=x-tab-edge]');
        //添加鼠标悬浮样式
        tabs.addClassOnOver("x-tab-strip-over");
        //点击事件
        tabs.on('click',function(e,t,o){
          var target = e.getTarget('li');        
          if (target) {
            var cls = t.className.trim();
            if(cls!="x-tab-strip-active"){
              //切换样式
              tabs.removeClass("x-tab-strip-active");
              Ext.fly(target).addClass("x-tab-strip-active");
              //do sth...
            }
          }
        },this);
      },
      scope:this,
      delay:1000
    }
  });
  
//::用xtemplate+dataview模拟::
  var view = new Ext.DataView({
    autoWidth:true,
    autoHeight:true,
    store:new Ext.data.SimpleStore({
    fields:['id','name',{name:'isActive',type:'boolean'}],
      data:[
        ['tab_suc','成功视图',true],
        ['tab_err','失败视图',false],
        ['tab_fail','错误视图',false],
        ['tab_append','加拨视图',false]
      ]
    }),
    //item选择器
    itemSelector:'li',
    //单选
    singleSelect:true,
    multiSelect:false,
    //选中样式
    selectedClass:'x-tab-strip-active',
    //鼠标悬浮样式
    overClass:'x-tab-strip-over',
    //模板
    tpl:new Ext.XTemplate(
      '<div class="x-tab-panel-header x-unselectable x-tab-panel-header-plain" style="-moz-user-select: none; width:100%;">',
        '<div class="x-tab-strip-wrap">',
          '<ul class="x-tab-strip x-tab-strip-top">',
            '<tpl for=".">',
              '<li class="">',
                '<a onclick="return false;" class="x-tab-strip-close"/>',
                '<a onclick="return false;" href="#" class="x-tab-right">',
                  '<em class="x-tab-left">',
                    '<span class="x-tab-strip-inner">',
                      '<span class="x-tab-strip-text ">{values.name}</span>',
                    '</span>',
                  '</em>',
                '</a>',
              '</li>',
            '</tpl>',
            '<li class="x-tab-edge"/><div class="x-clear"/>',
          '</ul>',
          '</div><div class="x-tab-strip-spacer"/>',
      '</div>'
    ),
    listeners:{
      'afterrender':function(dataview){
        //选中第一行
        dataview.select(0);
        //do sth...
      },
      'click':function(dataview,index,node,e){
        var record = dataview.getStore().getAt(index);
        alert("select:"+record.get('name'));
        //do sth...
      },
      scope:this
    }
  });
  var p = new Ext.Panel({
    title:'::用xtemplate+dataview模拟::',
    height:300,
    width:600,
    renderTo:document.body,
    items:[view]
  });
}

 

 

用TabPanel实现的代码如下:

 

  var tabPanel = new Ext.TabPanel({
    //renderTo: document.body,
    activeTab: 0,
    //width:1000,
    //height:700,
    plain:true,
    defaults:{autoScroll: true},
    items:[
      {
        xtype:'panel',
        layout:'fit',
        title: '成功情况'
      },{
        title: '失败情况',
        layout:'fit'
      },{
        title: '系统错误情况',
        layout:'fit'
      },{
        xtype:'panel',
        title:'加拨视图',
        layout:'fit'
      }
    ],
    listeners:{
      'tabchange':function(tabpanel,newTab,currentTab){
        tabpanel.getActiveTab().add(grid);
        tabpanel.doLayout();
        //if(currentTab==null)return true;
        //Ext.log(newTab.title) 
        //return false;
      }
    }
  });

 

 

评论

3 楼 atian25 2012-12-27  

lightyear416 写道

ExtJs的这个tab标签在美观上有个致命的硬伤，就是标签下的第二根横线，把标签和内容分割成了看似两个部分，你有办法修改样式表，或者采用别的办法让第二根线隐藏掉，或者看起来和内容一色吗？

刚试了下,修改tabpanel下的body, 加一个border-top:0px应该就ok了.
如下图，我这方法比较粗暴。
具体的样式应该如何覆盖,就需要你看下tabpanel的css class层次了。

http://dl.iteye.com/upload/attachment/0078/4706/de86eab6-508e-3ad9-87c7-c8ab09ea539f.png

2 楼 atian25 2012-12-27  

lightyear416 写道

atain25我在官网论坛上看你发帖好几次了，知道你很厉害。
我有一个问题想请教你，看你能不能试着实现一下。
ExtJs的这个tab标签在美观上有个致命的硬伤，就是标签下的第二根横线，把标签和内容分割成了看似两个部分，你有办法修改样式表，或者采用别的办法让第二根线隐藏掉，或者看起来和内容一色吗？

过誉了....抱歉,很久没用extjs了... 我对css也不擅长, 你可以试着用chrome开发者工具,分析下对应的dom, 然后改改吧。

1 楼 lightyear416 2012-12-25  

atain25我在官网论坛上看你发帖好几次了，知道你很厉害。
我有一个问题想请教你，看你能不能试着实现一下。
ExtJs的这个tab标签在美观上有个致命的硬伤，就是标签下的第二根横线，把标签和内容分割成了看似两个部分，你有办法修改样式表，或者采用别的办法让第二根线隐藏掉，或者看起来和内容一色吗？