PDA

View Full Version : nested grid



flora-extjs
12 Jul 2012, 11:56 PM
Hi, I am new to ExtJs and this is my first post.
I am using EXTJs 4.1

This is my Code

Ext.onReady(function(){

Ext.QuickTips.init();

Ext.create('Ext.data.Store', {
storeId:'daten',
fields:['name', 'email', 'phone','address'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224", "address":"a1"},
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234", "address":"b2"},
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244", "address":"c3"},
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254", "address":"d4"}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

var grid = new Ext.grid.GridPanel({
store: Ext.data.StoreManager.lookup('daten'),
columns: [
{ header: 'Name', dataIndex: 'name', flex: 1 },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone', flex: 1 }
],
plugins: [{
ptype: 'rowexpander',
rowBodyTpl: ['<div style="width:643px;margin-left:147px;margin-bottom:
20px;border: 1px solid;">',
'<p><b>Details:</b><br/>{address}<br/> {email}, {phone}, {address} </p></div>'
],
}],
width: 900,
height: 450
});

grid.render(document.body);
});

This is nothing spectacular. But I want that the rowexpander shows the data in a grid - in an extjs grid.
I've read so many about this, but nowhere I can find a complete example, which functions.

Perhaps I can get any help this way

Thanks in advance

flora-extjs
13 Jul 2012, 12:10 AM
Hi all,

I am new in ExtJs and this is my first post.
I use EXTJs 4.1

I need help in nested grids.
My Code shows a grid, that uses the rowexpander plugin. The data are shown.




Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', 'extjs-4.1.0/examples/ux');

Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.RowExpander'
]);

Ext.onReady(function(){

Ext.QuickTips.init();

Ext.create('Ext.data.Store', {
storeId:'daten',
fields:['name', 'email', 'phone','address'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224", "address":"a1"},
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234", "address":"b2"},
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244", "address":"c3"},
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254", "address":"d4"}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

var grid = new Ext.grid.GridPanel({
store: Ext.data.StoreManager.lookup('daten'),
columns: [
{ header: 'Name', dataIndex: 'name', flex: 1 },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone', flex: 1 }
],
plugins: [{
ptype: 'rowexpander',
rowBodyTpl: ['<div style="width:643px;margin-left:147px;margin-bottom: 20px;border: 1px solid;">',
'<p><b>Details:</b><br/>{address}<br/> {email}, {phone}, {address} </p></div>'
],
}],
width: 900,
height: 450
});

grid.render(document.body);
});

I want the data shown in a grid and not as a text.

I have already read a lot of about this, but never found a running example.

Please help me.

Thanks in advance

sword-it
13 Jul 2012, 12:34 AM
Hi!

you may find running examples from here:-

http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/#sample-2

(http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/#sample-2)also,
you may take a look on these thread:-

http://www.sencha.com/forum/showthread.php?229626-Embed-a-Grid-within-a-Grid&p=853400#post853400

redraid
13 Jul 2012, 4:19 AM
Maybe this help you https://github.com/mitchellsimoens/Ux.grid.plugin.AssociationRowExpander