学习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} ] }) }) ;

　　推荐阅读

　　JQuery与Ajax常用代码实现对比

传统ajax Code 复制代码代码如下: <script language="javascript"> var xmlHttp; function createXMLHttpRequest(){ if(window.ActiveXObject) xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); else if(windo>>>详细阅读

本文标题：学习ExtJS Column布局

地址：http://www.17bianji.com/kaifa2/JS/28021.html

1/2 1