ExtJS Grid - Display Multiples rows in one row - extjs

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.

Answer 1

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.