ExtJS 4: Több soros grid row renderer

Adódott ma a feladat, hogy a gridemben a jobb helykihasználtság érdekében át kéne alakítani a sorok megjelenítését. A korábbi megjelenés egy klasszikus grid sor megjelenése volt, egy sor, több oszloppal. Azonban van egy oszlopom, amelyben egy tömb elemeit kell megjeleníteni, jellemzően 4-5 elemmel (legalább) a tömbben. Arra gondoltam, hogy az adat megérkezésekor az egyes elemeket több sorra bontom fel, azaz:

this.F4GridStore = Ext.create('Ext.data.Store', {
    pageSize: 100,
    fields: [
        { name: 'documentId' },
        { name: 'workNumber' },
        { name: 'dispositionNumbers', convert: function(v) { return v.join('<br />'); } },
        { name: 'orderNumber' },
        { name: 'plannedTimeOfStoringFrom', type: 'date', dateFormat: __('DATABASE_DATE_FORMAT') },
        { name: 'plannedTimeOfStoringTo', type: 'date', dateFormat: __('DATABASE_DATE_FORMAT')   },
        { name: 'partnerName' },
        { name: 'nameOfGoods' },
        { name: 'quantity', type: 'float' },
        { name: 'percentage', type: 'float' },
        { name: 'status', type: 'int' },
        { name: 'version' }
    ]
    // ...

Sajnos ezzel a megoldással több probléma is van (legalábbis ExtJS 4.0.7 alatt):

• 8-10 elem esetén nagyon magas sorok keletkeznek, ez nem túl szép látványilag. Illetve a sorok egységes magassága is ki van lőve ezzel a megoldással. Mondjuk ez már csak szőrszálhasogatás!
• Valami bug van a gépezetben, ugyanis ha elrejtem a sok soros oszlopot a teljes sor magassága változatlan marad. Ez azt jelenti, hogy hiába van az összes többi oszlopban 1 sornyi magas szöveg, a teljes sor akár 8-10 sor magas is lehet, a dispositionNumbers mező számosságától függően.

Másodjára azt az ötletemet próbáltam ki, ami eredetileg elsőre jutott az eszembe. Ennek a megvalósítása kicsit bonyolultabb és én nagyon lusta vagyok, ezért maradt meg ez másodiknak. 😀 Arra gondoltam, hogy egy sor legyen valójában több sor. A dispositionNumbers oszlopot kiszedem az oszlopok közül és beteszem az eredeti sor után egy újabb sorba (sortörés helyett vesszővel összefűzve az elemeket). Szerencsére az ExtJS-nek van erre beépített megoldása (bár nincs agyonreklámozva), így nem kellett hackelni. A megoldást az Ext.grid.feature.RowBody feature nyújtja. A kód a következőképp néz ki:

this.F4GridStore = Ext.create('Ext.data.Store', {
    pageSize: 100,
    fields: [
        { name: 'documentId' },
        { name: 'workNumber' },
        { name: 'dispositionNumbers' },
        { name: 'orderNumber' },
        { name: 'plannedTimeOfStoringFrom', type: 'date', dateFormat: __('DATABASE_DATE_FORMAT') },
        { name: 'plannedTimeOfStoringTo', type: 'date', dateFormat: __('DATABASE_DATE_FORMAT')   },
        { name: 'partnerName' },
        { name: 'nameOfGoods' },
        { name: 'quantity', type: 'float' },
        { name: 'percentage', type: 'float' },
        { name: 'status', type: 'int' },
        { name: 'version' }
    ],
    proxy: {
        type: 'ajax',
        url : __('SERVICES_BASE_URL') + '/transportToStore/list',
        reader: {
            type: 'json',
            root: 'data',
            totalProperty: 'totalCount'
        }
    }
});

this.F4GridFeatures = [{
    ftype: 'rowbody',
    getAdditionalData: function(data, idx, record, orig) {
        var headerCt = this.view.headerCt,
            colspan  = headerCt.getColumnCount();
        
        // Mindenképp egy ilyen objektummal kell visszatérni, különben az ext nem veszi figyelembe a visszatérési értéket
        return {
            rowBody: __('DASHBOARD-031') + ': ' + record.get('dispositionNumbers').join(', '),
            rowBodyCls: this.rowBodyCls,
            rowBodyColspan: colspan
        };
    }
}];

// ...

this.F4Grid = Ext.create('Ext.grid.Panel', {
    // ...
    store: this.F4GridStore,
    columns: this.F4GridColumns,
    features: this.F4GridFeatures,
    // ...
});