ExtJs学习笔记(13)_Card布局

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 >

效果图: