ExtJS的FieldSet的column列布局
更新時間:2009年11月20日 18:02:20 作者:
ExtJS的FieldSet的column列布局,需要的朋友可以參考下。
以下是自己擴展的FieldSet:
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 : "用戶姓名",
name : 'USER_NAME'
}, {
xtype : 'textfield',
inputType : 'password',
fieldLabel : "用戶密碼",
name : 'PASSWORD'
}, {
xtype : 'textfield',
fieldLabel : "手機號碼",
name : 'MOBILE'
}, {
xtype : 'textfield',
fieldLabel : "手機號碼",
name : 'sss'
},{
xtype : 'textfield',
fieldLabel : "手機號碼",
name : 'eee'
}]
這樣可以實現(xiàn)各個組件固定寬度,并隨著Item個數(shù)的增長而自動延伸,保證整齊效果。
可是,展現(xiàn)的結果總是會出現(xiàn)邊框,每一個組件外面包裹的那個容器都有邊框,非常難看。
其實在列模式的每個容器配置項里加入
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);
}
});
復制代碼 代碼如下:
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 : "用戶姓名",
name : 'USER_NAME'
}, {
xtype : 'textfield',
inputType : 'password',
fieldLabel : "用戶密碼",
name : 'PASSWORD'
}, {
xtype : 'textfield',
fieldLabel : "手機號碼",
name : 'MOBILE'
}, {
xtype : 'textfield',
fieldLabel : "手機號碼",
name : 'sss'
},{
xtype : 'textfield',
fieldLabel : "手機號碼",
name : 'eee'
}]
這樣可以實現(xiàn)各個組件固定寬度,并隨著Item個數(shù)的增長而自動延伸,保證整齊效果。
可是,展現(xiàn)的結果總是會出現(xiàn)邊框,每一個組件外面包裹的那個容器都有邊框,非常難看。
其實在列模式的每個容器配置項里加入
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);
}
});
相關文章
Extjs gridpanel 出現(xiàn)橫向滾動條問題的解決方法
Extjs gridpanel 出現(xiàn)橫向滾動條問題的解決方法,在gridpanel中加入以下代碼即可。2011-07-07Extjs ajax同步請求時post方式參數(shù)發(fā)送方式
一般參數(shù)傳遞通過url后面跟后臺也能取到,不過看到send參數(shù)也可以發(fā)送參數(shù),試驗了一下服務器端接受不到發(fā)送的參數(shù),在firebug里看到發(fā)送的請求post部分是一個串,不太象正常發(fā)送的參數(shù)。2009-08-08Extjs3.0 checkboxGroup 動態(tài)添加item實現(xiàn)思路
Extjs3.0中的CheckboxGroup默認不能動態(tài)添加item,如需要數(shù)據(jù)動態(tài)創(chuàng)建,試著創(chuàng)建整個CheckboxGroup,而不是動態(tài)添加item,具體實現(xiàn)如下,感興趣的朋友可以了解下2013-08-08ExtJs GridPanel簡單的增刪改實現(xiàn)代碼
ExtJs GridPanel中實現(xiàn)增刪改效果的代碼,需要的朋友可以參考下。2010-08-08ext combobox動態(tài)加載數(shù)據(jù)庫數(shù)據(jù)(附前后臺)
這篇文章主要介紹了ext combobox動態(tài)加載數(shù)據(jù)庫數(shù)據(jù)并附前后臺實現(xiàn),需要的朋友可以參考下2014-06-06