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 }
至此基本功能已经完成,此处我就不放源码了,公司的代码不易开放。