Extjs基于Card布局和按钮实现tab页效果

Extjs基于Card布局和按钮实现tab页效果

功能由来

    Extjs的tabpanel已经比较强大，各种方法和事件的封装基本已经满足了业务场景，但是近期需要实现一个带点网站色彩的门户。初步与Boss演示后，Boss觉得Tab页样式太普通，千遍一律，没有个性。的确这个tab页看多了比较厌倦。

    于是乎就引出了本篇文章，需要用按钮实现tab页的切换效果。先放效果图：

实现原理

    要现实该功能原本想到了放个panel,并且让panel签入iframe,上头放个toolbar,实现按钮的切换加载不同的iframe页面。可想而知每次切换按钮的时候，每个页面都是重新加载的，这样不仅慢而且点多了IE容易奔溃，同时也做不到不同页面之间的交互。查阅Extjs布局功能后，恍然大于，card布局就符合该功能。下一步...下一步的导航功能，每次切换是不会重新加载的。于是赶紧着手实现。并且头上的按钮的选中效果，哥又分析了下toolbar的源码，发现只是改个样式就OK了。

实现过程

    按钮效果

          为toolbar添加以下代码：

            pressed: false,
            toggleGroup: 'butToolbar',
            allowDepress: false,

          实现不同按钮选中的效果。不过每次打开一个新按钮需要选中按钮，这里需要在添加按钮的同时为按钮额外添加样式，并且移除其余按钮的选中样式：

    wf.setSelectedAndRemoveOther = function(currentBut) {
        var me = currentBut;
        me.addClass("x-pressed x-btn-pressed x-btn-default-toolbar-small-pressed");
        me.isPressed = 1;
        var buts = Ext.getCmp('butToolbar').items;
        for (var i = 0; i < buts.length; i++) {
            if (buts.items[i].id != me.id) {
                buts.items[i].removeCls("x-pressed x-btn-pressed x-btn-default-toolbar-small-pressed");
                buts.items[i].isPressed = 0;
            }
        }
    };

    页面切换

首先添加card布局容器是必须的：

    wf.mainPanel = new Ext.create('Ext.panel.Panel', {
        region: 'center',
        id: 'mainPanel',
        border: false,
        layout:'card',
        items:[
        {id:'Portalmain',html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="' + wf.config.pagePath + "Container" + '"></iframe>'}
        ]
    });

默认可以打开一个主页，随着功能树节点的事件再往里面添加新页面：

//添加card页面
Ext.getCmp('mainPanel').add({id:butObj.id+'_toolbarsplitbut_itemPage',html:'<iframe scrolling="auto"  frameborder="0" width="100%" height="100%"  src="' + url + '"></iframe>'});

//添加按钮
  Ext.getCmp('butToolbar').insert(0,{
                xtype: 'splitbutton',...});

//选中当前页面
Ext.getCmp('mainPanel').getLayout().setActiveItem(butObj.id+'_toolbarsplitbut_itemPage');

当然除了添加按钮外还需要实现 按钮右边的关闭功能。这里我把splitbutton的下拉图片改成了X的效果，并且在每个按钮里面添加了 arrowHandler事件，用这个事件来实现移除按钮和页面：

arrowHandler: function() {
var currentPage = Ext.getCmp(this.id + '_itemPage');

if (currentPage) {
//显示下个界面 具体逻辑不展开
wf.findNextPageAndOpen(this);
//移除当前页面
Ext.getCmp('mainPanel').remove(currentPage);
}

Ext.getCmp('butToolbar').remove(this); //自我销毁
Ext.getCmp('butToolbar').doLayout();
}

至此基本功能已经完成，此处我就不放源码了，公司的代码不易开放。