注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

风之泪

风过雨过,花开花落。。。

 
 
 

日志

 
 

Ext-布局  

2010-07-28 10:51:07|  分类: extjs |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

1 Border布局
示例代码:

Ext.onReady({function(){
    borderlayout();
}});

//border布局,一般使用viewport,viewport一个页面只能有一个
//doLayout 动态添加子组件后需要使用doLayout()重新加载一下
function borderlayout(){
 new Ext.Viewport({
  renderTo:Ext.getBody(),
  layout:"border",
  items:[
   {region:"north",title:"顶部",height:50},
   {region:"south",title:"底部",height:50},
   {region:"west",title:"左边",width:100},
   {region:"east",title:"右边",widht:100},
   {region:"center",title:"中间"}
  ]
 });
}

2 colunm布局
示例代码:
//column布局

Ext.onReady({
    columnlayout();
});

function columnlayout(){
 new Ext.Panel({
  renderTo:Ext.getBody(),
  width:400,
  height:200,
  layout:"column",
  items:[
   {columnWidth:.5,title:"面板1"}, //每个面板占上面Panel组件的50%宽度
   {columnWidth:.5,title:"面板2"}]
 })
}

 3 fit布局

Ext.onReady(function(){
   fitlayout();
});

function fitlayout(){
 new Ext.Panel({
  renderTo:Ext.getBody(),
  layout:"fit",
  width:500,  //注意指定fit容器的宽度高度
  height:100,
  items:[
   {title:"子元素1",html:"这是子元素1"}, //注意:此时指定的宽度就无效了
   {title:"子元素2",html:"这是子元素2"} //注意fit布局只能显示一个子元素
  ]
 });
}

4 form布局

Ext.onReady({

   formlayout();
   formpanel();
});
function formlayout(){
 new Ext.Panel({
  renderTo:Ext.getBody(),
  title:"容器组件",
  width:300,
  layout:"form",
  hideLabels:false,
  labelAlign:"right",
  height:120,
  defaultType:"textfield",
  items:[
   {fieldLabel:"姓名",name:"name"},
   {fieldLabel:"地址",name:"address"},
   {fieldLabel:"电话",name:"tel"}
  ]
 })
}

//在实际中一般使用Ext.form.FormPanel这个类,其默认布局即为Form,且还会创建于<form>标签相关组件
//上面例子可改写成

function formpanel(){
  new Ext.FormPanel({
   renderTo:Ext.getBody(),
   title:"容器组件",
   width:300,
   labelAlign:"right",
   height:120,
   defaultType:"textfield",
   items:[
    {fieldLabel:"姓名",name:"name"},
    {fieldLabel:"地址",name:"address"},
    {fieldLabel:"电话",name:"tel"}
   ]
  })
}

5 accordionlayout布局

Ext.onReady({
    accordionlayout();
});

function accordionlayout(){
 new Ext.Panel({
  renderTo:Ext.getBody(),
  title:"容器组件",
  width:500,
  height:200,
  layout:"accordion",
  layoutConfig:{animate:true}, //展开时的动态效果
  items:[
   {title:"子元素1",html:"这是子元素1的内容"},
   {title:"子元素2",html:"这是子元素2的内容"}
  ]
 })
}

6 table布局

//table布局类似html的布局方式
Ext.onReady({

  tablelayout();
});
function tablelayout(){
 var panel=new Ext.Panel({
  renderTo:Ext.getBody(),
  title:"容器组件",
  width:500,
  height:200,
  layout:"table",
  layoutConfig:{columns:3},
  items:[
  {title:"子元素1",html:"这是子元素1的内容",rowspan:2},
  {title:"子元素2",html:"这是子元素2的内容",colspan:2},
  {title:"子元素3",html:"这是子元素3的内容"},
  {title:"子元素3",html:"这是子元素3的内容"}
  ]
 })
}

  评论这张
 
阅读(368)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017