Question

我想知道有没有办法合并extjs网格的两个单元格。

I uploded the image. Pls look into this

Ext.getCmp('grdHeaderTemplate').getView().getCell(0,1).dom.colSpan=2

Answer 1

在不知道任何更多细节的情况下，我认为您是在要求类似this的内容。基本上，这会禁止渲染器中的某些虚拟数据来说明这一点。

对于Lisa，它跨越Email和Phone。
对于Bart，这是没有跨度的普通行
对于荷马，它跨越Phone，Alt Phone和Alt Name

CSS很小，但是将表的宽度更改为100％可能会产生一些副作用，但这绝对至关重要。

.adjust-columns .span-columns {
    width: auto !important;
}

.adjust-columns .x-grid-item {
    /* This is pretty key... the framework sets a width of 0 on the table rows,
     * so this could have some other side effects */
    width: 100% !important;
}

.adjust-columns .hide-column {
    display: none;
}

就像我说的那样，在JS中，我确定要在列渲染器中应用哪个类/ colspan。

Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields: ['name', 'email', 'phone'],
    data: [{
        name: 'Lisa',
        email: 'This should span the email and phone columns',
        phone: 'test',
        altName: 'Daughter'
    }, {
        name: 'Bart',
        email: 'bart@simpsons.com',
        phone: '222-111-1224',
        altName: 'Son'
    }, {
        name: 'Homer',
        email: 'homer@simpsons.com',
        phone: 'This should span the Phone, Alt Phone, and Alt Name columns',
        altName: 'Dad'
    }]
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    cls: 'adjust-columns',
    columnLines: true,
    columns: [{
        text: 'Name',
        dataIndex: 'name'
    }, {
        text: 'Email',
        dataIndex: 'email',
        flex: 1,
        renderer: function (value, metaData, record) {
            var name = record.get('name');
            if (name === 'Lisa') {
                metaData.tdCls = 'span-columns';
                metaData.tdAttr = 'colspan=2'
            }
            return value;
        }
    }, {
        text: 'Phone',
        dataIndex: 'phone',
        renderer: function (value, metaData, record, rowIdx, colIdx, store, view) {
            var name = record.get('name');
            if (name === 'Lisa') {
                metaData.tdCls = 'hide-column'
                return;
            } else if (name === 'Homer') {
                metaData.tdCls = 'span-columns';
                metaData.tdAttr = 'colspan=3';
            }
            return value;
        }
    }, {
        text: 'Alt Phone',
        dataIndex: 'phone',
        renderer: function (value, metaData, record, rowIdx, colIdx, store, view) {
            var name = record.get('name');
            if (name === 'Homer') {
                metaData.tdCls = 'hide-column'
                return;
            }
            return value;
        }
    }, {
        text: 'Alt Name',
        dataIndex: 'altName',
        renderer: function (value, metaData, record, rowIdx, colIdx, store, view) {
            var name = record.get('name');
            if (name === 'Homer') {
                metaData.tdCls = 'hide-column'
                return;
            }
            return value;
        }
    }],
    height: 200,
    width: 600,
    renderTo: Ext.getBody()
});

Extjs网格colspan和行跨度

1 个答案: