Extjs表格样式表单制作

展示表单和录入表单都可按此方式实现

效果图如下：

1、定义样式

<style>
    /*table 布局样式 start*/
    .mytable>table{border-collapse: collapse;width:100%;padding-bottom:4px;}/*table-layout: fixed;*/
    .mytable>table .thead{text-align:center;width: 100px;line-height: 1.2em;padding: 4px 0;}
    .mytable>table td,th{border:1px solid #a4a4a4;text-align:center;vertical-align:middle;line-height: 28px;}
    .mytable .x-table-form-item{padding:0;margin:0;width:100%;position: relative;}
    .mytable .x-form-display-field-default {line-height: 1.2em;margin:0;padding:5px;}
    .mytable .x-form-trigger-wrap-default{border:none;}
    .mytable input,.mytable .x-form-display-field-default{text-align:left;}
    .mytable .thead{background-color: #ebebeb;}
    .mytable .placeholder-cell{border-right:none;border-left:none;}
    /*table 布局样式 end*/
</style>

2、示例代码

Ext.define('EquiForm',{
    extend:'Ext.form.Panel',
    xtype:'equiform',
    bodyCls:'mytable',
    layout:{type:'table',columns:8},
    defaults:{xtype:'displayfield'},
    items:[
        /*表格第一行*/
        {xtype:'component',html:'基本信息',cellCls:'thead',colspan:2},
        {xtype:'component',html:'厂家信息',cellCls:'thead',colspan:2},
        {xtype:'component',html:'使用情况',cellCls:'thead',colspan:2},
        {xtype:'component',html:'检修情况',cellCls:'thead',colspan:2},
        /*表格第二行*/
        {xtype:'label',text:'设备编码',tdAttrs:{style:"width:80px;"},cellCls: 'thead' },{name:'fieldName1' },
        {xtype:'label',text:'生产厂家',tdAttrs:{style:"width:80px;"},cellCls: 'thead' },{name:'fieldName2' },
        {xtype:'label',text:'所属单位',tdAttrs:{style:"width:80px;"},cellCls: 'thead' },{name:'fieldName3'},
        {xtype:'label',text:'检验开始日期',tdAttrs:{style:"width:90px;"},cellCls: 'thead' },{name:'fieldName4'},
        /*表格第三行*/
        {xtype:'label',text:'设备名称',tdAttrs:{style:"width:80px;"},cellCls: 'thead' },{name:'fieldName5'},
        {xtype:'label',text:'规格型号',tdAttrs:{style:"width:80px;"},cellCls: 'thead' },{name:'fieldName6' },
        {xtype:'label',text:'安装位置',tdAttrs:{style:"width:80px;"},cellCls: 'thead' },{name:'fieldName7'},
        {xtype:'label',text:'检测结论',tdAttrs:{style:"width:90px;"},cellCls: 'thead' },{name:'fieldName8'},
        /*表格第四行*/
        {xtype:'label',text:'设备类别',tdAttrs:{style:"width:80px;"},cellCls: 'thead' },{name:'fieldName9'},
        {xtype:'label',text:'出厂日期',tdAttrs:{style:"width:80px;"},cellCls: 'thead' },{name:'fieldName10'},
        {xtype:'label',text:'投产日期',tdAttrs:{style:"width:80px;"},cellCls: 'thead' },{name:'fieldName11'},
        {xtype:'label',text:'检验结束日期',tdAttrs:{style:"width:90px;"},cellCls: 'thead' },{name:'fieldName12'},
        /*表格第五行*/
        {xtype:'label',tdAttrs:{style:"width:80px;"},text:'资产编码',cellCls: 'thead' },{name:'fieldName13'},
        {xtype:'label',tdAttrs:{style:"width:80px;"},text:'出厂编码',cellCls: 'thead' },{name:'fieldName14' },
        {xtype:'label',tdAttrs:{style:"width:80px;"},text:'使用状态',cellCls: 'thead' },{name:'fieldName15'},
        {xtype:'label',tdAttrs:{style:"width:90px;"},text:'下次检测日期',cellCls: 'thead' },{name:'fieldName16'}
    ]
});

Ext.onReady(function () {
    var equiform=Ext.create('EquiForm');
    var record=Ext.create('Ext.data.Model',{
        fieldName1:'T-921',
        fieldName2:'某某某某集团某某某某厂',
        fieldName3:'某某单位',
        fieldName4:'2017-03-08',
        fieldName5:'某某设备',
        fieldName6:'YY-SS-XS-001',
        fieldName7:'某某位置',
        fieldName8:'合格',
        fieldName9:'某某类别',
        fieldName10:'1993-10-06',
        fieldName11:'1994-06-01',
        fieldName12:'2017-03-12',
        fieldName13:'NBS-T440P',
        fieldName14:'GBN205',
        fieldName15:'完好',
        fieldName16:'2018-03-12'
    });
    Ext.create('Ext.container.Viewport', {
        layout: 'fit',
        items: [equiform]
    });
    equiform.loadRecord(record);
});

 

转载于:https://www.cnblogs.com/jiawenjun/p/6599363.html