card面板布局

最新推荐文章于 2024-06-02 12:37:17 发布

奋斗的蜗牛，奔跑吧

最新推荐文章于 2024-06-02 12:37:17 发布

阅读量1.4k

点赞数

分类专栏： Extjs

本文链接：https://blog.csdn.net/weixin_42666837/article/details/83006808

版权

Extjs 专栏收录该内容

36 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录界面</title>
    <script typt="text/javascript" src="../ext/ext-all.js"></script>
    <link rel="stylesheet" href="../ext/resources/css/ext-all.css"/>
</head>
<body>
<div id=""></div>
<script typt="text/jjavascript">
    Ext.onReady(function () {
        var autoPanel=new Ext.panel.Panel({
            title:'card面板布局',
            renderTo:Ext.getBody(),/*进行渲染*/
            height:300,
            width:400,
            layout:'card',
            items:[{/*元素集*/
                title:'面板一',
                id:'s0',
                html:'面板二'
            },{/*元素集*/
                title:'面板二',
                id:'s1',
                html:'面板二'
            },{/*元素集*/
                title:'面板三',
                id:'s2',
                html:'面板三'
            },{/*元素集*/
                title:'面板四',
                id:'s3',
                html:'面板四'
            }],
            buttons:[{
                text:'上一页',
                name:'-1',
                handler:changePanel
        },{
                text:'下一页',
                name:'1',
                handler:changePanel
        }]
        });
    function changePanel(obj){
        /*指定当前活动的panel*/
       var activetIndex=parseInt(autoPanel.layout.getActiveItem().id.substring(1));
       var nextIndex=activetIndex+parseInt(obj.name);
        if(nextIndex>autoPanel.layout.getLayoutItems().length-1){
            nextIndex=0;
        }
        if(nextIndex<0){
            nextIndex=autoPanel.layout.getLayoutItems().length-1;
        }
        autoPanel.layout.setActiveItem(nextIndex);
    }
    });
</script>
</body>
</html>

奋斗的蜗牛，奔跑吧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
card面板布局

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;用户登录界面&lt;/title&gt; &lt;script typt="text/javascript" src=&q
复制链接

扫一扫

专栏目录