How can I switch between two plugins in a grid?

[felipe.duarte]

Hi all,

I have two plugins attached to a grid and I want to switch between them but extjs 4.1 doesn't work as expected. I have code a little example:



Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'release_date', 'shipping_date'],
data: {
'rows': [
{
'name': 'Lisa',
'release_date': '2011-01-04T00:00:00-0300',
'shipping_date': '2012-07-09T03:00:00+0000'}
]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'rows'
}
}
});

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{
text: 'Name',
dataIndex: 'name'},
{
text: 'release_date',
dataIndex: 'release_date',
xtype: 'datecolumn',
format: 'Y-m-d',
editor: 'datefield'},

{
text: 'shipping_date',
dataIndex: 'shipping_date',
xtype: 'datecolumn',
format: 'Y-m-d',
editor: 'datefield'}
],
plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
triggerEvent: 'celldblclick',
pluginId: 'cellEdit'
}),
Ext.create('Ext.grid.plugin.RowEditing', {
triggerEvent: 'celldblclick',
pluginId: 'rowEdit'
})],
rowEdit: false,
listeners: {
celldblclick: function(table, td, cellIndex, record, tr, rowIndex) {
if (this.rowEdit) {
this.getPlugin('rowEdit').startEdit(record, 0);
this.rowEdit = false;
} else {
this.getPlugin('cellEdit').startEdit(record, 0);
this.rowEdit = true;
}
//return false;
},
},

height: 200,
width: 400,
renderTo: Ext.getBody()
});​


Live code: http://jsfiddle.net/DjrY6/7/

After the second double click the data from grid disappears. Am I doing something wrong? Does anyone have any ideas how to make this work?

[scottmartin]

Plugins cannot be toggled.

Scott.

[felipe.duarte]

Is there a way to request this feature?

[slemmon]

Cellediting/Rowediting extend from abstractPlugin which has a base implementation of enable/disable, but the subclass has to flesh out what enable/disable does for the given plugin. Looks like these two plugins do not have that functionality in them (though other plugins might so you'll have to look at the API/source for each plugin).

Actually, I think the enable/disable method will by default flag the plugin as enabled/disabled. So, what if you set a listener for beforeedit on the grid and in the handler checked to see if your desired plugin is enabled and return true/false given its status?

Scott, this seems like something the plugin could manage when the beforeedit event is raised (edit if beforeedit is not false && this.disabled != false or something like that?). Thoughts?

*until that enhancement is done listening to the beforeedit event should work I'd think

[felipe.duarte]

Hi slemmon and Scott,


first of all thanks for your replies. My real problem is that I have created a plugin to edit the row record in a form. The form works as expected, so I have created a cycle button to switch between RowEditing and my plugin (which I called FormRowEditing). This is the cycle button code:




xtype: 'cycle',
showText: true,
prependText: 'Edit row ',
itemId: 'row-edit',


menu: {
id: 'view-type-menu',
items: [{
text: 'inline',
id: 'edit-inline',
iconCls: 'view-text',
},{
text: 'in a Form',
id: 'edit-form',
iconCls: 'view-text',
checked: true
}]
},





Then in the handler of the cycle I do the following:


1- Destroy the plugin
2- Create a new plugin according to the selected item of the cycle button
3- Init the plugin and push into the plugins array of the grid




changeHandler: function(cycleBtn, activeItem) {
var grid = self.gridPanel;


// Destroy the plugin
var plugin = grid.getPlugin('editPlugin');
plugin.destroy();


if (activeItem.id == 'edit-inline') {
grid.inlineEdit = true;


// Creates a new plugin
plugin = Ext.create('Ext.grid.plugin.RowEditing', {
pluginId:'editPlugin'
});
} else {
grid.inlineEdit = false;


// Creates a new plugin
plugin = Ext.create('MyAwesomeApp.grid.plugin.FormRowEditing', {
pluginId:'editPlugin'
});
}


plugin.init(grid);
grid.plugins = [];
grid.plugins.push(plugin);
}



The problem is after I use the switch and double click on grid Ext gives me this error at console:



Uncaught TypeError: Cannot read property 'addCls' of null ext-all-dev.js:68365


I have managed to debug the code and the issue is that a field is passed to "addCls" function and its "protoEl" property is null, which causes the error. Do you guys think this is a bug? Is there any workaround that could be done?


Thanks!

[EdBeller]

I am getting same error.

The app is developed from Sencha desktop example, window has LiveSearchGridPanel with grid data coming from database query.

First time clicking shortcut to this window works fine. Close it and click again, it renders part of tree and then hits this error because
rownumberer-1009 does not have protoEl defined.

I picked this project up from someone who left and I'm a little unclear on terminology, but from this thread it seems that plugins cannot be toggled? And a store is a plugin and redisplaying a window is like toggling a plugin?

My app has another shortcut to a different window, it has store (but not LiveSearchGridPanel) tied to database query it it redisplays just fine.

I'm not seeing any obvious difference between how the my two windows are set up. If the original post was resolved somehow, it might give me a clue.