extjs布局(一)

来源:http://www.sh-fengwen.com 作者:瘦身美容 人气:59 发布时间:2019-09-02
摘要:Ext常用的布局都在Ext.layout下,这里几乎涵盖了所有的布局方式,满足开发者需求。那么我们就其中常用的方式逐一介绍。 Extjs4.0的布局介绍: Border布局 Border布局是Ext中常用布局方式(

Ext常用的布局都在Ext.layout下,这里几乎涵盖了所有的布局方式,满足开发者需求。那么我们就其中常用的方式逐一介绍。

Extjs4.0的布局介绍:

Border布局

Border布局是Ext中常用布局方式(经常用到整个页面的总体布局),感觉用的几率很大。在看代码之前先熟悉一种特殊的容器ViewPort,它是对于浏览器视窗的抽象,你可以将它理解为浏览器的可见区域,它将渲染到document.body并自动调整大小,一个页面只能创建一个Viewport。

var pnNorth=new Ext.Panel({
 id:'pnNorth',
 autoWidth:true,
 heigth:80,
 frame:true,
 region:'north',
 html:'这里放置页头内容'
});
var pnWest=new Ext.Panel({
 id:'pnWest',
 title:'菜单项',
 width:200,
 heigth:'auto',
 split:true,//显示分隔条
 region:'west',
 collapsible:true

});
var pnCenter=new Ext.TabPanel({
 region:'center',
 activeTab:0,
 items:[
  {
   title:'收件箱',
   authHeight:true,
   closable:true,//是否可关闭
   html:'这里显示所收邮件。。。'
  }
 ]
});
var vp=new Ext.Viewport({
 layout:"border",
 items:[
  pnNorth,
  pnWest,
  pnCenter
 ]
});

1:Fit布局

Column布局

从字面就知道Column布局就是列布局,例如我一个panel中还有两个子panel现在想要左侧显示一个右侧显示一个怎么办?这是可以选择Column将父Panel分为两列,左侧一个右侧一个。

var pnSub1=new Ext.Panel({
 height:300,
 columnWidth:.3,
 html:'这是子panle1'
});
var pnSub2=new Ext.Panel({
 height:300,
 columnWidth:.7,
 html:'这是子panle2'
});
var pn=new Ext.Panel({
 id:'pn',
 title:'父Panel',
 renderTo:'divPanel',
 width:800,
 height:300,
 layout:'column',
 items:[
  pnSub1,
  pnSub2
 ]
});

子元素会自动填满整个父容器。注意在其布局下,对子元素设置宽带是无效的。如果在Fit布局中放置多个组件,智慧显示第一个元素。

Fit布局

如果从复杂度来说fit布局应该算是最简单的了,设置是最少的。Fit布局同样也是设置父容器的layout属性,但是子容器不用设置任何相应属性。它的目的就是为了让子容器能够自适应于父容器(用了fit布局子容器设置宽度无效),但是请注意如果父容器有多个子容器,只会显示第一个。

var pnSub1=new Ext.Panel({
 title:"子panel1",
 html:"子panel1(会显示)"
});
var pnSub2=new Ext.Panel({
 title:"子panel2",
 html:"子panel2(不会显示)"
});
var pn=new Ext.Panel({
 renderTo:"divPanel",
 title:"父panel",
 width:800,
 height:200,
 layout:"fit",
 items:[
  pnSub1,
  pnSub2
 ]
});

最典型的用处也就是在一个window或panel中放置一个grid组件,让grid组件大小会随着父容器的大小而改变。

Table布局

Table布局多数用在较为复杂的情况下,想一想做web开发总不能就上面几种简单情况吧,因此也就是说Table布局还是很常用的。当然,但是和其他布局相比其参数设置也稍微一些(不用怕,事实上还是很少的)。

new Ext.Panel({
 title:"父Panel",
 renderTo:"divPanel",     
 width:900,
 height:200,
 layout:"table",
 layoutConfig:{
  columns:3     
 },
 defaults:{
  height:100,
  width:300
 },
 items:[
  {
   html:"第一个子panel(行:1,列:1)",
   rowspan:2,//合并行
   height:200
  },
  {
   html:"第二个子panel(行:1,列:2)",
   colspan:2,//合并列
   width:600
  },
  {
   html:"第三个子panel(行:2,列:1)"
  },
  {
   html:"第四个子panel(行:2,列:2)"
  }
 ]
});

2:border布局

Form布局

这个布局是专门为表单而设计的布局方式,当然多数是用在FormPanel中(它也是FormPanel默认的布局方式)。我们前面说过FormPanel但是没有涉及复杂布局,事实实际应用中更多的是较复杂的布局。

new Ext.Panel({
 renderTo:"divPanel",
 title:"这个是Panel",
 width:300,
 height:120,
 bodyStyle:'padding:10',
 layout:"form",
 hideLabels:false,
 labelAlighn:"right",
 defaultType:"textfield",
 items:[
  {fieldLabel:"姓名",name:"name"},
  {fieldLabel:"年龄",name:"age"}
 ]
});
new Ext.FormPanel({
 renderTo:"divPane2",
 title:"这个是FormPanel",
 width:300,
 height:120,
 bodyStyle:'padding:10',
 layout:"form",
 hideLabels:false,
 labelAlighn:"right",
 defaultType:"textfield",
 items:[
  {fieldLabel:"姓名",name:"name"},
  {fieldLabel:"年龄",name:"age"}
 ]
});

从代码我们也可看出来,区别就是对于Panel我们配置了layout为form,从这也能看出来说FormPanel默认的布局就是form布局,所以对于习惯于用Panel而不习惯用FormPanel的朋友尽管用Panel,但是一定要考虑好提交的问题,如果使用panel的话,要做提交可是要一个个获得控件的值的,而FromPanel则不需要。

Ext.onReady(function(){
 var pnRow1=new Ext.Panel({
  border:false,
  layout:'column',
  items:[
   new Ext.Panel({
    columnWidth:.5,
    layout:'form',
    border:false,
    labelWidth:40,
    labelAlign:'right',
    items:[
     {
      xtype:'textfield',
      fieldLabel:'姓名',
      name:'uname',
      anchor:'95%'
     }
    ]
   }),
   new Ext.Panel({
    columnWidth:.3,
    layout:'form',
    border:false,
    labelWidth:40,
    labelAlign:'right',
    items:[
     {
      xtype:'radio',
      fieldLabel:'性别',
      boxLabel:'男',
      name:'sex',
      inputValue:'男',
      checked:true,
      anchor:"95%"
     }
    ]
   }),
   new Ext.Panel({
    columnWidth:.2,
    layout:'form',
    border:false,
    labelWidth:1,
    items:[
     {
      xtype:'radio',
      boxLabel:'女',
      name:'sex',
      inputValue:'女',
      labelSeparator:'',
      anchor:"95%"
     }
    ]
   })
  ]
 });
 var pnRow2=new Ext.Panel({
  layout:'column',
  border:false,
  items:[
   new Ext.Panel({
    columnWidth:.5,
    layout:'form',
    border:false,
    labelWidth:40,
    labelAlign:'right',
    items:[
     {
      xtype:'datefield',
      name:'birthday',
      fieldLabel:'生日',
      anchor:'95%'
     }
    ]
   }),
   new Ext.Panel({
    columnWidth:.5,
    layout:'form',
    border:false,
    labelWidth:40,
    labelAlign:'right',
    items:[
     {
      xtype:'combo',
      name:'study',
      store:['专科','本科','硕士','博士'],
      fieldLabel:'学历',
      anchor:'95%'
     }
    ]
   })
  ]
 });
 var pnRow3=new Ext.Panel({
  layout:'column',
  border:false,
  items:[
   new Ext.Panel({
    columnWidth:.3,
    layout:'form',
    border:false,
    labelWidth:40,
    labelAlign:'right',
    items:[
     {
      xtype:'checkbox',
      name:'hoby',
      inputValue:'computer',
      fieldLabel:'爱好',
      boxLabel:'计算机',
      anchor:'95%'
     }
    ]
   }),
   new Ext.Panel({
    columnWidth:.3,
    layout:'form',
    border:false,
    labelWidth:1,
    labelAlign:'right',
    items:[
     {
      xtype:'checkbox',
      name:'hoby',
      inputValue:'football',
      boxLabel:'足球',
      labelSeparator:'',
      anchor:'95%'
     }
    ]
   }),
   new Ext.Panel({
    columnWidth:.4,
    layout:'form',
    border:false,
    labelWidth:1,
    labelAlign:'right',
    items:[
     {
      xtype:'checkbox',
      name:'hoby',
      intputValue:'tinyTable',
      boxLabel:'乒乓球',
      labelSeparator:'',
      anchor:'95%'
     }
    ]
   })
  ]
 });

 var pnRow4=new Ext.Panel({//当然这里直接在FormPanel中添加TextField就可以了,因为只有一行,但是为了一致以及对齐方便我这里还是放到了panel中
  layout:'form',
  border:false,
  labelWidth:40,
  labelAlign:'right',
  items:[
   {
    xtype:'textfield',
    name:'email',
    fieldLabel:'住址',
    anchor:'98%'
   }
  ]
 });
 var pnRow5=new Ext.Panel({
  layout:'form',
  border:false,
  labelWidth:40,
  labelAlign:'right',
  items:[
   {
    xtype:'htmleditor',
    name:'note',
    fieldLabel:'备注',
    height:200,
    anchor:'98%'
   }
  ]
 });

 new Ext.FormPanel({
  renderTo:"divPanel",
  title:"个人信息录入",
  width:600,
  bodyStyle:'padding:10px',
  layout:"form",
  items:[
   pnRow1,
   pnRow2,
   pnRow3,
   pnRow4,
   pnRow5
  ]
 });
});

Border布局 Border布...

本人觉得大体的框架布局都用它来布局

border布局也成为边界布局,他将页面分割为五个部分:west,east,south,north,center,而他们给参赛region赋值就可以了

north,south只能设置高度,west,east只能设置宽度

center自动变化

参数:spit:true可以手动调整四个区域的大小。

参数:collapsible:true 将激活折叠功能,这时title必须设置,因为折叠按钮时出现在标题部分的。

注意:center部分是必须使用的,而center区域是不允许折叠的。center会自动填充其他区域。无center是会报错。

3:Accordion布局

本文由美高梅游戏平台网站发布于瘦身美容,转载请注明出处:extjs布局(一)

关键词:

上一篇:AngularJS 源码剖析3

下一篇:没有了

频道精选

最火资讯