Extjs Grid Colspan и ряд строк

Question

Хотелось бы знать, есть ли способ объединить две ячейки сетки extjs.

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

Answer 1

Не зная каких-либо дополнительных подробностей, я думаю, что вы просите что-то вроде это .В основном это отключает некоторые фиктивные данные в рендере, чтобы проиллюстрировать эту мысль.

• Для Лизы он охватывает Email и Phone.
• Для Барта это обычный ряд без охвата
• Для Гомера он охватывает 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()
});