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(
    '
',
      '
',
        '
',
          '',
            '
',
              '',
              '',
                '',
                  '',
                    '{values.name}',
                  '',
                '',
              '',
            '
',
          '',
          '
',
        '
',
        '
',
    '
'
  );
  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(
      '
',
        '
',
          '
',
            '',
              '
',
                '',
                '',
                  '',
                    '',
                      '{values.name}',
                    '',
                  '',
                '',
              '
',
            '',
            '
',
          '
',
          '
',
      '
'
    ),
    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;
      }
    }
  });