PDA

View Full Version : Add margin to GridPanel rows



cristian.bejenariu
10 Jul 2012, 1:57 AM
Hy everybody.

I have been trying to add a 5px 'gap' between the rows of my GridPanel, but from what I've been trying, nothing seemed to work.
I also want to be able to customize that 'gap', for example, all the rows should be show with a 5px spacing, but two rows that hold data of the same type, should be shown next to each other like the default representation.

Overriding the class .x-grid-row and adding a margin to it didn't seem to work.
I also tried adding a custom class to the GridPanel, but the margin property seems to be ignored every time.

Is there any other way of customizing that property?

redraid
10 Jul 2012, 2:56 AM
You can't change the margin of a table cell. But you can change the padding -
css:

.myrow .x-grid-cell {
padding-bottom: 10px; !important;
}

js:

// grid config
viewConfig: {
getRowClass: function () {
return 'myrow';
}
};

sword-it
10 Jul 2012, 3:31 AM
Hi cristian,
The alternate way to have space b/w grid rows that you can add dummy rows b/w original rows. Review the following code:



Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: {
items: [
{ 'name': 'Lisa', "email": "lisa@simpsons.com", "phone": "555-111-1224" },
{ 'name': 'Bart', "email": "bart@simpsons.com", "phone": "555-222-1234" }
]
},
proxy: {
type: 'memory',
reader: {
type: 'json', root: 'items'
}
}
});


Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
],
listeners: {
afterrender: function (grid) {
var view = grid.getView();
if (view) {
view.on('refresh', grid.addDummyRows, grid);
}
}
},
addDummyRows: function (grid) {
var store = grid.store;
for (var i = 0, totalRecords = store.getCount(); i < totalRecords; i++) {
var tableRow = Ext.get(this.getView().getNode(i));
// here you can also give condition according to your data dummy row should be added or not.
tableRow.insertSibling('<tr><td colspan="3"><div style="height:5px;"></div></td></tr>', 'after');
}
},
height: 200,
width: 400,
renderTo: Ext.getBody()
});



The output of this code is given as attachment image.

cristian.bejenariu
10 Jul 2012, 5:29 AM
Hey redraid,

The padding simply pushes the bounds of the rows down, I'm more intereseted in sliding the entire rows down.

Sword-it's looks exactly like what I want. I will try it now.

cristian.bejenariu
10 Jul 2012, 5:34 AM
Hey Sword-it.

That's exactly what I want.

I am trying it and I seem to be missing the grid.getView() method.
Is this code valid for ExtJS 4 or 3?

sword-it
10 Jul 2012, 5:37 AM
This code is belongs to Extjs 4.1.

cristian.bejenariu
10 Jul 2012, 5:48 AM
Strage. I'm also using 4.1 but it's not working.

The grid.getView() method seems to be missing. Could it be because I render to a div, and not the body?

What is afterrender supposed to do? Is there a way I can call the refresh without the view object?

sword-it
10 Jul 2012, 6:14 AM
Here afterrender is adding an event handler on the 'refresh' event to the view of grid.
You can also use 'viewready' event of view rather than 'refresh'. Both can solve your problem. 'viewready' event is also working for me. This time I am giving whole code to you, just copy the code & paste it to a new html file & change the path of lib of extjs & run the html file. The code is following:



<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Grid Example</title>
<link rel="stylesheet" type="text/css" href="/js/lib/extjs-4.1.0/resources/css/ext-all.css" />
<script type="text/javascript" src="/js/lib/extjs-4.1.0/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: {
'items': [
{ 'name': 'Lisa', "email": "lisa@simpsons.com", "phone": "555-111-1224" },
{ 'name': 'Bart', "email": "bart@simpsons.com", "phone": "555-222-1234" },
{ 'name': 'Homer', "email": "home@simpsons.com", "phone": "555-222-1244" }
]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
],
listeners: {
afterrender: function (grid) {
var view = grid.getView();
if (view) {
view.on('refresh', grid.doSomethingToRows, grid);
}
}
},
doSomethingToRows: function (grid) {
var store = grid.store;
for (var i = 0, totalRecords = store.getCount(); i < totalRecords; i++) {
var htmlNode = this.getView().getNode(i),
extNode = Ext.get(htmlNode);
extNode.insertSibling('<tr><td colspan="3"><div style="height:5px;"></div></td></tr>', 'after');
}
},
height: 200,
width: 400,
renderTo: 'myPanel'
});
});
</script>
</head>
<body></body>
</html>

cristian.bejenariu
10 Jul 2012, 6:32 AM
The demo works like a charm! I must have a problem in my own code.
Thanks for your help.

redraid
10 Jul 2012, 6:53 AM
Im write grid feature for this =)
Feature:


Ext.define('Ext.ux.grid.feature.RowSpacer', {
extend: 'Ext.grid.feature.Feature',
alias: 'feature.rowspacer',
height: 5,

getSpacerRow: function(values) {
return [
'<tpl if="xindex != xcount">',
'<tr class="{spacerRowCls}">',
'<td colspan="{spacerRowColspan}" style="height: {spacerHeight}px;"></td>',
'</tr>',
'</tpl>'
].join('');
},

getMetaRowTplFragments: function() {
return {
getSpacerRow: this.getSpacerRow
};
},

mutateMetaRowTpl: function(metaRowTpl) {
metaRowTpl.push('{[this.getSpacerRow(values)]}');
},

getAdditionalData: function(data, idx, record, orig) {
var headerCt = this.view.headerCt,
colspan = headerCt.getColumnCount();

return {
spacerHeight: this.height,
spacerRowCls: Ext.baseCSSPrefix + 'grid-spacer-tr',
spacerRowColspan: colspan
};
}
});

example:


features: [
{ftype: 'rowspacer', height: 25}
];