ext.layout.cardlayout.html

Ext中文API,学习ext的同志只要你学会ext里的一种控件后其实其他的就大同小异了

<!--
Mock
<link rel="stylesheet" type="text/css" href="http://localhost/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="http://localhost/ext/doc/resources/docs.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost/ext/doc/resources/style.css"/>
-->
<style type="text/css">
    body {
        overflow: scroll;
    }
    /**
	 .mdesc .long {
        display: block;
    }
     */
</style>
<!-- End Mock-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<div class="body-wrap">
    <div class="top-tools">
        <a class="inner-link" href="#Ext.layout.CardLayout-props"><img src="/images/s.gif" class="item-icon icon-prop">Properties</a><a class="inner-link" href="#Ext.layout.CardLayout-methods"><img src="/images/s.gif" class="item-icon icon-method">Methods</a><a class="inner-link" href="#Ext.layout.CardLayout-events"><img src="/images/s.gif" class="item-icon icon-event">Events</a><a class="inner-link" href="#Ext.layout.CardLayout-configs"><img src="/images/s.gif" class="item-icon icon-config">Config Options</a><a class="bookmark" href="../docs/?class=Ext.layout.CardLayout"><img src="/images/s.gif" class="item-icon icon-fav">Direct Link</a>
    </div><h1>Class Ext.layout.CardLayout</h1>
    <table cellspacing="0">
        <!--
        <tr>
        <td class="label">
        Package:
        </td>
        <td class="hd-info">
        </td>
        </tr>
        -->
        <tr>
            <td class="label">
                Defined In:
            </td>
            <td class="hd-info">
                CardLayout.js
            </td>
        </tr>
        <tr>
            <td class="label">
                Class:
            </td>
            <td class="hd-info">
                Ext.layout.CardLayout
            </td>
        </tr>
        <tr>
            <td class="label">
                Extends:
            </td>
            <td class="hd-info">
                Ext.layout.FitLayout
            </td>
        </tr>
    </table>
    <div class="description">
        <p>此布局包含的多个面板，里面的每个面板都会填充整个容器，而在同一时候只有一个面板是被显示的。
  此布局比较常见的应用场合是Wizards（向导式对话框）、Tab标签页这些的实现等等。
  应通过继承此类或设置<a href="###" onClick="alert('Ext.Container#layout');">Ext.Container#layout</a>的配置layout:'card' 的方式创建，一般很少通过关键字new直接使用。</p>
  <p>CardLayout的重点方法是<a href="###" onClick="alert('#setActiveItem');">#setActiveItem</a>。在某一时刻，只有一个面板显示，而负责移动到下一面板的方法便是这个setActiveItem方法。 
  方法执行时会有下一个面板的id或索引作为参数传入，布局本身并没有为下一步、上一步的导航提供直接的处理机制，所有这方面的功能应由开发者提供。</p>
  <p>
  在下面的例子中，就演示了一个简单的用法，在包含的面板的底部键入了一组用于导航路由的按钮。
  由于自定义的逻辑是未知的，所以这个例子的路由这部分的实现是省略的。
  注意CradLayout其他的用法（如Tab控件）会是另外一种不同的实现。对于一些真正的使用场合，应通过扩展此类以提供更多自定义的功能。用法举例：</p>
  <pre><code>
var navHandler = function(direction){
    // This routine could contain business logic required to manage the navigation steps.
    // It would call setActiveItem as needed, manage navigation button state, handle any
    // branching logic that might be required, handle alternate actions like cancellation
    // or finalization, etc.  A complete wizard implementation could get pretty
    // sophisticated depending on the complexity required, and should probably be
    // done as a subclass of CardLayout in a real-world implementation.
};

var card = new Ext.Panel({
    title: 'Example Wizard',
    layout:'card',
    activeItem: 0, // make sure the active item is set on the container config!
    bodyStyle: 'padding:15px',
    defaults: {
        // applied to each contained panel
        border:false
    },
    // just an example of one possible navigation scheme, using buttons
    bbar: [
        {
            id: 'move-prev',
            text: 'Back',
            handler: navHandler.createDelegate(this, [-1]),
            disabled: true
        },
        '->', // greedy spacer so that the buttons are aligned to each side
        {
            id: 'move-next',
            text: 'Next',
            handler: navHandler.createDelegate(this, [1])
        }
    ],
    // the panels (or "cards") within the layout
    items: [{
        id: 'card-0',
        html: '&lt;h1&gt;Welcome to the Wizard!&lt;/h1&gt;&lt;p&gt;Step 1 of 3&lt;/p&gt;'
    },{
        id: 'card-1',
        html: '&lt;p&gt;Step 2 of 3&lt;/p&gt;'
    },{
        id: 'card-2',
        html: '&lt;h1&gt;Congratulations!&lt;/h1&gt;&lt;p&gt;Step 3 of 3 - Complete&lt;/p&gt;'
    }]
});
</code></pre>
 
    </div>
    <div class="hr">
    </div>
    <a id="Ext.layout.CardLayout-configs"></a>
    <h2>配置项</h2>
    
        <table cellspacing="0" class="member-table">
            <tr>
                <th class="sig-header" colspan="2">
                    配置项
                </th>
                <th class="msource-header">
                    定义者
                </th>
            </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="deferredRender-header"></a>
                        <b>deferredRender</b>
                        : Boolean
                        <div class="mdesc">
                            <div class="short">
                                True表示为处于激活的状态时才渲染每个子项，False表示为在布局渲... 
                            </div>
                            <div class="long">
                                True表示为处于激活的状态时才渲染每个子项，False表示为在布局渲染出来时就逐个渲染子项（缺省为fasle）。
 如果这里有相当多数量的内容或包含重型控件需要渲染到面板而又不是等一时间显示的时候，设置为true以提示性能。
 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                        
                            CardLayout
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="CSS-header"></a>
                        <b>CSS</b>
                        : String
                        <div class="mdesc">
                            <div class="short">
                                一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。 这为容... 
                            </div>
                            <div class="long">
                                一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。 这为容器或容器的子节点加入标准CSS规则提供了方便。 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                            <!--如果这不是同个namespace下-->
							<a 	ext:cls="Ext.layout.ContainerLayout" 
								ext:member="#method-CSS" 
								href="output/Ext.layout.ContainerLayout.html#method-CSS">
								ContainerLayout
							</a>
                        
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="renderHidden-header"></a>
                        <b>renderHidden</b>
                        : Boolean
                        <div class="mdesc">
                            <div class="short">
                                True表示为在渲染时隐藏包含的每一项（缺省为false）。 
                            </div>
                            <div class="long">
                                True表示为在渲染时隐藏包含的每一项（缺省为false）。 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                            <!--如果这不是同个namespace下-->
							<a 	ext:cls="Ext.layout.ContainerLayout" 
								ext:member="#method-renderHidden" 
								href="output/Ext.layout.ContainerLayout.html#method-renderHidden">
								ContainerLayout
							</a>
                        
                        
                    </td>
                </tr>
            
        </table>
    
    
	<a id="Ext.layout.CardLayout-props"></a>
    <h2>公告属性</h2>
    
        <table cellspacing="0" class="member-table">
            <tr>
                <th colspan="2">
                    属性
                </th>
                <th>
                    定义者
                </th>
            </tr>
            
                <tr class="property-row inherited expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="activeItem-activeItem"></a>
                        <b>
                        activeItem: activeItem</b>
                        <div class="mdesc">
                            <div class="short">
                                 一个已激活Ext.Component的引用 例如，if(myPane... 
                            </div>
                            <div class="long">
                                 一个已激活<a href="###" onClick="alert('Ext.Component');">Ext.Component</a>的引用 例如，if(myPanel.layout.activeItem.id == 'item-1') { ... }。 activeItem只会作用在布局样式上。（像<a href="###" onClick="alert('Ext.layout.Accordion');">Ext.layout.Accordion</a>,  <a href="###" onClick="alert('Ext.layout.CardLayout');">Ext.layout.CardLayout</a>和<a href="###" onClick="alert('Ext.layout.FitLayout');">Ext.layout.FitLayout</a>）。只读的。   Related to <a href="###" onClick="alert('Ext.Container#activeItem');">Ext.Container#activeItem</a>.   
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                    	
						
                        
                            <!--如果这不是同个namespace下--><a ext:cls="Ext.layout.ContainerLayout" ext:member="#method-activeItem" href="output/Ext.layout.ContainerLayout.html#method-activeItem">
                        
                        ContainerLayout
                        
                        </a>
                    
                    </td>
                </tr>
            
        </table>
    
    
    <a id="Ext.layout.CardLayout-methods"></a>
    <h2>公共方法</h2>
    
        <table cellspacing="0" class="member-table">
            <tr>
                <th class="sig-header" colspan="2">
                    方法
                </th>
                <th class="msource-header">
                    定义者
                </th>
            </tr>
            
                <tr class="method-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <!--ClassName--><a id="setActiveItem-setActiveItem"></a>
                        <b>setActiveItem</b>
                        (
                        
                            
                                <code>
                                    String/Number item
                                </code>
                            
                        )
                        
                        <div class="mdesc">
                            <div class="short">
                                
 设置布局中某项为活动项（可见的项）。
 
                            </div>
                            <div class="long">
                                
 设置布局中某项为活动项（可见的项）。
                                <div class="mdetail-params">
                                    <strong>参数项：</strong>
                                    <ul>
                                        
                                            <li>
                                                <code>
                                                    item
                                                </code> : String/Number
                                                <div class="sub-desc">
                                                    要激活项的id或字符串索引
                                                </div>
                                            </li>
                                        
                                    </ul>
                                    <b>返回：</b>
                                    <ul>
                                        <li>
                                            <code>
                                                void
                                            </code>
                                            
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                        CardLayout
                        
                    </td>
                </tr>
            
        </table>
    
    
    <a id="Ext.layout.CardLayout-events"></a>
    <a id="Ext.Ajax-events"></a>
    <h2>公告事件</h2>
    
    
        <div class="no-members">
            这个类没公共的事件。
        </div>
    
</div>