布局 基础

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);      
   
    });      
   
});      
   
});