學(xué)習(xí)ExtJS Column布局
更新時間:2009年10月08日 00:00:24 作者:
ExtJS Column布局使用說明,需要的朋友可以參考下。
一、屬性(構(gòu)造參數(shù))
baseCls:"x-plain" Panel背景色顏色。
layout:"column" Panel進(jìn)行列布局。
在子元素中指定使用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進(jìn)行列布局。
在子元素中指定使用columnWidth或width來指定子元素所占的列寬度。
columnWidth表示使用百分比的形式指定列寬度。
width則是使用絕對象素的方式指定列寬度,在實際應(yīng)用中可以混合使用兩種方式。
二、應(yīng)用舉例
復(fù)制代碼 代碼如下:
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() ;
}) ;
復(fù)制代碼 代碼如下:
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)文章
Extjs3.0 checkboxGroup 動態(tài)添加item實現(xiàn)思路
Extjs3.0中的CheckboxGroup默認(rèn)不能動態(tài)添加item,如需要數(shù)據(jù)動態(tài)創(chuàng)建,試著創(chuàng)建整個CheckboxGroup,而不是動態(tài)添加item,具體實現(xiàn)如下,感興趣的朋友可以了解下2013-08-08ExtJS4 表格的嵌套 rowExpander應(yīng)用
今天做一個grid,里面的數(shù)據(jù)需要帶明細(xì),思來想去還是搞個表格嵌套吧,需要的朋友可以參考下2014-05-05EXTJS內(nèi)使用ACTIVEX控件引起崩潰問題的解決方法
在本人目前的項目中,前端部分完全使用EXTJS基于“One-Page”理念搭建。2010-03-03解決ExtJS在chrome或火狐中正常顯示在ie中不顯示的瀏覽器兼容問題
由于開發(fā)過程中大多用chrome來調(diào)試,很少在ie中調(diào)試(現(xiàn)在兩者都要兼顧),導(dǎo)致最后在ie中頁面不能正常加載,當(dāng)時那個囧啊,看到ie報的錯,我都想哭,連出錯的堆棧信息都沒有(這一點,ie做的真不好),無從下手啊2013-01-01extjs_02_grid顯示本地數(shù)據(jù)、顯示跨域數(shù)據(jù)
這篇文章主要介紹了extjs_02_grid顯示本地數(shù)據(jù)、顯示跨域數(shù)據(jù)的具體實現(xiàn),需要的朋友可以參考下2014-06-06