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);
});