PDA

View Full Version : EXTJS 4 grid multiselect selection issue



ayumittal
10 Nov 2013, 9:51 PM
I am using extjs 4 grid multiselect in my application. After selecting the values from the multiselect options, if i click outside the grid, the values are not selected in the cell and if i click on any grid cell, then values get selected. I want the values to be selected on grid column focus out or by any other means so that user don't have to click anywhere else to select the options .
Grid, store as well as editors are dynamic in my application
My grid:






grid = Ext.create('Ext.grid.Panel', {
store : store,
id : 'gridIdentifier',
hidden : true,
columnLines : true,
columns : columnArr,
selModel : {
selType : 'cellmodel'
},
renderTo : 'editor-grid',
title : 'Grid Loading',
frame : true,
plugins : [ Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit : 1
}) ]
});



I am using reconfigure method of grid for rendering:





function reconfigureGrid(fields, editor) {
columnArr = [];
for ( var i = 0; i < fields.length; i++) {
var attrib = {
header : fields[i].name,
dataIndex : fields[i].key,
sortable : false,
menuDisabled : true,
flex : 1,
width : 200,
editor : editor
}
columnArr.push(attrib);
}
grid.reconfigure(undefined, columnArr);
grid.width = (columnArr.length - 1) * 200;
grid.doComponentLayout();
}

for editor, i am using function that displays editor based on the input type:





function getEditor(fieldType) {
var editor;
if (fieldType == 'list') {
editor = {
xtype : 'combobox',
allowBlank : true,
store : options_store,
displayField : 'value',
valueField : 'value',
editable : false
};
}
if (fieldType == 'multilist') {
editor = {
xtype : 'multiselect',
allowBlank : true,
store : options_store,
displayField : 'value',
valueField : 'value',
editable : false
};
}
}


all other editors are working perfectly. please suggest anything for multiselect.

scottmartin
13 Nov 2013, 8:56 AM
Can you specify the version of Ext4 that you are using?

It seems fine in 4.2.1 ( and 4.1.x) .. but I do see it blank out on 4.2.2+



Ext.Loader.setConfig({enabled: true, disableCaching: false});
Ext.Loader.setPath('Ext.ux', '../../extjs4/examples/ux');
Ext.require([
'Ext.ux.form.MultiSelect'
]);

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' : 'lisa@simpsons.com', 'change' : 100 },
{ 'name' : 'Bart', 'email' : 'bart@simpsons.com', 'change' : -20 },
{ 'name' : 'Homer', 'email' : 'home@simpsons.com', 'change' : 23 },
{ 'name' : 'Marge', 'email' : 'marge@simpsons.com', '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 : '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);
}
}

});

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()
});

});

ayumittal
13 Nov 2013, 9:05 AM
Version 4.0.7

scottmartin
13 Nov 2013, 9:37 AM
I highly recommend you upgrade away from 4.07 ... It was riddled with bugs.

As mentioned, the example I provided works fine in 4.1x, 4.2.1

Scott

ayumittal
13 Nov 2013, 11:40 PM
Thanks for sharing the code. But our issue is that we have to click on another cell so that the values in multiselect would get selected , we want the values to get automatically selected on focus lost of multiselect cell or by clicking anywhere on web page outside the grid .

scottmartin
14 Nov 2013, 5:50 AM
You might want to see if this UX allows you better control of the component behavior
http://skirtlesden.com/ux/component-column