ExtJS的FieldSet的column列布局
ME.Base.FieldSet = Ext.extend(Ext.form.FieldSet, {
layout: 'column',
fieldSetItems: [],
autoScroll:false,
defaults: {
layout: 'form',
labelAlign: 'right',
labelWidth: 65,
columnWidth: .25,
defaults: {
anchor: '96%'
}
},
initComponent: function(){
var thisItems = new Array();
var itemsLen = this.fieldSetItems.length;
if(itemsLen > 0){
for (var i = 0; i < itemsLen; i++){
thisItems[thisItems.length] = {
items: this.fieldSetItems[i]
}
}
}
this.items = thisItems;
ME.Base.FieldSet.superclass.initComponent.call(this);
}
});
new ME.Base.FieldSet({
title: '基本信息',
autoHeight: true,
fieldSetItems: [{
xtype : 'textfield',
fieldLabel : "用戶(hù)姓名",
name : 'USER_NAME'
}, {
xtype : 'textfield',
inputType : 'password',
fieldLabel : "用戶(hù)密碼",
name : 'PASSWORD'
}, {
xtype : 'textfield',
fieldLabel : "手機(jī)號(hào)碼",
name : 'MOBILE'
}, {
xtype : 'textfield',
fieldLabel : "手機(jī)號(hào)碼",
name : 'sss'
},{
xtype : 'textfield',
fieldLabel : "手機(jī)號(hào)碼",
name : 'eee'
}]
這樣可以實(shí)現(xiàn)各個(gè)組件固定寬度,并隨著Item個(gè)數(shù)的增長(zhǎng)而自動(dòng)延伸,保證整齊效果。
可是,展現(xiàn)的結(jié)果總是會(huì)出現(xiàn)邊框,每一個(gè)組件外面包裹的那個(gè)容器都有邊框,非常難看。
其實(shí)在列模式的每個(gè)容器配置項(xiàng)里加入
xtype: 'container',
autoEl: {},
即可:
ME.Base.FieldSet = Ext.extend(Ext.form.FieldSet, {
layout: 'column',
fieldSetItems: [],
autoScroll:false,
defaults: {
xtype: 'container',
autoEl: {},
layout: 'form',
labelAlign: 'right',
labelWidth: 65,
columnWidth: .25,
defaults: {
anchor: '96%'
}
},
initComponent: function(){
var thisItems = new Array();
var itemsLen = this.fieldSetItems.length;
if(itemsLen > 0){
for (var i = 0; i < itemsLen; i++){
thisItems[thisItems.length] = {
items: this.fieldSetItems[i]
}
}
}
this.items = thisItems;
ME.Base.FieldSet.superclass.initComponent.call(this);
}
});
相關(guān)文章
ExtJs Excel導(dǎo)出并下載IIS服務(wù)器端遇到的問(wèn)題
進(jìn)項(xiàng)目一個(gè)多月不到。熟悉了這個(gè)二次開(kāi)發(fā)的項(xiàng)目因?yàn)榍懊孢z留下來(lái)的問(wèn)題比較嚴(yán)重報(bào)表的導(dǎo)出和圖表以及打印功能都沒(méi)有實(shí)現(xiàn),所以這兩天工作量比較大。2011-09-09Extjs gridpanel 出現(xiàn)橫向滾動(dòng)條問(wèn)題的解決方法
Extjs gridpanel 出現(xiàn)橫向滾動(dòng)條問(wèn)題的解決方法,在gridpanel中加入以下代碼即可。2011-07-07ExtJS4 表格的嵌套 rowExpander應(yīng)用
今天做一個(gè)grid,里面的數(shù)據(jù)需要帶明細(xì),思來(lái)想去還是搞個(gè)表格嵌套吧,需要的朋友可以參考下2014-05-05Extjs ajax同步請(qǐng)求時(shí)post方式參數(shù)發(fā)送方式
一般參數(shù)傳遞通過(guò)url后面跟后臺(tái)也能取到,不過(guò)看到send參數(shù)也可以發(fā)送參數(shù),試驗(yàn)了一下服務(wù)器端接受不到發(fā)送的參數(shù),在firebug里看到發(fā)送的請(qǐng)求post部分是一個(gè)串,不太象正常發(fā)送的參數(shù)。2009-08-08入門(mén)基礎(chǔ)學(xué)習(xí) ExtJS筆記(一)
這段時(shí)間手中項(xiàng)目已經(jīng)完成,空閑時(shí)間較多。開(kāi)始了學(xué)習(xí)ExtJs之旅。2010-11-11Extjs3.0 checkboxGroup 動(dòng)態(tài)添加item實(shí)現(xiàn)思路
Extjs3.0中的CheckboxGroup默認(rèn)不能動(dòng)態(tài)添加item,如需要數(shù)據(jù)動(dòng)態(tài)創(chuàng)建,試著創(chuàng)建整個(gè)CheckboxGroup,而不是動(dòng)態(tài)添加item,具體實(shí)現(xiàn)如下,感興趣的朋友可以了解下2013-08-08ExtJs GridPanel簡(jiǎn)單的增刪改實(shí)現(xiàn)代碼
ExtJs GridPanel中實(shí)現(xiàn)增刪改效果的代碼,需要的朋友可以參考下。2010-08-08ExtJs擴(kuò)展之GroupPropertyGrid代碼
這幾天做一個(gè)Web項(xiàng)目,使用了ExtJs,其中有個(gè)像設(shè)計(jì)器一樣的界面,選擇界面上的內(nèi)容,可以直接編輯內(nèi)容的屬性,這個(gè)原本來(lái)說(shuō)對(duì)于使用ExtJs還是很簡(jiǎn)單的。2010-03-03ext combobox動(dòng)態(tài)加載數(shù)據(jù)庫(kù)數(shù)據(jù)(附前后臺(tái))
這篇文章主要介紹了ext combobox動(dòng)態(tài)加載數(shù)據(jù)庫(kù)數(shù)據(jù)并附前后臺(tái)實(shí)現(xiàn),需要的朋友可以參考下2014-06-06