zoukankan      html  css  js  c++  java
  • 关于extjs表单布局的几种方式

    一、用column布局

    layout:'column',
        defaults:{
            style:'float:left;margin:4px;',
            columnWidth: 0.49,
            msgTarget: 'side'
        },
    
        defaultType:'textfield',
        fieldDefaults:{
            labelAlign:'right',
            labelWidth:84                                 
        },
    
        items:[
            {
                allowBlank: false,
                fieldLabel: '上级编码',
                name: 'parentOrganizationCode',
            },
            {
                fieldLabel: '状态',
                name: 'enable',
            },
            {
                allowBlank: false,
                fieldLabel: '组织架构编码',
                name: 'organizationCode'
            },
            {
                allowBlank: false,
                fieldLabel: '组织架构名称',
                name: 'organizationName',
            },
            {
                fieldLabel: '联系人',
                name: 'contactName',
            },
            {
                fieldLabel: '联系方式',
                name: 'contactPhone',
            },
            {
                fieldLabel: '地址',
                name: 'contactAddress',
                columnWidth: 0.98
            },
            {
                fieldLabel: '备注',
                name: 'note',
                columnWidth: 0.98
            }
        ]

    二、anchor套hbox布局

    items: [{
                    xtype: 'fieldset',
                    title: 'Your Contact Information',
                    defaultType: 'textfield',
                    layout: 'anchor',
                    defaults: {
                        anchor: '100%'
                    },
                    items: [{
                        xtype: 'fieldcontainer',
                        fieldLabel: 'Name',
                        layout: 'hbox',
                        combineErrors: true,
                        defaultType: 'textfield',
                        defaults: {
                            hideLabel: 'true'
                        },
                        items: [{
                            name: 'firstName',
                            fieldLabel: 'First Name',
                            flex: 2,
                            emptyText: 'First',
                            allowBlank: false
                        }, {
                            name: 'lastName',
                            fieldLabel: 'Last Name',
                            flex: 3,
                            margin: '0 0 0 6',
                            emptyText: 'Last',
                            allowBlank: false
                        }]
                    }, {
                        xtype: 'container',
                        layout: 'hbox',
                        defaultType: 'textfield',
                        margin: '0 0 5 0',
                        items: [{
                            fieldLabel: 'Email Address',
                            name: 'email',
                            vtype: 'email',
                            flex: 1,
                            allowBlank: false
                        }, {
                            fieldLabel: 'Phone Number',
                            labelWidth: 100,
                            name: 'phone',
                            width: 200,
                            emptyText: 'xxx-xxx-xxxx',
                            maskRe: /[d-]/,
                            regex: /^d{3}-d{3}-d{4}$/,
                            regexText: 'Must be in the format xxx-xxx-xxxx'
                        }]
                    }]
                }

    三、column套form布局

     layout: 'column',
        
        defaults: {
            layout: 'form',
            xtype: 'container',
            defaultType: 'textfield',
            style: ' 50%'
        },
        
        items: [{
            items: [
                { fieldLabel: 'First Name' },
                { fieldLabel: 'Last Name' },
                { fieldLabel: 'Phone Number' },
                { fieldLabel: 'Email Address' }
            ]
        }, {
            items: [
                { fieldLabel: 'Street Address 1' },
                { fieldLabel: 'Street Address 2' },
                { fieldLabel: 'City, State' },
                { fieldLabel: 'ZIP code' }
            ]
        }],

    ------------------------------------------------

    着急记一下,写的不清楚,有时间再改一下

  • 相关阅读:
    通过 ANE(Adobe Native Extension) 启动Andriod服务 推送消息(三)
    通过 ANE(Adobe Native Extension) 启动Andriod服务 推送消息(二)
    stepper组件使用
    解决循环删除list中元素ConcurrentModificationException异常问题
    简单选择排序SelectSort
    用js写出简单的计算器
    在一个项目中,添加.js文件出现错误
    弹出当前值以及修改
    映射:表之间的关联
    置换(用递归的方法执行置换)
  • 原文地址:https://www.cnblogs.com/MaiJiangDou/p/7374698.html
Copyright © 2011-2022 走看看