Extjs的layout

1.layout常用的选项

选项	值	说明
split	true/false	布尔值,决定是否在两个区域间放置可拖拽分割线。
collapsible	true/false	布尔值,向标题栏中添加一个按钮,用户可以通过单击来收起一个区域。
collapseMode	只有”mini”一种 mode(模式),对于其他 mode,值为 undefined	当设置为“mini”时候,分割线上会出现一个收起按钮,点击后,会将面板缩起来
title	String	标题栏中的标题。
bodyStyle	CSS	Panel 的 body 元素的 CSS 样式。
minsize	像素	用户可以把 panel 拖拽的最小值。
maxsize	像素	用户可以把 panel 拖拽的最大值。
margins	按照上右下左的顺寻设置的像素值	Panel 和边缘的距离,添加的空白处panel 的 body之外。
cmargins	同上	和 margins 的思想一样,但是只应用于 panel 收起之后。

2.layout页面,页面有什么效果直接在相应的快添加代码.

var viewport = new Ext.Viewport({ 
  layout: 'border', 
  renderTo: Ext.getBody(), 
  items: [{   
     region: 'north', 
     xtype: 'panel', 
     html: 'North' 
  },{      region: 'west', 
    xtype: 'panel', 
    split: true, 
    width: 200, 
    html: 'West' 
  },{      region: 'center', 
    xtype: 'panel', 
    html: 'Center' 
  },{      region: 'east', 
    xtype: 'panel', 
    split: true, 
    width: 200, 
    html: 'East' 
  },{      region: 'south', 
    xtype: 'panel', 
    html: 'South' 
  }]  
});

3.panel中增加内容

{ 
  region: 'center', 
  xtype: 'tabpanel', 
  activeTab: 0, //默认显示第一个
  items: [{ //第一个
    title: 'Movie Grid', 
    xtype: 'gridpanel', 
    store: store, 
    autoExpandColumn: 'title', 
    columns: // add column model //, 
    view: // add grid view spec // 
  },{ //第二个     
      title: 'Movie Descriptions', 
      html: 'Movie Info' 
  }]  
}

4.标签上加上图片

bomb { 
 background‐image:url(images/bomb.png) !important; 
} 
{ 
  title: 'The Bomb', 
  iconCls: 'bomb', 
  html: 'Boom!' 
}

5.动态的增加一个面板

Ext.getCmp('movieview').findById('movietabs').add({ 
  title: 'Office Space', 
  html: 'Movie Info' 
});

6.通过id的方式布置页面内容

var viewport = new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
contentEl: 'head'
}, {
region: 'center',
html: 'grid'
}, {
region: 'east',
html: 'form'
}, {
region: 'south',
contentEl: 'foot'
}]
});
<div id="head" style="font-weight:bold;font-size:200%;">学生信息管理</div>

7.下拉框中的值的传递

{
fieldLabel: '性别',
name: 'sexText',
hiddenName: 'sex',//传递到后台的值是value,不然是txt.
xtype: 'combo',
store: new Ext.data.SimpleStore({
fields: ['value','text'],
data: [['1','男'],['2','女']]
}),
emptyText: '请选择',
mode: 'local',
triggerAction: 'all',
valueField: 'value',
displayField: 'text',
readOnly: true
}

猜你喜欢