ExtJS4.1 ExtJS TabPanel 雙擊標簽關閉該頁

/*總覺得 TabPanel 生成的那個關閉按鈕太小
關閉的時候不太順手 感覺不方便 所以想雙擊關閉tab方便些
於是在網上找到下面的代碼 
URL：http://atian25.iteye.com/blog/413920
可是用在我的系統框架上無效，本人用的是ExtJs4.1。
不知道是不是我的問題，可是實在找不出錯在哪里。
於是 自己想了個辦法 親測支持ExtJs4.1 
可能有點麻煩 可是沒辦法 上面那個方法 我實在是找不出問題在哪里
*///////////////////---下面是網上找的方法 本人無效------////////////////////

    var tabs = new Ext.TabPanel({
    renderTo: 'tabs1',
    width:450,
    activeTab: 0,
    frame:true,
    defaults:{autoHeight: true},
    items:[
        {contentEl:'script', title: 'Short Text'},
        {contentEl:'markup', title: 'Long Text'}
    ],
    initEvents : function(){
      Ext.TabPanel.superclass.initEvents.call(this);
      this.on('add', this.onAdd, this, {target: this});
      this.on('remove', this.onRemove, this, {target: this});
      this.mon(this.strip, 'mousedown', this.onStripMouseDown, this);
      this.mon(this.strip, 'contextmenu', this.onStripContextMenu, this);
      if(this.enableTabScroll){
          this.mon(this.strip, 'mousewheel', this.onWheel, this);
      }
      //ADD:monitor title dbclick
      this.mon(this.strip,'dblclick',this.onTitleDbClick,this);
  },
                 //ADD: handler
  onTitleDbClick:function(e,target,o){
    var t = this.findTargets(e);
    if (t.item.fireEvent('beforeclose', t.item) !== false) {
                        t.item.fireEvent('close', t.item);
                        this.remove(t.item);
                   }
  }
});

-----下面是我的方法--------

有用到 Viewport 只貼出了 tabpanel的代碼

{
    xtype: "tabpanel",
    region: "center",
    id: "tabpanel",
    minTabWidth: 100,
    listeners: {
        'tabchange': function () {
        }
    }
}

我是動態生成tab的 所以就寫成這樣了 注意里面的代碼 雙擊關閉就是這里面

var CreateTab=function(id,title,url){
        var tabs = Ext.getCmp("tabpanel");
                for (var i = 0; i < tabs.items.length; i++) {
                    if (tabs.items.items[i].title == title) {
                      tabs.items.items[i].show();
                      return;
                    }
                }
                var NewTabPanel= Ext.create('Ext.panel.Panel', {
                    layout: 'fit',
                    title: title,
                    collapsible: true,
                    closable: id==0?false:true,
                    autoScroll: false,
                    initEvents: function () {
                        var obj = this;
                        var id = 'tab-' + (this.id.split('-')[1] - 1 + 2) + '-btnWrap';
                        Ext.get(id).dom.ondblclick = function () {
                            if(obj.title!='我的工作台')
                                tabs.remove(obj);
                        }
                    },
                    html: '<iframe name="mainframe" width="100%" height="100%" frameborder="0" src="'+url+'"></iframe>'
                });
                tabs.add(NewTabPanel).show();
}

//用下面的代碼可以測試添加Tab
CreateTab("0", "我的工作台", "MyHome.htm");
CreateTab("1", "賬戶管理", "User.htm");

更多0

• 下一篇Extjs4.1 checkboxgroup動態生成checkbox 還有 checkbox綁定點擊事件