PDA

View Full Version : Grid rowexpander/xtemplate to show new rows in the grid.



vick_44
28 Feb 2018, 4:46 AM
I am using Extjs 4.2.0.

let me explain the problem with an example,

At the moment I have a grid which has, lets say 6 columns, ( columns 1 - 6 as per below image).
I need to display new set of data which has 1-Many relation for each row of the grid, and I need it in a specific format.

The first column refers to the "+" / "-" icons represented by rowexpander plugin. ("+" row expand || "-" row collapse)

Since my grid had columns1-6 , I added new columns till column 12 to display new child rows.
When I click the "+" icon, the rows should expand and display the new set of data pertaining to first row in columns 7 through 12 between row 2 and 6.

The end result of the grid should be as below.
57408


Searching on the internet I figured I need to use xtemplate to render the children rows but it appears just below the parent and not in the grid columns. Is there anyway to achieve above functionality by any means?


Far down below is a executable code that I have at the moment, and it has below output.
57421

I wish to display whatever child rows that are below first row pushed to the right exactly under col7-12 respectively with column lines as shown in first image mockup. ( May be I am asking for too much :p )

Any help or pointers is deeply appreciated.

To execute below code, open http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.Panel

In the resulting page there will be code editor with embedded fiddle (Sorry, external fiddlers are blocked at my place)
copy below code within the fiddle provided in above page and click preview


Ext.define('dataview_model', {
extend : 'Ext.data.Model',
fields : [
{name: 'col1', type: 'string'},
{name: 'col2', type: 'string'},
{name: 'col3', type: 'string'},
{name: 'col4', type: 'string'},
{name: 'col5', type: 'string'},
{name: 'col6', type: 'string'},
{name: 'count', type: 'int'},
{name: 'employees', type: 'Employee'}
]
});

Ext.define('Employee', {
extend : 'Ext.data.Model',
fields : [
{name: 'col7', type: 'string'},
{name: 'col8', type: 'string'},
{name: 'col9', type: 'string'},
{name: 'col10', type: 'string'},
{name: 'col11', type: 'string'},
{name: 'col12', type: 'string'}
]
});

Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
model: 'dataview_model',
data:{'items':[
{ 'col1': 'Michael Scott', "col2":"[email protected]", "col3":"555-111-1224" ,
'col4': 'Dunder Miflin', "col5":"A paper company", "col6":"The Office" ,

'count': 2,"employees": [
{'col7': 'Pam Beesly', "col8":"[email protected]", "col9":"555-111-1224" ,
'col10': 'Dunder Miflin', "col11":"A paper company", "col12":"The Office"},
{'col7': 'Jim Halpert', "col8":"[email protected]", "col9":"555-111-1224" ,
'col10': 'Dunder Miflin', "col11":"A paper company", "col12":"The Office"}
] },

{ 'col1': 'Dwight Schrute', "col2":"[email protected]", "col3":"555-222-1234",
'col4': 'Dunder Miflin', "col5":"A paper company", "col6":"The Office" ,

'count': 1,"employees": [
{'col7': 'Angela', "col8":"[email protected]", "col9":"555-111-1224" ,
'col10': 'Dunder Miflin', "col11":"A paper company", "col12":"The Office"}
]}


]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
selType : 'rowmodel',
columnLines : true,
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'col1', dataIndex: 'col1' },
{ text: 'col2', dataIndex: 'col2' },
{ text: 'col3', dataIndex: 'col3' },
{ text: 'col4', dataIndex: 'col4' },
{ text: 'col5', dataIndex: 'col5' },
{ text: 'col6', dataIndex: 'col6' },
{ text: 'col7', dataIndex: 'col7' },
{ text: 'col8', dataIndex: 'col8' },
{ text: 'col9', dataIndex: 'col9' },
{ text: 'col10', dataIndex: 'col10' },
{ text: 'col11', dataIndex: 'col11' },
{ text: 'col12', dataIndex: 'col12' }
],
plugins: [{
ptype: 'rowexpander',
rowBodyTpl: ['<tpl for=".">',

'<tpl if="count &gt; 0">',
'<table class="view_table">',
'<tpl for="employees">',
'<tr>',
'<td>{col7} {col8} {col9} {col10} {col11} {col12}</td>',
'</tr>',
'</tpl>',
'</table>',
'</tpl>',

'</tpl>']
}],
height: 400,
width: 1200,
renderTo: Ext.getBody()
});