ExtJs学习笔记(13)_Card布局

这个布局其实最为麻烦，主要是用来实现类似"上一步","下一步"类似向导的界面

代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Window LayOut</title>
    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />   
     <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext-all-debug.js"></script>
    <style type="text/css">
    .x-panel-body p {
        margin:10px;
        font-size:12px;
    }
    </style>
</head>
<body>
<script type="text/javascript">

    Ext.onReady(function() {

        var i = 0;

        var navHandler = function(direction) {
            if (direction == -1) {
                i--;
                if (i < 0) { i = 0; }
            }

            if (direction == 1) {
                i++;
                if (i > 2) { i = 2; return false; }
            }


            var btnNext = Ext.get("move-next").dom.document.getElementsByTagName("button")[1];
            var btnBack = Ext.get("move-next").dom.document.getElementsByTagName("button")[0];

            if (i == 0) {
                btnBack.disabled = true;
            }
            else {
                btnBack.disabled = false;
            }

            if (i == 2) {
                btnNext.value = "完成";
                btnNext.disabled = true;
            }
            else {
                btnNext.value = "下一步";
                btnNext.disabled = false;
            }

            card.getLayout().setActiveItem(i);

        };


        var card = new Ext.Panel({
            width: 200,
            height: 200,
            title: '注册向导',
            layout: 'card',
            activeItem: 0, // make sure the active item is set on the container config!
            bodyStyle: 'padding:15px',
            defaults: {
                border: false
            },
            bbar: [
                {
                    id: 'move-prev',
                    text: '上一步',
                    handler: navHandler.createDelegate(this, [-1])                    
                },
                '->',
                {
                    id: 'move-next',
                    text: '下一步',
                    handler: navHandler.createDelegate(this, [1])
                }
            ],

            items: [{
                id: 'card-0',
                html: '<h1>欢迎来到注册向导!</h1><p>Step 1 of 3</p>'
            }, {
                id: 'card-1',
                html: '<h1>请填写注册资料!</h1><p>Step 2 of 3</p>'
            }, {
                id: 'card-2',
                html: '<h1>注册成功!</h1><p>Step 3 of 3 - Complete</p>'
}],

                renderTo: "container"
            });



        });

</script>

<div id="container" style="margin:100px"></div>

</body>
</html>

效果图:


posted @ 2008-09-02 10:54  菩提树下的杨过  阅读(2185)  评论(0)  编辑  收藏  举报