PDA

View Full Version : Set value to a combobox with multiselect:true inside a grid with rowediting plugin



vishalsahani
18 Sep 2014, 4:25 AM
Hi

I am using a Multiselect combobox in ext.grid.panel with a rowediting plugin.
I need to set the values of the combobox so that when a user clicks on the row the values are selected in the combo.
but i am unable to do it.can anyone please help.




grid1 = Ext.create('Ext.grid.Panel',
{
store: store1,


id: 'customisationgrid',
columnLines: true,
style: 'border: solid #909192 1px',
columns: [
{ header: 'Group Id', dataIndex: 'AudienceGroupId', width: 100, hidden: true },
{ header: 'AudienceName', dataIndex: 'AudienceName', width: 100, hidden: true },
{ header: 'Audience', dataIndex: 'Audience', width: 200,
editor:
{
xtype: 'combobox',
//editable: false,
//value: 'Select Series',
//typeAhead: true,
//triggerAction: 'all',
"value": ["46","47"],
selectOnTab: false,
queryMode: 'local',
store: Audiencestore,
//fieldLabel: 'Choose Audience',
lazyRender: true,
displayField: 'Name',
valueField: 'Id',
id: 'AudienceCombo1',
multiSelect: true,
emptyText: 'Audience',
editable: false,

listeners:
{
change: function (combobox, value, oldvalue) {




}
}


},
renderer: function (val, metadata, record, rowIndex, colIndex) {
debugger
if (record.data.AudienceName != "")
return record.data.AudienceName;
else
return "Select Audience";




}
}
],
selModel: {
selType: 'rowmodel'
}, listeners: {
select: function (selModel, record, index, options) {




}, deselect: function (selModel, record, index, options) {



}
},
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1, saveBtnText: "Save",


listeners: {
'beforeedit': function (editor, context, eOpts) {
debugger
var row = grid1.getSelectionModel().getSelection();
alert(row[0].index)


if (context.field == 'Audience') {

var combo = context.grid.columns[context.colIdx].getEditor();
combo.setValue(['46', '47']);

}
},
'edit': function (editor, context, eOpts) {
debugger
if (context.field == 'Audience') {
var vals = new Array();
vals.push('46')
vals.push('47')
var combo = context.grid.columns[context.colIdx].getEditor();
combo.select('47');
Ext.getCmp('AudienceCombo1').setValue(['46', '47']);
}
//this.isEditAllowed = false;
},
'validateedit': function (editor, context, eOpts) {
debugger
//this.isEditAllowed = false;
var griddata = grid1.getStore().data.items;
for (i = 0; i < griddata.length; i++) {
// var selectedaud = griddata[i].data.Audience.split(',');
// var oldval = context.newValues.Audience
// var diff = $(selectedaud).not(oldval).get();


// if (diff.length == 0) {
// //alert('cannot select')
// this.isEditAllowed = false;
// return false;
// }
}
},
'afteredit': function (editor, context, eOpts) {
debugger
var data = JSON.stringify(context.record.data);
$.ajax({
type: "POST",
url: "UpdateLandingZone",
data: { values: data, ZoneTypeId: 1, ZoneId: 1 },
dataType: "json",
success: function (msg) {


store1.data.items[context.rowIdx].data.AudienceGroupId = msg;
}, error: function () {
alert("error");
}
});
//this.isEditAllowed = false;
}
}
})
],
renderTo: 'LandingPageGrid',


//id: 'ID',
height: 250,
viewConfig: {
stripeRows: false,
listeners: {
viewready: function (view) {
//myMask.hide();
}
},
enableTextSelection: true
},
frame: true,
tbar: [
{
text: 'Add New Row',
handler: function () {
// Create a model instance
debugger;




store1.add({ campaignsetupId: '', Audience: '', Banner: '' })
cellEditing.startEditByPosition({ row: 0, column: 0 });
}
}]


});

slemmon
1 Oct 2014, 11:25 PM
See if the below example helps:

b7p