学习ExtJS Column布局

  一、属性(构造参数)

  baseCls:"x-plain" Panel背景色颜色。

  layout:"column" Panel进行列布局。

  在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。

  columnWidth表示使用百分比的形式指定列宽度。

  width则是使用绝对象素的方式指定列宽度,在实际应用中可以混合使用两种方式。

  二、应用举例

  

复制代码 代码如下:

  Ext.onReady(function(){

  new Ext.Window({

  title:"新增",

  width:500,

  height:400,

  plain:true,

  layout:"form",

  labelWidth:55,

  items:[{

  layout:"column",

  baseCls:"x-plain",

  style:"padding:5px",

  items:[{

  columnWidth:.5,

  layout:"form",

  labelWidth:50,

  baseCls:"x-plain",

  items:[{

  xtype:"textfield",

  fieldLabel:"姓名"

  },{

  xtype:"textfield",

  fieldLabel:"姓名"

  },{

  xtype:"textfield",

  fieldLabel:"姓名"

  },{

  xtype:"textfield",

  fieldLabel:"姓名"

  }]

  },{

  columnWidth:.5,

  layout:"form",

  items:[{

  id:"name",

  xtype:"textfield",

  fieldLabel:"照片",

  inputType:"image",

  width:250,

  height:50

  }]

  }]

  },{

  xtype:"textfield",

  fieldLabel:" 证号"

  }],

  showlock:false,

  listeners:{

  "show":function(_window){

  if f(!_window["showLock"]){

  Ext.getCmp("name").getEl().dom.src = "default_pic.gif" ;

  _window.findByType("textfield")[4].getEl().dom.src = "default_pic.gif" ;

  // alert(_window.findByType("textfield")[4].fieldLabel);

  _window["showLock"]=true;

  }

  }

  },

  buttons:[{text:"确定"},{text:"取消"}]

  }).show() ;

  }) ;

  

复制代码 代码如下:

  Ext.onReady(function(){

  var _panel = new Ext.Panel({

  title:"人员信息",

  renderTo:Ext.getBody(),

  frame:true,

  width:500,

  height:300,

  layout:"column",

  items:[{title:"列1",width:200},

  {title:"列2",columnWidth:.3},

  {title:"列3",columnWidth:.3},

  {title:"列4",columnWidth:.4}

  ]

  })

  }) ;