PDA

View Full Version : How to reconfigure plugins of a grid



hadi78
23 Nov 2009, 9:39 AM
Hi,

I am using the reconfigure method on my grid like this

grid.reconfigure(store, colModel);

this works well but according to the API the plugins have to be also reconfigured, but i can't find out how.

I use the RowEditor plugin

var editor = new Ext.ux.grid.RowEditor({
saveText: 'Save'
});


So how can i reconfigure this plugin for my grid ? I can't find a setter method in the api for setting the plugin of the grid with a new RowEditor instance. I appreciate all help.

Thx

aconran
23 Nov 2009, 10:06 AM
The RowEditor plugin was designed to be intelligent enough to handle Grid reconfigurations. Are you having any problems after reconfiguring the grid?

If so, could you please post the smallest showcase example that you can re-create so that we can take a look into it?

Thanks,

hadi78
23 Nov 2009, 11:13 AM
Yes, i have a problem after reconfiguring the grid. It's a little bit hard to explain for me, but i ll do my best:

After reconfiguring the grid, i double click a row to edit this row. But right after the double click the fields of the row change to the values of a row that was clicked before the grid was reconfigured.

Lets say for example that i have a person grid with 2 columns "firstname" and "lastname". in the first row the attributes are "steve" and "harrison". All goes well when i now doubleclick the row and edit the fields. After editing i reconfigure the grid with another store, which also have the same columns "firstname" and "lastname". Now when i click a row (firstname: "Sam", lastname: "jackson") to edit the fields, then "firstname" and "lastname" fields change to "steve" and "harrison" from the last grid (the grid before the reconfiguration) which is not correct.

Some conde snippets:


Here i reconfigure the store:


var grid = Ext.getCmp('edit-tables-grid');
var store = changeGridStore(obj2.data.name);
var colModel = new Ext.grid.ColumnModel([
{ id: 'id', header: 'Id', dataIndex: 'id', hidden: true, readOnly: true },
{ header: 'EN', dataIndex: 'en', editor: { xtype: 'textfield', allowBlank: true } },
{ header: 'SQ', dataIndex: 'sq', editor: { xtype: 'textfield', allowBlank: true } },
{ header: 'HR', dataIndex: 'hr', editor: { xtype: 'textfield', allowBlank: true } },
{ header: 'MK', dataIndex: 'mk', editor: { xtype: 'textfield', allowBlank: true } },
{ header: 'SR', dataIndex: 'sr', editor: { xtype: 'textfield', allowBlank: true } },
{ header: 'BS', dataIndex: 'bs', editor: { xtype: 'textfield', allowBlank: true } }
]);

grid.reconfigure(store, colModel);
store.reload();
And here the grid initialization:



var editor = new Ext.ux.grid.RowEditor({
saveText: 'Save'
});

var grid = new Ext.grid.GridPanel({
store: store,
width: 600,
id: 'edit-tables-grid',
region:'center',
height: 350,
editing: true,
style: 'margin: 20px 20px 20px 40px',
cm: cm,
//autoExpandColumn: 'en',
plugins: [editor],
view: new Ext.grid.GroupingView({
markDirty: false
}),
tbar: [
{
icon: '/ext/examples/shared/icons/fam/add.gif',
text: 'Add',
handler: function(){
var e = new abuse({
EN: '',
SQ: '',
HR: '',
MK: '',
SR: '',
BS: ''
});
editor.stopEditing();
count = store.getCount();
count = count++;
store.insert(count, e);
grid.getView().refresh();
grid.getSelectionModel().selectRow(count);
editor.startEditing(count);
}
}]
});

editor.on({
//scope: this,
afteredit: function(roweditor, changes, record, rowIndex) {
Ext.Ajax.request({
url: '/traffickers/change_table',
//method: record.phantom ? 'POST' : 'PUT',
params: changes,
success: function() {
record.commit();
},
failure: function() {

}
});
}
});
Sorry for my english, i ll hope you will understand my problem.

hadi78
24 Nov 2009, 12:53 AM
any ideas? i am getting desperate

aconran
24 Nov 2009, 1:57 PM
Bringing up the roweditor reconfigures the grid?

Could you create a complete example that we could troubleshoot?

hadi78
27 Nov 2009, 12:52 AM
Hi,

Sorry for the late answer. I post now all my methods related to the grid and its reconfiguration:

This method creates the grid:



function getMaintenanceGrid(typeName) {

var typeNameArray = typeName.match(/[A-Z][a-z]*/g);
var jsonType = '';
for (var i=0; i<typeNameArray.length-1; i++){
jsonType += typeNameArray[i].toLowerCase()+'_'
}
jsonType += typeNameArray[typeNameArray.length-1].toLowerCase();

var abuse = Ext.data.Record.create([{
name: 'EN',
type: 'string'
},{
name: 'SQ',
type: 'string'
},{
name: 'HR',
type: 'string'
},{
name: 'MK',
type: 'string'
},{
name: 'SR',
type: 'string'
},{
name: 'BS',
type: 'string'
}]);

var endung = 's';
var newType = jsonType;

if (jsonType.charAt(jsonType.length-1) == 'x' || jsonType.charAt(jsonType.length-1) == 's')
endung = 'es';
else if (jsonType.charAt(jsonType.length-1) == 'y'){
newType = newType.substr(0,newType.length-1);
endung = 'ies';
}
jsonType = 'translation';

var store = new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy({
url: '/traffickers/get_table_values?type='+typeName,
method: 'GET'
}),
reader: new Ext.data.JsonReader({
//root: newType+endung,
root: 'translations',
idProperty: 'íd',
totalProperty: 'results'
},
[
{ name: 'id', mapping: 'translation.id' },
{ name: 'en', mapping: jsonType+'.EN' },
{ name: 'sq', mapping: jsonType+'.SQ' },
{ name: 'hr', mapping: jsonType+'.HR' },
{ name: 'mk', mapping: jsonType+'.MK' },
{ name: 'sr', mapping: jsonType+'.SR' },
{ name: 'bs', mapping: jsonType+'.BS' }
]),
autoLoad: true,
});
store.load();
var editor = new Ext.ux.grid.RowEditor({
saveText: 'Save'
});

var cm = new Ext.grid.ColumnModel([
{ id: 'id', header: 'Id', dataIndex: 'id', hidden: true, readOnly: true },
//{ id: 'label', header: 'Label', dataIndex: 'label', width: 220, sortable: true, editor: { xtype: 'textfield', allowBlank: false }}
{ header: 'EN', dataIndex: 'en', editor: { xtype: 'textfield', allowBlank: true } },
{ header: 'SQ', dataIndex: 'sq', editor: { xtype: 'textfield', allowBlank: true } },
{ header: 'HR', dataIndex: 'hr', editor: { xtype: 'textfield', allowBlank: true } },
{ header: 'MK', dataIndex: 'mk', editor: { xtype: 'textfield', allowBlank: true } },
{ header: 'SR', dataIndex: 'sr', editor: { xtype: 'textfield', allowBlank: true } },
{ header: 'BS', dataIndex: 'bs', editor: { xtype: 'textfield', allowBlank: true } }
]);

var grid = new Ext.grid.GridPanel({
store: store,
width: 600,
id: 'edit-tables-grid',
region:'center',
height: 350,
editing: true,
style: 'margin: 20px 20px 20px 40px',
cm: cm,
//autoExpandColumn: 'en',
plugins: [editor],
view: new Ext.grid.GroupingView({
markDirty: false
}),
tbar: [
{
icon: '/ext/examples/shared/icons/fam/add.gif',
text: 'Add',
handler: function(){
var e = new abuse({
EN: '',
SQ: '',
HR: '',
MK: '',
SR: '',
BS: ''
});
editor.stopEditing();
count = store.getCount();
count = count++;
store.insert(count, e);
grid.getView().refresh();
grid.getSelectionModel().selectRow(count);
editor.startEditing(count);
}
}]
});

editor.on({
//scope: this,
afteredit: function(roweditor, changes, record, rowIndex) {
var id = 0
if (record.json != null) {
id = record.json.translation.id
}
Ext.Ajax.request({
url: '/traffickers/change_table?type='+typeName+'&id=' + id,
//method: record.phantom ? 'POST' : 'PUT',
params: changes,
success: function() {
record.commit();
},
failure: function() {

}
});
}
});

return grid;
};


This method loades the new store for the grid:


function changeGridStore(typeName) {

var store = new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy({
url: '/traffickers/get_table_values?type='+typeName,
method: 'GET'
}),
reader: new Ext.data.JsonReader({
//root: newType+endung,
root: 'translations',
idProperty: 'íd',
totalProperty: 'results'
},[
{ name: 'en', mapping: jsonType+'.EN' },
{ name: 'sq', mapping: jsonType+'.SQ' },
{ name: 'hr', mapping: jsonType+'.HR' },
{ name: 'mk', mapping: jsonType+'.MK' },
{ name: 'sr', mapping: jsonType+'.SR' },
{ name: 'bs', mapping: jsonType+'.BS' }
]),
autoLoad: true,
});

return store;
}


This method reconfigures the grid whenever a value is selected by the user:


function getMaintenanceCombo() {

var comboBox = new Ext.form.ComboBox({
fieldLabel: 'Trafficker Tables',
id: 'tdatabase-tables',
name: 'tdatabase_tables',
typeAhead: true,
mode: 'local',
forceSelection: true,
selectOnFocus:true,
displayField: 'name',
allowBlank:true,
store: databaseTables,
triggerAction: 'all',
value: 'AbusePerpetrator',
listeners: {
select: function(obj, obj2, value){
var grid = Ext.getCmp('edit-tables-grid');
var store = changeGridStore(obj2.data.name);
var colModel = new Ext.grid.ColumnModel([
{ id: 'id', header: 'Id', dataIndex: 'id', hidden: true, readOnly: true },
//{ id: 'label', header: 'Label', dataIndex: 'label', width: 220, sortable: true, editor: { xtype: 'textfield', allowBlank: false }}
{ header: 'EN', dataIndex: 'en', editor: { xtype: 'textfield', allowBlank: true } },
{ header: 'SQ', dataIndex: 'sq', editor: { xtype: 'textfield', allowBlank: true } },
{ header: 'HR', dataIndex: 'hr', editor: { xtype: 'textfield', allowBlank: true } },
{ header: 'MK', dataIndex: 'mk', editor: { xtype: 'textfield', allowBlank: true } },
{ header: 'SR', dataIndex: 'sr', editor: { xtype: 'textfield', allowBlank: true } },
{ header: 'BS', dataIndex: 'bs', editor: { xtype: 'textfield', allowBlank: true } }
]);
store.reload();
grid.reconfigure(store, colModel);

//store.reload();
}
}
});

var panel = new Ext.Panel({
name: 'combo-table-panel',
style: {
marginTop: '20px',
marginLeft: '20px'
},
items: comboBox,
})


return panel;
};



This is all my code related to the grid and its configuration.

hadi78
30 Nov 2009, 12:46 AM
i am still hoping for some help :s

danielking
30 Nov 2009, 6:15 PM
i am still hoping for some help :s

Have you solved? I got problems with row editor and "reconfigure" too.
http://www.extjs.com/forum/showthread.php?p=413944

hadi78
1 Dec 2009, 6:10 AM
No sorry, nobody is willing to help :(

cofficavic
1 Dec 2009, 7:00 AM
Get a same problem too.

Anyone please help.

Mike Robinson
1 Dec 2009, 7:38 AM
8-| It might take more than 12 hours for the world community to respond to your entreaty... Time zones, you know. Sleep.

hadi78
4 Dec 2009, 2:18 AM
i see now that i get this error message after reconfiguring the grid and selecting a row:

this.config[colIndex] is undefined

ext-all-debug.js Line 62999

hadi78
4 Dec 2009, 2:26 AM
A user from an older thread suggested to change line 236 in the RowEditor.js

from



this.removeAll(false);


to


this.removeAll(true);


With this change i can edit the rows of the grid again after reconfigure, but can't add new rows anymore. Now when pressing the add button of the grid i get the following error:

Ext.fly(row) is null
RowEditor.js Line 139

hadi78
6 Jan 2010, 6:24 AM
It's very sad that nobody of the ext js team is able to help me on this. U could mabye just mention if its a bug or my mistake.

letssurf
7 Jan 2010, 4:33 AM
I think it's a bug. I'm waiting over here for a reply.

http://www.extjs.com/forum/showthread.php?p=425074

Hopefully it will be sorted soon. /:)