學習ExtJS Column布局
更新時間：2009年10月08日 00:00:24 作者：
ExtJS Column布局使用說明，需要的朋友可以參考下。
一、屬性（構(gòu)造參數(shù)）
baseCls:"x-plain" Panel背景色顏色。
layout:"column" Panel進行列布局。
在子元素中指定使用columnWidth或width來指定子元素所占的列寬度。
columnWidth表示使用百分比的形式指定列寬度。
width則是使用絕對象素的方式指定列寬度，在實際應(yīng)用中可以混合使用兩種方式。
二、應(yīng)用舉例
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}
]
})
}) ;
baseCls:"x-plain" Panel背景色顏色。
layout:"column" Panel進行列布局。
在子元素中指定使用columnWidth或width來指定子元素所占的列寬度。
columnWidth表示使用百分比的形式指定列寬度。
width則是使用絕對象素的方式指定列寬度，在實際應(yīng)用中可以混合使用兩種方式。
二、應(yīng)用舉例
復制代碼 代碼如下:
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}
]
})
}) ;
相關(guān)文章
昨天剛接觸到Extjs，簡單寫了篇學習筆記，今天繼續(xù)。2008-12-12
Extjs優(yōu)化(二)Form表單提交通用實現(xiàn)
本文就將演示下一個實例使用該代碼只需要13行代碼 原始需要25-30行代碼搞定，感興趣的朋友可以參考下哈，希望可以幫助到你2013-04-04
Extjs中使用extend(js繼承) 的代碼，抄<深入淺出Extjs>書2012-03-03
extjs4 treepanel動態(tài)改變行高度示例
本文為大家介紹下extjs4 treepanel如何動態(tài)改變行高度，下面有個不錯的示例，感興趣的朋友可以參考下2013-12-12
這段時間手中項目已經(jīng)完成，空閑時間較多。開始了學習ExtJs之旅。2010-11-11
Extjs 3.3切換tab隱藏相應(yīng)工具欄出現(xiàn)空白解決
在切換tabpanel的時候，把相應(yīng)的工具欄隱藏掉，結(jié)果出現(xiàn)空白，先熊板板的空白不過后來終于解決，接下來與大家分享下解決技巧，感興趣的朋友可以參考下哈2013-04-04
在ExtJS4中使用mixins來實現(xiàn)多繼承，下面有個不錯的示例，感興趣的朋友可以參考下2013-12-12
首先簡單介紹一下ExtJs中的Date基本上就是PHP date函數(shù)的一個子集，表征了一個日期對象。廢話到此為止。2010-12-12
接下來為大家介紹下GridPanel的幾種樣式及選擇模式分類介紹，感興趣的朋友可以參考下哈2013-04-04
ExtJS accordion布局使用說明，需要的朋友可以參考下。2009-10-10