`
ytm
  • 浏览: 13068 次
  • 性别: Icon_minigender_2
  • 来自: 成都
社区版块
存档分类
最新评论

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

EXTHTML活动 
阅读更多

ExtJS中layout的9种样式风格

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

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

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

Js代码 复制代码
  1.    Ext.onReady(function(){      
  2.   
  3.    var panel=new Ext.Panel( {//Ext.formPanel就是Panel中用了form布局              
  4.   
  5.           renderTo:'paneldiv',      
  6.   
  7.           title:'容器组件',      
  8.   
  9.           layout:'accordion',             
  10.   
  11.           width:500,      
  12.   
  13.           height:200,      
  14.   
  15.           layoutConfig:{animate:false}, // 表示在执行展开折叠时是否应用动画效果   
  16.   
  17.           items:[      
  18.   
  19.         {title:'元素1',html:''},      
  20.   
  21.         {title:'元素2',html:''},      
  22.   
  23.         {title:'元素3',html:''},      
  24.   
  25.         {title:'元素4',html:''}      
  26.   
  27.        ]      
  28.   
  29.       }      
  30.   
  31.      );      
  32.   
  33. });   
       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布局会自动把子元素放到布局指定的位置。看下面的代码：

例一：

Js代码 复制代码
  1. Ext.onReady(function(){    
  2.   
  3.                     new Ext.Viewport({   
  4.   
  5.                                         layout:"border",   
  6.   
  7.                                         items:[{   
  8.   
  9.                                                             region:"north",   
  10.   
  11.                                                             height:50,   
  12.   
  13.                                                             title:"顶部面板"  
  14.   
  15.                                         },   
  16.   
  17.                                         {region:"south",   
  18.   
  19.                                         height:50,   
  20.   
  21.                                         title:"底部面板"},   
  22.   
  23.                                         {region:"center",   
  24.   
  25.                                         title:"中央面板"},   
  26.   
  27.                                         {region:"west",   
  28.   
  29.                                         width:100,   
  30.   
  31.                                         title:"左边面板"},   
  32.   
  33.                                         {region:"east",   
  34.   
  35.                                         width:100,   
  36.   
  37.                                         title:"右边面板"}   
  38.   
  39.                                         ]   
  40.   
  41.                     });    
  42.   
  43. });  
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----

 

 

 

 

  

例二：

Js代码 复制代码
  1. Ext.onReady(function(){           
  2.   
  3. var b = new Ext.Button({   
  4.   
  5.     id:"show-btn",           //定义按钮的ID   
  6.   
  7.     text:"弹出按钮",        //定义按钮的标题                       
  8.   
  9.     renderTo:document.body//将弹出按钮渲染到窗体上   
  10.   
  11. });   
  12.   
  13. var button = Ext.get('show-btn');      
  14.   
  15. var win;              
  16.   
  17. button.on('click', function() {    
  18.   
  19.     //创建TabPanel      
  20.   
  21.     var tabs = new Ext.TabPanel({      
  22.   
  23.         region: 'center', //border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间      
  24.   
  25.         margins: '3 3 3 0',      
  26.   
  27.         activeTab: 0,   //当前选项卡是第1个(从0开始)   
  28.   
  29.         defaults: {      
  30.   
  31.             autoScroll: true      
  32.   
  33.         },      
  34.   
  35.         items: [{      
  36.   
  37.             title: 'Bogus Tab',      
  38.   
  39.             html: "第一个Tab的内容."      
  40.   
  41.         }, {      
  42.   
  43.             title: 'Another Tab',      
  44.   
  45.             html: "我是另一个Tab"      
  46.   
  47.         }, {      
  48.   
  49.             title: 'Closable Tab',      
  50.   
  51.             html: "这是一个可以关闭的Tab",      
  52.   
  53.             closable: true //显示关闭按钮     
  54.   
  55.         }]      
  56.   
  57.         });      
  58.   
  59.         //定义一个Panel      
  60.   
  61.         var nav = new Ext.Panel({      
  62.   
  63.             title: 'Navigation',      
  64.   
  65.             region: 'west', //放在西边，即左侧      
  66.   
  67.             split: true,   //设置为分割   
  68.   
  69.             width: 200,      
  70.   
  71.             collapsible: true, //允许伸缩      
  72.   
  73.             margins: '3 0 3 3',      
  74.   
  75.             cmargins: '3 3 3 3'      
  76.   
  77.         });         
  78.   
  79.         //如果窗口第一次被打开时才创建      
  80.   
  81.         if (!win) {      
  82.   
  83.             win = new Ext.Window({      
  84.   
  85.                 title: 'Layout Window',      
  86.   
  87.                 closable: true,   //显示关闭按钮   
  88.   
  89.                 width: 600,      
  90.   
  91.                 height: 350,      
  92.   
  93.                 border : false,      
  94.   
  95.                 plain: true,      
  96.   
  97.                 layout: 'border',      
  98.   
  99.                 closeAction:'hide',      
  100.   
  101.                 items: [nav, tabs]//把上面创建的panel和TabPanel放在window中，并采用border方式布局      
  102.   
  103.             });      
  104.   
  105.         }      
  106.   
  107.         win.show(button);      
  108.   
  109.     });      
  110.   
  111. });      
  112.   
  113. });   
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选项板等应用中面板显示的需求。看下面的代码：

例一：

Js代码 复制代码
  1. Ext.onReady(function(){    
  2.   
  3.     var panel=new Ext.Panel({   
  4.   
  5.         renderTo:"hello",   
  6.   
  7.         title:"容器组件",   
  8.   
  9.         width:300,   
  10.   
  11.         height:200,   
  12.   
  13.         layout:"card",   
  14.   
  15.         activeItem: 0,   
  16.   
  17.         layoutConfig: {   
  18.   
  19.             animate: true    
  20.   
  21.         },   
  22.   
  23.         items:[   
  24.   
  25.             {title:"子元素1",html:"这是子元素1中的内容"},   
  26.   
  27.             {title:"子元素2",html:"这是子元素2中的内容"},   
  28.   
  29.             {title:"子元素3",html:"这是子元素3中的内容"}   
  30.   
  31.         ],   
  32.   
  33.         buttons:[{text:"切换",handler:changeTab}]   
  34.   
  35.     });   
  36.   
  37.     var i=1;   
  38.   
  39.     function changeTab(){    
  40.   
  41.         panel.getLayout().setActiveItem(i++);    
  42.   
  43.         if(i>2)i=0;   
  44.   
  45.     }   
  46.   
  47. });  
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



  

分享到：
| Spket在Eclipse/MyEclipse下的安装和配置
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics