PDA

View Full Version : [FIXED] Extending a grid with `rowexpander` plugin



mehran
2 Jan 2014, 2:32 AM
Ext version tested:

Ext 4.2.1
Browser versions tested against:

Chromium Version 30.0.1599.114
FF 25.0.1 (firebug 1.12.5 installed)
DOCTYPE tested against:

html
Description:

Having a grid with plugin `rowexpander` works fine only if you create an object of it but if you define a class extending such a grid and then create an object of it will not do!
Steps to reproduce the problem:

Define a class based on grid
Put the plugin `rowexpander` in the grid.
Create an object of the defined class.
Here's the fiddle: https://fiddle.sencha.com/#fiddle/2eh
And here's the sample code:


Ext.define('Company', {
extend: 'Ext.data.Model',
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
{name: 'industry'},
{name: 'desc'}
]
});


Ext.grid.dummyData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am', 'Manufacturing'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am', 'Manufacturing']
];


for(var i = 0; i < Ext.grid.dummyData.length; i++){
Ext.grid.dummyData[i].push('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. ');
}


var getLocalStore = function() {
return Ext.create('Ext.data.ArrayStore', {
model: 'Company',
data: Ext.grid.dummyData
});
};


Ext.define('MyGrid', {
extend: 'Ext.grid.Panel',


initComponent: function() {
var me = this;


Ext.applyIf(me, {
store: getLocalStore(),
columns: [
{text: "Company", flex: 1, dataIndex: 'company'},
{text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{text: "Change", dataIndex: 'change'},
{text: "% Change", dataIndex: 'pctChange'},
{text: "Last Updated", renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
plugins: [{
ptype: 'rowexpander',
rowBodyTpl : new Ext.XTemplate(
'<p><b>Company:</b> {company}</p>',
'<p><b>Change:</b> {change:this.formatChange}</p><br>',
'<p><b>Summary:</b> {desc}</p>',
{
formatChange: function(v) {
var color = v >= 0 ? 'green' : 'red';
return '<span style="color: ' + color + ';">' + Ext.util.Format.usMoney(v) + '</span>';
}
})
}]
});


me.callParent(arguments);
}
});


Ext.create("MyGrid", {
width: 600,
height: 300,
renderTo: Ext.getBody()
});







The result that was expected:

The first image (it's a visual problem).
The result that occurs instead:

The second image.

Gary Schlosberg
2 Jan 2014, 10:10 AM
Thanks for the report! I have opened a bug in our bug tracker.

mehran
5 Jan 2014, 4:34 AM
It seems to me that this bug has root in the fact that `initComponent` of the extended class is run after the table's `initComponent`. And as stated in the source code of `rowexpander` plugin (in `setCmp` method):
// NOTE: features have to be added before init (before Table.initComponent)When a grid is given a `rowexpander` plugin inline, the plugin's `setCmp` is called before grid's `initComponent` but when a class extends grid and then its plugin is given to it within extended class' `initComponent`, it's too late to call plugin's `setCmp`! I'm not sure how can I resolve this conflict, specially since this is the Sencha Architect's way of defining new classes. Which means I can not have a grid with `rowexpander` designed with Sencha Architect.

joekrill
8 Jan 2014, 7:49 AM
I'm not sure if this helps in your specific case, but I was able to work around this by defining the plugin in the constructor instead of initComponent, i.e.:



Ext.define('MyGrid', {
extend: 'Ext.grid.Panel',
constructor: function() {

this.plugins = [

{

ptype: 'rowexpander',
rowBodyTpl: 'Here's my expanded content!'

}

];
this.callParent(arguments);

}
});

mehran
8 Jan 2014, 10:27 PM
Thanks Joe but my problem is I can not implement your solution. Since I'm trying to use Sencha Architect, it enforces me to put my code within `initComponent` and no where else.

zmathe
3 Jun 2015, 7:51 AM
I would like to use two row expander plugins, but it does not work.
It can be reproduced:


Ext.application({
name : 'Fiddle',


launch : function() {


Ext.define('Company', {
extend: 'Ext.data.Model',
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
{name: 'industry'},
{name: 'desc'}
]
});


Ext.grid.dummyData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am', 'Manufacturing'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am', 'Manufacturing'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am', 'Finance'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am', 'Services'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am', 'Services'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am', 'Manufacturing'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am', 'Services'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am', 'Finance'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am', 'Manufacturing'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am', 'Manufacturing'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am', 'Manufacturing'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am', 'Automotive'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am', 'Computer'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am', 'Manufacturing'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am', 'Computer'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am', 'Computer'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am', 'Medical'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am', 'Finance'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am', 'Food'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am', 'Medical'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am', 'Computer'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am', 'Medical'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am', 'Food'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am', 'Retail'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am', 'Manufacturing'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am', 'Computer'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am', 'Services'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am', 'Retail'],
['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am', 'Services']
];


for(var i = 0; i < Ext.grid.dummyData.length; i++){
Ext.grid.dummyData[i].push('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. ');
}


var getLocalStore = function() {
return Ext.create('Ext.data.ArrayStore', {
model: 'Company',
data: Ext.grid.dummyData
});
};




Ext.define('MyGrid', {
extend: 'Ext.grid.Panel',


initComponent: function() {
var me = this;


Ext.applyIf(me, {
store: getLocalStore(),
columns: [
{text: "Company", flex: 1, dataIndex: 'company'},
{text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{text: "Change", dataIndex: 'change'},
{text: "% Change", dataIndex: 'pctChange'},
{text: "Last Updated", renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
plugins: [{
ptype: 'rowexpander',
rowBodyTpl : ["Whyyy does not work????"]
},{
ptype: 'rowexpander',
rowBodyTpl : new Ext.XTemplate(
'<p><b>Company:</b> {company}</p>',
'<p><b>Change:</b> {change:this.formatChange}</p><br>',
'<p><b>Summary:</b> {desc}</p>',
{
formatChange: function(v) {
var color = v >= 0 ? 'green' : 'red';
return '<span style="color: ' + color + ';">' + Ext.util.Format.usMoney(v) + '</span>';
}
})
}]
});


me.callParent(arguments);
}
});


Ext.create("MyGrid", {
width: 600,
height: 300,
renderTo: Ext.getBody()
});
}
});


You can see also the attached picture.


Any suggestions?
Thank you very much!
Zoltan

zmathe
3 Jun 2015, 7:56 AM
52581