ExtJS Grid - Display Multiples rows in one row

Question

I am having below json data in ExtJS store. I am using Ext.grid.Panel to show this content with colum Name and Phone.

{ "name": "Doris Ryan", "phone": "1-536-934-9500" }, { "name": "Nissim Hines", "phone": "1-937-975-0044" }, { "name": "Walter Gallegos", "phone": "863-4112" }, { "name": "Miranda Boyd", "phone": "1-820-817-5049" }, { "name": "Sonya Booth", "phone": "468-0669" }, { "name": "Rose Steele", "phone": "1-581-774-8023" },

So with this I am getting Grid in below format

Name              Phone
Doris Ryan        1-536-934-9500
Nissim Hines      1-937-975-0044
Walter Gallegos   863-4112
Miranda Boyd      1-820-817-5049

But what i want to display the content in Grid as described below

Name              Phone            Name              Phone
Doris Ryan        1-536-934-9500   Nissim Hines      1-937-975-0044
Walter Gallegos   863-4112         Miranda Boyd      1-820-817-5049

User is able to edit the phone number. So also share details on how will I handle the updates on grid.

I doubt this is possible without bringing the data into the format expected by the grid (two names and two numbers per record). — Alexander, Oct 22 '18 at 07:48

score 0 · Answer 1 · answered Nov 13 '18 at 17:45

The solution to this is to change how you assemble the data in the model, and then you also change the exposure via the grid.

ExtJS does not have the property to automatically replicate two rows of records in a single row.

Crete a model like this:

Ext.define('YourApp.model.yourFeature.Model', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'Phone1',
        type: 'string'
    }, {
        name: 'Name1',
        type: 'string'
    }, {
        name: 'Phone2',
        type: 'string'
    }, {
        name: 'Name2',
        type: 'string'
    }]
});

Define your data, like your question:

var data = [{
    "name": "Doris Ryan",
    "phone": "1-536-934-9500"
}, {
    "name": "Nissim Hines",
    "phone": "1-937-975-0044"
}, {
    "name": "Walter Gallegos",
    "phone": "863-4112"
}, {
    "name": "Miranda Boyd",
    "phone": "1-820-817-5049"
}, {
    "name": "Sonya Booth",
    "phone": "468-0669"
}, {
    "name": "Rose Steele",
    "phone": "1-581-774-8023"
}]

So you make a kind of odd / even logic to abound your record.

ExtJS Grid - Display Multiples rows in one row

1 Answers1