ExtJS的FieldSet的column列布局
程序员文章站
2022-03-07 11:07:30
以下是自己扩展的fieldset: 复制代码 代码如下: me.base.fieldset = ext.extend(ext.form.fieldset, { layout...
以下是自己扩展的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'
}]
这样可以实现各个组件固定宽度,并随着item个数的增长而自动延伸,保证整齐效果。
可是,展现的结果总是会出现边框,每一个组件外面包裹的那个容器都有边框,非常难看。
其实在列模式的每个容器配置项里加入
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'
}]
这样可以实现各个组件固定宽度,并随着item个数的增长而自动延伸,保证整齐效果。
可是,展现的结果总是会出现边框,每一个组件外面包裹的那个容器都有边框,非常难看。
其实在列模式的每个容器配置项里加入
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);
}
});
推荐阅读
-
DIV+CSS三列式布局的实现方法_html/css_WEB-ITnose
-
css3 column实现卡片瀑布流布局的示例代码
-
css3 column实现卡片瀑布流布局的示例代码
-
Web页面中八种创建多列等高(等高列布局)的实现技术
-
脚本控制三行三列自适应高度DIV布局的代码
-
使用CSS3实现多列布局与多背景的技巧
-
3种常见的css页面布局--双飞翼布局、粘连布局、左右两列布局
-
Flutter学习笔记(23)--多个子元素的布局Widget(Rwo、Column、Stack、IndexedStack、Table、Wrap)
-
Web页面中八种创建多列等高(等高列布局)的实现技术
-
css常见的各种布局下----三列布局