欢迎使用CSDN-markdown编辑器

来源：互联网发布：修改ssh 默认端口编辑：程序博客网时间：2024/06/06 09:50

**
Extjs中layout的用法总结 —————–
** • Js代码

1. Ext.onReady(function() {    2.        Ext.create('Ext.Window',{  3.         title:'Anchor layout',  4.         width:400,  5.         height:400,  6.         layout:'anchor',  7.         plain: true,  8.         items:[  9.             Ext.create('Ext.panel.Panel',{  10.                 title:'panel1',  11.                 height:100,  12.                 anchor:'-50',  13.                 html:'高度等于100，宽度= 容器宽度-50'  14.             }),  15.             Ext.create('Ext.panel.Panel',{  16.                 title:'panel2',  17.                 height:100,  18.                 anchor:'50%',  19.                 html:'高度等于100，宽度=容器的宽度*50%'  20.             }),  21.             Ext.create('Ext.panel.Panel',{  22.                 title:'panel3',  23.                 anchor:'-10,-200',  24.                 html:'高度等于容器高度-10,宽度等于容器宽度-200'  25.             })  26.         ]  27.           28.     }).show();   29.     });

3.border:将容器分为五个区域:east,south,west,north,center Js代码

1. Ext.onReady(function(){  2.          var tab = Ext.create('Ext.tab.Panel',{  3.         region:'center',//border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间    4.         margins:'3,3,3,0',  5.         activeTab:0,  6.         defaults:{  7.             autoScroll:true  8.         },  9.         items:[{  10.             title:'tab1',  11.             html:'第一个tab内容'  12.         },{  13.             title:'tab2',  14.             html:'第二个tab内容'  15.         },{  16.             title:'tab3',  17.             html:'第三个tab内容'  18.         }]  19.           20.     })  21.     var nav = Ext.create('Ext.panel.Panel',{  22.         title:'navigation',  23.         region:'west',  24.         split:true,  25.         width:200,  26.         collapsible:true,//允许伸缩  27.         margins:'3,0,3,3',  28.         cmargins:'3,3,3,'  29.     });  30.     Ext.create('Ext.Window',{  31.         title:'Layout Window',  32.         width:600,  33.         height:350,  34.         closable:true,  35.         border:false,  36.         plain:true,  37.         layout:'border',  38.         closeAction:'hide',  39.         items:[nav,tab]  40.     }).show();  41. )};

4.accordion:这个风格是手风琴式的，效果是如果有多个item，则点击其中一个，则展开，其他的则收缩。 Js代码

1. Ext.OnReady(function(){    2.      Ext.create('Ext.panel.Panel',{  3.         title:'容器组件',  4.         layout:'accordion',  5.         width:600,  6.         height:200,  7.         layoutConfig:{animate:false},  8.         items:[{  9.            title:'元素1',html:''  10.         },{  11.            title:'元素2',html:''  12.         },{  13.            title:'元素3',html:''  14.         },{  15.            title:'元素4',html:''  16.         }]  17.           18.     });   19. });

5.card:像安装向导一样，一张一张显示 Js代码

1. Ext.onReady(function(){  2.     var navigate = function(panel,direction){  3.         var layout = panel.getLayout();  4.         layout[direction]();  5.         Ext.getCmp('move-prev').setDisabled(!layout.getPrev());  6.         Ext.getCmp('move-next').setDisabled(!layout.getNext());  7.     };  8.     Ext.create('Ext.panel.Panel',{  9.                 title:'Example Wizard',  10.                 height:500,  11.                 width:400,  12.                 layout: 'card',  13.                 activeItem:0,  14.                 bodyStyle:'padding:15px',  15.                 animCollapse:true,  16.                 renderTo:Ext.getBody(),  17.                 defaults:{  18.                      // applied to each contained panel  19.                     border: false  20.                 },  21.                 bbar:[{  22.                     id:'move-prev',  23.                     text:'back',  24.                     handler:function(btn){  25.                         navigate(btn.up("panel"),"prev");  26.                     },  27.                     disabled:true  28.                 },'->',{  29.                     id:'move-next',  30.                     text:"next",  31.                     handler:function(btn){  32.                         navigate(btn.up("panel"),"next");  33.                     }  34.                 }],  35.                 items:[{  36.                     id:'card-0',  37.                     html:'<h1>Welcome to the Wizard!</h1>'  38.                 },{  39.                     id:'card-1',  40.                     html:'<p>step 2 of 3 </p>'  41.                 },{  42.                     id:'card-2',  43.                     html:'<h1>Congratulations!</h1><p>Step 3 of  3-complete</p>'  44.                 }]  45.             });  46. });

6.form:是一种专门用于管理表单中输入字段的布局 Js代码

1. Ext.onReady(function() {    2.         var win = Ext.create('Ext.Window',{    3.             title: "form Layout",    4.             height: 150,    5.             width: 230,    6.             plain: true,    7.             bodyStyle: 'padding:15px',    8.             items:     9.             {    10.                 xtype: "form",    11.                 labelWidth: 30,    12.                 defaultType: "textfield",    13.                 frame:true,    14.                 items:     15.                 [    16.                     {    17.                         fieldLabel:"姓名",    18.                         name:"username",    19.                         allowBlank:false    20.                     },    21.                     {    22.                         fieldLabel:"呢称",    23.                         name:"nickname"    24.                     },    25.                     {    26.                         fieldLabel: "生日",    27.                         xtype:'datefield',    28.                         name: "birthday",    29.                         width:127    30.                     }    31.                 ]    32.             }    33.         });    34.         win.show();    35.     });

7.table:按照普通表格的方法布局子元素，用layoutConfig:{columns:3},//将父容器分成3列 Js代码

1. Ext.onReady(function(){    2.       Ext.create('Ext.panel.Panel',    3.       {    4.        renderTo:Ext.getBody(),    5.        title:'容器组件',    6.        layout:'table',           7.        width:500,    8.        height:200,    9.        layoutConfig:{columns:3},//将父容器分成3列    10.        items:[    11.         {title:'元素1',html:'ssssssssss',rowspan:2,height:100},    12.         {title:'元素2',html:'dfffsddsdfsdf',colspan:2},    13.         {title:'元素3',html:'sdfsdfsdf'},    14.         {title:'元素4',html:''}    15.        ]    16.       }    17.      );    18. });

8.column:把整个容器看成一列,然后向容器放入子元素时 Js代码

1. Ext.onReady(function() {    2.         var win = Ext.create('Ext.Window',{    3.             title: "Column Layout",    4.             height: 300,    5.             width: 400,    6.             plain: true,    7.             layout: 'column',    8.             items: [{    9.                 title:"width=50%",    10.                 columnWidth:0.5,    11.                 html:"width=(容器宽度-容器内其它组件固定宽度)*50%",    12.                 height:200    13.             },    14.             {    15.                 title:"width=250px",    16.                 width: 200,    17.                 height:100,    18.                 html:"固定宽度为250px"    19.             }                20.             ]    21.         });    22.         win.show();    23.     });

9.fit:填充整个容器（如果多个子元素则只有一个元素充满整个容器） Js代码

1. Ext.OnReady(function(){    2.    Ext.create(Ext.create(Ext.panel.Panel',    3.       {    4.        renderTo:'paneldiv',    5.        title:'容器组件',    6.        layout:'fit',    7.        width:500,    8.        height:100,    9.        items:[    10.         {title:'子元素1'},    11.         {title:'子元素2'},    12.         {title:'子元素3'},    13.         {title:'子元素4'},    14.         {title:'子元素5'}    15.        ]    16.       }    17.      );    18. });

阅读全文

1 0