布局 基础

Ext.onReady(function(){    

    var panel=new Ext.Panel({   

        renderTo:"hello",   

        title:"容器组件",   

        width:300,   

        height:200,   

        layout:"card",   

        activeItem: 0,   

        layoutConfig: {   

            animate: true    

        },   

        items:[   

            {title:"子元素1",html:"这是子元素1中的内容"},   

            {title:"子元素2",html:"这是子元素2中的内容"},   

            {title:"子元素3",html:"这是子元素3中的内容"}   

        ],   

        buttons:[{text:"切换",handler:changeTab}]   

    });   

    var i=1;   

    function changeTab(){    

        panel.getLayout().setActiveItem(i++);    

        if(i>2)i=0;   

    }   

});   

--------------------------------------------------------------------------------

Ext.onReady(function(){           

var b = new Ext.Button({   

    id:"show-btn",           //定义按钮的ID   

    text:"弹出按钮",        //定义按钮的标题                       

    renderTo:document.body//将弹出按钮渲染到窗体上   

});   

var button = Ext.get('show-btn');      

var win;              

button.on('click', function() {    

    //创建TabPanel      

    var tabs = new Ext.TabPanel({      

        region: 'center', //border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间      

        margins: '3 3 3 0',      

        activeTab: 0,   //当前选项卡是第1个(从0开始)   

        defaults: {      

            autoScroll: true      

        },      

        items: [{      

            title: 'Bogus Tab',      

            html: "第一个Tab的内容."      

        }, {      

            title: 'Another Tab',      

            html: "我是另一个Tab"      

        }, {      

            title: 'Closable Tab',      

            html: "这是一个可以关闭的Tab",      

            closable: true //显示关闭按钮     

        }]      

        });      

        //定义一个Panel      

        var nav = new Ext.Panel({      

            title: 'Navigation',      

            region: 'west', //放在西边，即左侧      

            split: true,   //设置为分割   

            width: 200,      

            collapsible: true, //允许伸缩      

            margins: '3 0 3 3',      

            cmargins: '3 3 3 3'      

        });         

        //如果窗口第一次被打开时才创建      

        if (!win) {      

            win = new Ext.Window({      

                title: 'Layout Window',      

                closable: true,   //显示关闭按钮   

                width: 600,      

                height: 350,      

                border : false,      

                plain: true,      

                layout: 'border',      

                closeAction:'hide',      

                items: [nav, tabs]//把上面创建的panel和TabPanel放在window中，并采用border方式布局      

            });      

        }      

        win.show(button);      

    });      

});      

});