PDA

View Full Version : multiSelect combobox



squalo
19 Mar 2014, 11:55 PM
Hi
I must change the multiSelect property of a combobox within the 'beforeedit' event of a 'Ext.grid.plugin.RowEditing' Plugin.

(one, and only one editor of my grid rows is a combobox)



beforeedit: function(panel,e) {
var sm = panel.grid.getSelectionModel();
var combo = panel.grid.up('panel').down('combobox');
...


This doesn't seem to work. 'combo' is not the right element.
any ideas?
Thx.

scottmartin
20 Mar 2014, 5:36 AM
See if this helps:



var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
listeners: {
beforeedit: function(editor, context, eOpts){
var combo = editor.editor.query('combobox')[0];
console.log(combo);
}
}
});

squalo
20 Mar 2014, 6:06 AM
Fine that worked.Thx!
But it is unfortunately not possible there to toggle the mulitSelect state.
I can change it once from my default value true (in the config area) to false, but then never again back to true i.e.

Still any ideas left?

scottmartin
20 Mar 2014, 6:13 AM
That is what I thought, but was not sure .. you can set the editor up like this, just change the criteria for selection

// snippet



beforeedit: function(ed, context){
var field,
mstore = Ext.data.StoreManager.lookup('simpsonsStore'),
ustore = Ext.data.StoreManager.lookup('storeUser');

if (mstore.indexOf(context.record) % 2 === 0) {
field = {
xtype : 'multiselect',
allowBlank : true,
store : ustore,
displayField : 'name',
valueField : 'name',
editable : false
};
} else {
field = { // revert back
xtype: 'combobox',
queryMode: 'local',
valueField: 'name',
displayField: 'name',
store : ustore
};
}

grid.headerCt.items.getAt(0).setEditor(field);
}

squalo
20 Mar 2014, 6:46 AM
Didn't worked for me so far. :(

Btw: concerning 'setEditor()' it says in the doc:
"Note: This method only has an implementation if an Editing plugin has been enabled on the grid."

and i don't have yet a plugin for that purpose. But looking to your snippet, I cannot confim my assumption.

Still appreciating your hints :)

scottmartin
20 Mar 2014, 7:09 AM
The RowEditor is the plugin.

Paste the following code in our fiddle and see if this is what you are looking for:
https://fiddle.sencha.com/#home



Ext.onReady(function(){

Ext.create('Ext.data.Store', {
storeId : 'storeUser',
fields: [{ name: 'name', type: 'string' }],
data: [
{ name: 'Lisa' },
{ name: 'Bart' },
{ name: 'Homer' },
{ name: 'Marge' }
],
proxy : {
type : 'memory',
reader : {
type : 'json',
root : 'items'
}
}
});


Ext.create('Ext.data.Store', {
storeId : 'simpsonsStore',
fields : ['name', 'email', 'change'],
data : {'items' : [
{ 'name' : 'Lisa', 'email' : '[email protected]', 'change' : 100 },
{ 'name' : 'Bart', 'email' : '[email protected]', 'change' : -20 },
{ 'name' : 'Homer', 'email' : '[email protected]', 'change' : 23 },
{ 'name' : 'Marge', 'email' : '[email protected]', 'change' : -11 }
]},
proxy : {
type : 'memory',
reader : {
type : 'json',
root : 'items'
}
}
});

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
listeners: {
beforeedit: function(ed, context){
var field,
mstore = Ext.data.StoreManager.lookup('simpsonsStore'),
ustore = Ext.data.StoreManager.lookup('storeUser');

if (mstore.indexOf(context.record) % 2 === 0) {
field = {
xtype: 'combobox',
queryMode: 'local',
valueField: 'name',
displayField: 'name',
store : ustore,
multiSelect: true // multi-select combo
};
} else {
field = {
xtype: 'combobox',
queryMode: 'local',
valueField: 'name',
displayField: 'name',
store : ustore
};
}

grid.headerCt.items.getAt(0).setEditor(field);
}
}

});

var editor = {
xtype: 'textfield',
allowBlank: false
};

var grid = Ext.create('Ext.grid.Panel', {
title : 'Simpsons',
store : Ext.data.StoreManager.lookup('simpsonsStore'),
columns : [
{ header : 'Name', dataIndex : 'name', editor: 'combobox' },
{ header : 'Email', dataIndex : 'email', flex : 1, editor: editor },
{ header : 'Change', dataIndex : 'change' }
],
height : 200,
width : 400,
plugins : [ cellEditing ],
renderTo : Ext.getBody()
});

});

squalo
20 Mar 2014, 7:25 AM
Sorry, for spreading such a confusion.
Of course, you are right regarding the plugin.

I finally found out my mistake.
I had to put the correct index number for the column I have the combobox in.
It's not in the first, but in the 7th. :">

So, now it's working fine. Thanks for your patience.;)

But, honestly: why in fact, I have to swap whole editor, instead of changing property only?

scottmartin
20 Mar 2014, 7:39 AM
Setting a property will not change the behavior of how a component was initialized, you would need a method for that.
If you look at the source for Ext.form.field.ComboBox', you can see all the differences.

The other option would be to destroy and create a new instance with the desired config.