ExtJS layout的9种样式详解(二)

wjt276

例二：Ext.onReady(function() {   var i = 0;      var navHandler = function(direction) {   if (direction == -1) {   i--;   if (i < 0) { i = 0; }   }      if (direction == 1) {   i++;   if (i > 2) { i = 2; return false; }   }var btnNext = Ext.get("move-next");   var btnBack = Ext.get("move-next");   if (i == 0) {   btnBack.disabled = true;   } else {   btnBack.disabled = false;   }   if (i == 2) {   btnNext.value = "完成";   btnNext.disabled = true;   } else {   btnNext.value = "下一步";   btnNext.disabled = false;   }card.getLayout().setActiveItem(i);   };      var card = new Ext.Panel({   width: 200,   height: 200,   title: '注册向导',   layout: 'card',   activeItem: 0, // make sure the active item is set on the container config!   bodyStyle: 'padding:15px',   defaults: {   border: false   },   bbar: [   {   id: 'move-prev',   text: '上一步',   handler: navHandler.createDelegate(this, [-1])                       },   '->',   {   id: 'move-next',   text: '下一步',   handler: navHandler.createDelegate(this, [1])   }   ],   items: [{   id: 'card-0',   html: '<h1>欢迎来到注册向导!</h1><p>Step 1 of 3</p>'   }, {   id: 'card-1',   html: '<h1>请填写注册资料!</h1><p>Step 2 of 3</p>'   }, {   id: 'card-2',   html: '<h1>注册成功!</h1><p>Step 3 of 3 - Complete</p>'   }],   renderTo: "container"   });   }); 

 

六、column列布局由Ext.layout.ColumnLayout类定义，名称为column。列布局把整个容器组件看成一列，然后往里面放入子元素的时候，可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。columnWidth表示使用百分比的形式指定列宽度，而width则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。看下面的代码：

例一：

Ext.onReady(function(){ new Ext.Panel({renderTo:"hello",title:"容器组件",layout:"column",width:500,height:100,items:[{title:"列1",width:100},{title:"列2",width:200},{title:"列3",width:100},{title:"列4",width:95}]});}); 
上面的代码在容器组件中放入了四个元素，在容器组件中形成4列，列的宽度分别为100,200,100及剩余宽度，执行结果如

 
 

例二：columnWidth来定义子元素所占的列宽度(注意columnWidth的总和应该为1)

Ext.onReady(function(){ new Ext.Panel({renderTo:"hello",title:"容器组件",layout:"column",width:500,height:100,items:[{title:"列1",columnWidth:0.2},    {title:"列2",columnWidth:0.3},    {title:"列3",columnWidth:0.3},   {title:"列4",columnWidth:0.2}]});});

 

 例三：column和columnWidth的混合使用

Ext.onReady(function(){ new Ext.Panel({renderTo:"hello",title:"容器组件",layout:"column",width:500,height:100,items:[{title:"列1",width:200},{title:"列2",columnWidth:0.3},{title:"列3",columnWidth:0.3},{title:"列4",columnWidth:0.4}]});});

 

 

例四．

Ext.onReady(function() {   var win = new Ext.Window({   title: "Column Layout",   height: 300,   width: 400,   plain: true,   layout: 'column',   items: [{   title:"width=50%",   columnWidth:0.5,   html:"width=(容器宽度-容器内其它组件固定宽度)*50%",   height:200   },   {   title:"width=250px",   width: 200,   height:100,   html:"固定宽度为250px"   }               ]   });   win.show();