Question

ext4中表格如何显示竖线

Answer 1

//显示图表
function displayInnerChart(renderId) {
    innerChart = Ext.create('Ext.chart.Chart', {
        renderTo: renderId,
        width: 800,
        height: 300,
        animate: true,
        store: 'com.huawei.drp.jmr.YysInfectStore',
        axes: [
            {
                type: 'Numeric',
                position: 'left',
                fields: ['infectNum'],
                label: {
                    renderer: Ext.util.Format.numberRenderer('0,0')
                },
                title: '感染主机数',
                grid: true,
                minimum: 0
            },
            {
                type: 'Category',
                position: 'bottom',
                fields: ['date'],
                title: '全部运营商感染主机数趋势'
            }
        ],
        series: [
            {
                type: 'line',
                highlight: {
                    size: 7,
                    radius: 5
                },
                axis: 'left',
                xField: 'date',
                yField: 'infectNum',
                markerConfig: {
                    type: 'circle',
                    size: 4,
                    radius: 3,
                    'stroke-width': 0
                }
            }
        ]
    });

    innerChart.getEl().swallowEvent([
                'mousedown', 'mouseup', 'click',
                'contextmenu', 'mouseover', 'mouseout',
                'dblclick', 'mousemove'
            ]);

}

//销毁图表
function destroyInnerChart(record) {

    var parent = document.getElementById(record.get('pkid'));
    var child = parent.firstChild;

    while (child) {
        child.parentNode.removeChild(child);
        child = child.nextSibling;
    }

}

Ext.define('App.view.com.huawei.drp.jmr.YysInfectView', {
    extend: 'Ext.form.Panel',
    alias: 'widget.YysInfectView',
    border: false,
    autoScroll: true,
    bodyPadding : 5, //与边界的距离
    items: [{
        title: '过滤条件',
        xtype: 'fieldset',
        layout: {
            type: 'table', //table布局
            columns: 4
        },
        defaultType: 'textfield',
        items: [{
            fieldLabel: '时间粒度',
            xtype: 'combobox',
            name: 'time',
            store: Ext.create('Ext.data.ArrayStore', {
                fields: ['timeId', 'time'],
                data : [ [ 1, '天' ], 
                         [ 2, '月' ] ]
            }),
            valueField: 'timeId',
            displayField: 'time',
            typeAhead: true,
            queryMode: 'local',
            value : 1,
            margin: '0, 100%, 10, 10'
        }, {
            fieldLabel: '开始时间',
            name: 'startTime',
            xtype: 'datefield',
            format : 'Y-m-d',
            margin: '0, 100%, 10, 10'
        }, {
            fieldLabel: '结束时间',
            name: 'endTime',
            xtype: 'datefield',
            format : 'Y-m-d',
            margin: '0, 100%, 10, 10'
        }, {
            xtype : 'component',
            border: false
        }, {
            fieldLabel: '恶意代码类型',
            xtype: 'combobox',
            name: 'virisType',
            store: Ext.create('Ext.data.ArrayStore', {
                fields: ['typeId', 'typeName'],
                data : [ [ 0, '全部' ],
                         [ 1, '僵尸' ], 
                         [ 2, '木马' ],
                         [ 3, '蠕虫' ] ]
            }),
            valueField: 'typeId',
            displayField: 'typeName',
            typeAhead: true,
            queryMode: 'local',
            value: 0,
            margin: '0, 100%, 10, 10'
        }, {
            fieldLabel: '分析对象',
            xtype: 'combobox',
            name: 'analyze',
            store: Ext.create('Ext.data.ArrayStore', {
                fields: ['analyzeId', 'analyzeName'],
                data : [ [ 0, '全部' ],
                         [ 1, '中国移动' ],
                         [ 2, '中国电信' ],
                         [ 3, '中国铁通' ],
                         [ 4, '中国联通' ] ]
            }),
            valueField: 'analyzeId',
            displayField: 'analyzeName',
            typeAhead: true,
            queryMode: 'local',
            value: 0,
            margin: '0, 100%, 10, 10'
        }, {
            xtype : 'component',
            border: false
        }, {
            xtype : 'button',
            width : 100,
            text  : '查询',
            margin: '0, 100%, 10, 0'
        }]
    }, {
        xtype: 'grid',
        border: true,
        title: '感染主机分布',
        store: 'com.huawei.drp.jmr.YysInfectStore',
        columns: [
            {text: '运营商', dataIndex: 'carriers', flex: 1},
            {text: '感染主机数（台）', dataIndex: 'infectNum', flex: 1},
            {text: '环比上一周期情况', dataIndex: 'compPer', flex: 1},
            {text: '占比', dataIndex: 'percent', flex: 1}
        ],
        
        plugins: [{
            ptype: 'rowexpander',
            rowBodyTpl: new Ext.XTemplate(
                    '<div id="{pkid}"></div>'
                    )
        }],
        
//        另一种实现展开表格行，显示图表的方式
//        viewConfig : {
//            listeners : {
//                expandbody : function( rowNode, record, expandRow, eOpts ){
//                    alert('expandbody1');
//                    displayInnerChart('divId');
//                },
//                collapsebody: function( rowNode, record, expandRow, eOpts ){
//                    alert('collapsebody2');
//                    destroyInnerChart(record);
//                }
//            }
//        },

        bbar: {
            xtype: 'pagingtoolbar',
            store: 'com.huawei.drp.jmr.YysInfectStore',
            dock: 'bottom',
            displayInfo: true
        }
    }]
});

Answer 2

单元格格式,边框点竖线