javascript - Extjs 网格 colspan 和行跨度

Question

我想知道有什么方法可以合并 extjs 网格的两个单元格。

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

Answer 1

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

• 对于 Lisa，它跨越 Email 和 Phone。
• 对于 Bart，这是一个没有跨度的普通行
• 对于 Homer，它跨越 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()
});