• 技术文章 >web前端 >js教程

    ExtJS的FieldSet的column列布局_extjs

    2016-05-16 18:41:30原创574
    以下是自己扩展的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);
    }
    });
    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:ExtJS column 列布局
    上一篇:传智播客学习之java 反射_javascript技巧 下一篇:JavaScript 读取图片实例代码_javascript技巧
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• 浅析node中path路径模块的一些API• 什么是状态?深入学习angular中的动画• angular学习之详解状态管理器NgRx• JavaScript字符串常见基础方法精讲• angular学习之浅析HttpClientModule模块
    1/1

    PHP中文网