ExtJs布局之Card

最新推荐文章于 2017-11-24 10:41:54 发布

weixin_33725126

最新推荐文章于 2017-11-24 10:41:54 发布

阅读量80

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://yq.aliyun.com/articles/45202

本文介绍了一个使用ExtJS框架实现的卡片布局(CardLayout)示例。该示例通过三个面板展示如何在用户界面上进行切换，并利用按钮来实现面板之间的导航。此布局非常适合制作多步骤表单或幻灯片展示。

<!DOCTYPE html>

<html>

<head>

    <title>ExtJs</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">

      <script type="text/javascript" src="ExtJs/ext-all.js"></script>

      <script type="text/javascript" src="ExtJs/bootstrap.js"></script>

      <script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>

        <script type="text/javascript">

            Ext.onReady(function(){

          var panel = Ext.create('Ext.panel.Panel', {

            title: 'Ext.layout.container.CardLayout',

            frame: true,

            width: 250,

            renderTo: Ext.getBody(),

            bodyPadding: 5,

            defaults: {

              bodyStyle: 'background-color: #FFFFFF'

            },

            //layout: 'auto',

            //layout: 'fit',

            //layout: 'accordion',

            layout: 'card',

            activeItem: 0,
 
            items: [{

              title: 'Panel One',

              html: 'Panel One',

              id: 'p1'

            },{

              title: 'Panel Two',

              html: 'Panel Two',

              id: 'p2'

            },{

              title: 'Panel Three',

              html: 'Panel Three',

              id: 'p3'

            }],

            buttons: [{

              text: 'previous',

              handler: changePage

            },{

              text: 'next',

              handler: changePage

            }]

          });

          function changePage(btn){

            var index = Number(panel.layout.activeItem.id.substring(1));

            if(btn.text == 'previous'){

              index -= 1;

              if(index < 1){

                index = 1;

              }

            }else{

              index += 1;

              if(index > 3){

                index = 3;

              }

            }

            panel.layout.setActiveItem('p'+index);

          }

        });

    </script>

</head>

<body>

</body>

</html>