ExtJS layout的9种样式详解(一)

xtJS学习笔记 layout的9种样式风格

extjs的容器组件都可以设置它的显示风格，它的有效值有 absolute, accordion, anchor, border, card, column, fit, form and table. 一共9种

一、  absolute 顾名思义，在容器内部，根据指定的坐标定位显示

二、  accordion 这个是最容易记的，手风琴效果 ，表示可折叠的布局，也就是说使用该布局的容器组件中的子元素是可折叠的形式

       Ext.onReady(function(){   

       var panel=new Ext.Panel( {//Ext.formPanel就是Panel中用了form布局           

              renderTo:'paneldiv',   

              title:'容器组件',   

              layout:'accordion',          

              width:500,   

              height:200,   

              layoutConfig:{animate:false}, // 表示在执行展开折叠时是否应用动画效果

              items:[   

            {title:'元素1',html:''},   

            {title:'元素2',html:''},   

            {title:'元素3',html:''},   

            {title:'元素4',html:''}   

           ]   

          }   

         );   

    }); 

 

 

 

上面的代码定义了一个容器组件，指定使用Accordion布局，该容器组件中包含三个子元素，在layoutConfig中指定布局配置参数animate为true，表示在执行展开折叠时是否应用动画效果。点击每一个子元素的头部名称或右边的按钮，则会展开该面板，并收缩其它已经展开的面板执行结果将生成如下图所示的界面：----001----

  

三、anchor 这个效果具体还不知道有什么用，就是知道注意一下

1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽，
2.anchor值通常只能为负值(指非百分比值)，正值没有意义，
3.anchor必须为字符串值

  

 

四、Border布局由类Ext.layout.BorderLayout定义，布局名称为border。

                    该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。看下面的代码：

例一：

Ext.onReady(function(){ 

                    new Ext.Viewport({

                                        layout:"border",

                                        items:[{

                                                            region:"north",

                                                            height:50,

                                                            title:"顶部面板"

                                        },

                                        {region:"south",

                                        height:50,

                                        title:"底部面板"},

                                        {region:"center",

                                        title:"中央面板"},

                                        {region:"west",

                                        width:100,

                                        title:"左边面板"},

                                        {region:"east",

                                        width:100,

                                        title:"右边面板"}

                                        ]

                    }); 

});

 ----002----

 

 

 

  

例二：

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

    });   

});   

}); 

 ----003----

 

 

 

 

五、card 像安装向导一样，一张一张显示，布局由Ext.layout.CardLayout类定义，名称为card，该布局将会在容器组件中某一时刻使得只显示一个子元素。可以满足安装向导、Tab选项板等应用中面板显示的需求。看下面的代码：

例一：

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;

    }

});

 

 

上面的代码创建了一个容器组件面板，面板中包含三个子面板元素，父容器包含一个“切换”按钮，点击该按钮将会执行changeTab函数，该函数实现把父容器中的活动面板在三个子元素之间进行切换。程序的执行结果如下所示：004

 

 

点击一下“切换”按钮，结果如下图所示：005

  

 

评论

1 楼 bestyinjun 2011-04-18  

不错，值得学习！