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,

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

 1     wf.setSelectedAndRemoveOther = function(currentBut) {
 2         var me = currentBut;
 3         me.addClass("x-pressed x-btn-pressed x-btn-default-toolbar-small-pressed");
 4         me.isPressed = 1;
 5         var buts = Ext.getCmp('butToolbar').items;
 6         for (var i = 0; i < buts.length; i++) {
 7             if (buts.items[i].id != me.id) {
 8                 buts.items[i].removeCls("x-pressed x-btn-pressed x-btn-default-toolbar-small-pressed");
 9                 buts.items[i].isPressed = 0;
10             }
11         }
12     };

页面切换

首先添加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>'}
        ]
    });

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

1 //添加card页面
2 Ext.getCmp('mainPanel').add({id:butObj.id+'_toolbarsplitbut_itemPage',html:'<iframe scrolling="auto"  frameborder="0" width="100%" height="100%"  src="' + url + '"></iframe>'});
3 
4 //添加按钮
5   Ext.getCmp('butToolbar').insert(0,{
6                 xtype: 'splitbutton',...});
7 
8 //选中当前页面
9 Ext.getCmp('mainPanel').getLayout().setActiveItem(butObj.id+'_toolbarsplitbut_itemPage');

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

 1 arrowHandler: function() {
 2 var currentPage = Ext.getCmp(this.id + '_itemPage');
 3 
 4 if (currentPage) {
 5 //显示下个界面 具体逻辑不展开
 6 wf.findNextPageAndOpen(this);
 7 //移除当前页面
 8 Ext.getCmp('mainPanel').remove(currentPage);
 9 }
10 
11 Ext.getCmp('butToolbar').remove(this); //自我销毁
12 Ext.getCmp('butToolbar').doLayout();
13 }

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