Extjs--layout: ' card '

First look at the features of this layout:

The following shows an example of using layout: ' card ' layouts (from API copy)-The navigation panel (note: The navigation panel toggles the next or previous panel is actually the layout of the navigation panel--layout calls the specified method. ）

    //Navigation    varNavigate =function(Panel, direction) {//Panel : Navigation panel; methods for direction:layout calls        //This program can contain some of the necessary business logic to control navigation steps. For example, call Setactiveitem, manage the status of the navigation buttons,        //handles possible branching logic, handling special operations like canceling or ending, and so on. A complete wizard page for complex requirements        //implementations can also be quite complex, and in real-world programs they should usually be implemented in a way that inherits CardLayout.        /** * Get the layout of the navigation panel*/        varLayout =panel.getlayout (); /** * Navigation panel switch to next component or previous component * This statement is a method that calls layout.         Note: Because layout calls the method name is a variable, all in Layout[methodname] () this form.         * Example: If direction is "next", this statement is equivalent to: layout.next (); Switches the active (visible) component of the layout to the next one. */Layout[direction] (); /** * Set the button status in the Bbar of the navigation panel * GETCMP: Find the existing Component by ID. return: ext.component. --ext * setdisabled (Boolean Disabled): Enables or disables the current component. --ext.component * GetPrev (): Returns the previous component of the currently active (visible) component in the layout. return: Ext.component. --ext.layout.container.card*/ext.getcmp (' Move-prev '). setdisabled (!layout.getprev ());//if the current active panel does not have a previous component, the ' Move-prev ' button is set to Disabled. EXT.GETCMP (' Move-next '). setdisabled (!layout.getnext ());//set the ' move-next ' button to disabled if the current active component of the current Panel does not have the next component.     }; //Create a navigation panelExt.create (' Ext.panel.Panel ', {title:' Example Wizard ', Width:300, Height:200, layout:' Card ', Bodystyle:' padding:15px ', defaults: {//apply to all sub-panelsBorderfalse        },        //here are just a few buttons to sample a possible navigation scenario.Bbar: [//the default type of toolbar is the button{ID:' Move-prev ', Text:' Back ', Xtype:' Button ', Handler:function(BTN) {//Ext.button.button-cfg-handlerNavigate (Btn.up ("Panel"), "prev");//Up method: Find the Ancestor container that matches the simple selector along the OWNERCT-the panel created by this example}, Disabled:true            },            ' and ',//a long interval so that two buttons are distributed on both sides{ID:' Move-next ', Text:' Next ', Handler:function(BTN) {//btn:this button.Navigate (Btn.up ("Panel"), "next"); }            }        ],        //sub-panels under Layoutitems: [{ID:' Card-0 ', HTML:' },{ID:' Card-1 ', HTML:' <p>step 2 of 3</p> '},{ID:' Card-2 ', HTML:' }], RenderTo:Ext.getBody ()});

Effect:

Extjs--layout: ' card '