PDA

View Full Version : Hide expander - if no data



deepakpoda2000
1 Dec 2012, 9:06 AM
I have a grid.. which has a sub table/template/ and am using rowexpander for it
but I want the Expander symbol(+) to be displayed only when there is data for it..
Below is the part of code I have used

xtype:'grid',
forceFit: true,
cls:'otherAllergiesGrid gridCls noScrollGrid comborRow',
id:'otherAllergiesGridCls',
store: cgg,
plugins: [{
ptype: 'rowexpander',
rowBodyTpl : [
'<div class="patient-medications-history">',
'<table border="0" cellpadding="0" cellspacing="0">',
'<tr>',
'<th>Status</th>',
'<th>Date/Tim</th>',
'<th>Dos</th>',

'</tr>',
'<tpl for="history">',
'<tr>',
'<td>{isActive}</td>',
'<td>{statusIndicator}</td>',
'<td>{dater}</td>',

'</tr>',
'</tpl>',
'</table>',
'</div>'

]
}],
autoScroll:true,

columns: [{
header: 'Status',
//dataIndex: 'Status',
dataIndex: 'isActive',
flex:1,
renderer: function (value, meta, record) {
if(record.get('isActive')=='Active'){return '<b>'+value+'</b>';}
else if(record.get('statusIndicator')=='D'){

return '<strike>'+value+'</strike>';
}
else{return value;}
//meta.css = record.get('isActive') ? 'Active' : 'user-offline';

}

slemmon
2 Dec 2012, 1:26 AM
Very interesting idea.
Try using this as your row expander plugin:

You'll need to pass in an array of required fields for your template so it knows which ones are critical. You'll see requiredFields as a property in the code below.

http://jsfiddle.net/slemmon/BpJ4c/3/



Ext.define('MyExpander', {
extend: 'Ext.ux.RowExpander'
, alias: 'plugin.myexpander'

, init: function (grid) {
var me = this;
me.callParent(arguments);
grid.on('viewready', function () {
grid.getStore().each(function (rec) {
var cell = grid.view.getCell(rec, grid.down('headercontainer').items.getAt(0));
var ex = Ext.get(cell).down('.' + Ext.baseCSSPrefix + 'grid-row-expander');
if (!me.hasRequiredFields(rec)) {
ex.removeCls(Ext.baseCSSPrefix + 'grid-row-expander');
}
});
});
}

, requiredFields: ['company']
, hasRequiredFields: function (rec) {
var valid = false;
Ext.each(this.requiredFields, function (field) {
if (!Ext.isEmpty(rec.get(field))) { valid = true; }
});
return valid;
}
, toggleRow: function (rowIdx, record) {
var me = this
, rec;

rec = Ext.isNumeric(rowIdx) ? me.view.getStore().getAt(rowIdx) : me.view.getRecord(rowIdx);
if (me.hasRequiredFields(rec)) { me.callParent(arguments) }
}
});

slemmon
2 Dec 2012, 4:11 PM
Actually, this is probably a little better:

http://jsfiddle.net/slemmon/BpJ4c/4/



Ext.define('MyExpander', {
extend: 'Ext.ux.RowExpander'
, alias: 'plugin.myexpander'

, init: function (grid) {
var me = this;
me.grid = grid;
me.callParent(arguments);
grid.on('viewready', me.evalExpander, me);
grid.getStore().on('datachanged', me.evalExpander, me);
}

, evalExpander: function () {
var me = this
, grid = me.grid
, cell, ex;

grid.getStore().each(function (rec) {
cell = grid.view.getCell(rec, grid.down('headercontainer').items.getAt(0));
ex = Ext.get(cell).down('.' + Ext.baseCSSPrefix + 'grid-row-expander');
if (!me.hasRequiredFields(rec)) {
ex.removeCls(Ext.baseCSSPrefix + 'grid-row-expander');
}
});
}

, requiredFields: ['company']
, hasRequiredFields: function (rec) {
var valid = false;
Ext.each(this.requiredFields, function (field) {
if (!Ext.isEmpty(rec.get(field))) { valid = true; }
});
return valid;
}
, toggleRow: function (rowIdx, record) {
var me = this
, rec;

rec = Ext.isNumeric(rowIdx) ? me.view.getStore().getAt(rowIdx) : me.view.getRecord(rowIdx);
if (me.hasRequiredFields(rec)) { me.callParent(arguments) }
}
});

pwuk
23 Apr 2013, 7:32 AM
Late in the day - but I do this with :-

getRowClass()


getRowClass: function(record) {
if(record.data.yourfield == 'no data') {
return 'no-expander'
}
return 'css-class';


}


and a bit of CSS


.no-expander .x-grid-row-expander {
background: none;
}



Doesn't stop expand event when clicked, but its enough for me.