Extjs achieves the tab page Effect Based on card layout and buttons

Extjs achieves the tab page Effect Based on card layout and buttons

Features

The tabpanel of extjs is already powerful, and the encapsulation of various methods and events has basically met the needs of business scenarios. However, a portal with a dot-colored website needs to be implemented recently. After preliminary demonstration with the boss, the boss thought that the tab page style was too common and would be uniform for thousands of times without personality. Indeed, this tab page is too tired.

 

As a result, this article is introduced.Article, You need to use the button to achieve the switch effect of the tab page. Release first:

Implementation Principle

To be practical, this function was originally designed to put a panel, and let the Panel check in IFRAME, put a toolbar in the top, so that different IFRAME pages can be loaded by switching buttons. It is conceivable that every page is reloaded every time the switch button is switched. This not only slows down, but also causes IE to crash easily, and at the same time, the interaction between different pages cannot be achieved. After checking the extjs layout function, the card layout will be consistent with the function. Next step... the navigation function of the next step will not be reloaded for each switch. So we started to implement it. In addition, he analyzed the source code of the toolbar and found that it was okay to change the style.

Implementation Process

Button Effect

Add the following for the toolbarCode:

 
Pressed:False, Togglegroup:'Toolbar', Allowdepress:False,
 

Different buttons are selected. However, you need to select a button each time you open a new button. Here, you need to add a style for the button while adding the button, and remove the selected style of the other buttons:

 1 WF. setselectedandremoveother = Function  (Currentbut ){  2           VaR Me = Currentbut;  3 Me. addclass (" X-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-default-toolbar-small-pressed " );  9 Buts. items [I]. ispressed = 0 ;  10   }  11   }  12 };

Page Switch

First, adding a card layout container is required:

WF. mainpanel =NewExt. 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>'}]});
 

By default, a home page can be opened, and a new page will be added to the page with the events of the function tree node:

 1   //  Add card page  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   //  Add button  5 Ext. getcmp ('toolbar'). insert (0 ,{  6 Xtype: 'splitting' ,...});  7   8   //  Select current page 9 Ext. getcmp ('mainpanel '). getlayout (). setactiveitem (butobj. ID +' _ toolbarsplitbut_itempage ');

Of course, in addition to adding a button, you also need to disable the function on the right of the button. Here, I changed the splitbutton drop-down image to the X effect, and added the arrowhandler event to each button. This event is used to remove buttons and pages:

 1 Arrowhandler: Function  (){  2   VaR Currentpage = ext. getcmp ( This . ID + '_ itempage' );  3   4   If  (Currentpage ){ 5   //  The specific logic of the next interface is not displayed.  6 WF. findnextpageandopen ( This  );  7   //  Remove current page  8 Ext. getcmp ('mainpanel' ). Remove (currentpage );  9   }  10   11 Ext. getcmp ('toolbar'). Remove (This ); //  Self-destruction  12 Ext. getcmp ('toolbar' ). Dolayout ();  13 }

Now that the basic functions have been completed, I will not place the source code here, and the company's code is not easy to open.