card格局小实例 _Web前端

card布局小实例
Card布局由Ext.layout.CardLayout类定义，名称为card，该布局将会在容器组件中某一时刻使得只显示一个子元素。可以满足安装向导、Tab选项板等应用中面板显示的需求
<script type="text/javascript">
Ext.onReady(function(){
    var p = new Ext.Panel({
        renderTo:'hello',
        title:'card',
        width:300,
        height:120,
        layout:'card',
        activeItem:0,
        layoutConfig:{animate:true},
        items:[{title:'one',html:'one is ok'},{title:'two',html:'two is ok'},{title:'three',html:'three is ok'}],
        buttons:[{text:'change',handler:changeTab}]
    });
    var i = 1;
    function changeTab(){
        p.getLayout().setActiveItem(i++);
        if(i>2){
            i=0;
        }
    }
});
    </script>
</head>

<body>

    <div id="hello"></div>
</body>
</html>