PDA

View Full Version : a combobox value isn't displayed in a grid editor after a read request is made



flamant
10 May 2011, 8:35 AM
Hi,

I implemented a grid editor that load the records in the cache from a read method.

2 columns are combobox and the displayFields corresponding to the values from the server are not displayed. They are present in the row but they are not visible

here is the code

The fields :


var fields = [
{ name: 'id' },
{ name: 'fromValue' },
{ name: 'toValue'},
{ name: 'operator' },
{ name: 'status'}
];


the jsonstore with its proxy and writer :


var gridWriter = new Ext.data.JsonWriter({
writeAllFields: true
});

var proxy = new Ext.data.HttpProxy({
api:{
read: { url: '../secure/getAdvancedSearchClause.htm'},
create: { url: '../secure/createAdvancedSearchClause.htm'},
update: { url: '../secure/updateAdvancedSearchClause.htm'},
destroy: { url: '../secure/deleteAdvancedSearchClause.htm'}
}

});

var subjectRemoteJsonStore = new Ext.data.JsonStore({
fields: fields,
proxy: proxy,
baseParams: { element: 'Subject' },
root: 'records',
idProperty: 'id',
totalProperty: 'totalCount',
autoLoad: true,
autoSave: false,
successProperty: 'success',
writer: gridWriter
});


the combobox corresponding to fromValue and toValue :


var subjectFromComboEditor = new Ext.form.ComboBox({
triggerAction: 'all',
displayField: 'subjectNumber',
valueField: 'id',
lazyRender:true,
store: new Ext.data.JsonStore({
root: 'records',
autoLoad:true,
idProperty: 'id',
fields: [
{ name: 'id' },
{ name: 'subjectNumber' }
],
proxy: new Ext.data.ScriptTagProxy({
url: "<c:url value="/secure/getAdvancedSearchSubjectList.htm"/>"
})
})
});

var subjectToComboEditor = new Ext.form.ComboBox({
triggerAction: 'all',
displayField: 'subjectNumber',
valueField: 'id',
lazyRender:true,
store: new Ext.data.JsonStore({
root: 'records',
autoLoad:true,
idProperty: 'id',
fields: [
{ name: 'id' },
{ name: 'subjectNumber' }
],
proxy: new Ext.data.ScriptTagProxy({
url: "<c:url value="/secure/getAdvancedSearchSubjectList.htm"/>"
})
})
});


The column model :


var subjectColumnModel = [
{ header: '<spring:message code="advancedSearch.fromValue"/>',
dataIndex: 'fromValue',
editor: subjectFromComboEditor,
renderer: new Ext.util.Format.comboRenderer(subjectFromComboEditor)

},
{ header: '<spring:message code="advancedSearch.toValue"/>',
dataIndex: 'toValue',
editor: subjectToComboEditor,
renderer: new Ext.util.Format.comboRenderer(subjectToComboEditor)

},
{ header: '<spring:message code="advancedSearch.operator"/>',
dataIndex: 'operator',
editor: subjectOperatorComboEditor,
renderer: new Ext.util.Format.comboRenderer(subjectOperatorComboEditor)

},
{ header: '<spring:message code="advancedSearch.status"/>',
dataIndex: 'status',
editor: subjectStatusComboEditor,
renderer: new Ext.util.Format.comboRenderer(subjectStatusComboEditor),
width: 160

}
];


with the following comborenderer :



// create reusable renderer
Ext.util.Format.comboRenderer = function(combo){
return function(value){
var record = combo.findRecord(combo.valueField, value);
return record ? record.get(combo.displayField) : combo.valueNotFoundText;
}
}


The other column values are well displayed. The difference is that These other combos use an ArrayStore like the following :


var subjectOperatorComboEditor = new Ext.form.ComboBox({
triggerAction: 'all',
displayField: 'operator',
valueField: 'opCode',
lazyRender:true,
mode: 'local',
store: new Ext.data.ArrayStore({
data: [
['Y', '='],
['N','Not =']
],
fields: [
{name: 'opCode'},
{name: 'operator'}
]
})
});


But the values corresponding to fromValue and toValue are not displayed

Thank you in advance for your answers

flamant
10 May 2011, 8:38 AM
I forgot to give the grid :


var subjectGrid = new Ext.grid.EditorGridPanel({
id: 'subjectAdvancedSearchGridId',
columns: subjectColumnModel,
store: subjectRemoteJsonStore,
selModel: new Ext.grid.RowSelectionModel({singleSelect : true}),
height: 100,
clicksToEdit: 1,
anchor: '100%',
viewConfig: {forceFit:true},
enableHdMenu: false,
tbar: [
{ id: 'subjectAddConstraintId',
tooltip: '<spring:message code="advancedSearch.newSubjectConstraint"/>',
iconCls: 'addFilter',
handler: function(button, evt) {
var grid = Ext.getCmp('subjectAdvancedSearchGridId');
var removeButton = Ext.getCmp('subjectRemoveConstraintId');
addAdvancedSearchConstraint(grid);
updateAdvancedSearchButtonVis(grid, removeButton);
}
},
{
id: 'subjectRemoveConstraintId',
tooltip: '<spring:message code="advancedSearch.removeSubjectConstraint"/>',
hidden: true,
iconCls: 'removeFilter',
handler: function(button, evt) {
var grid = Ext.getCmp('subjectAdvancedSearchGridId');
var removeButton = Ext.getCmp('subjectRemoveConstraintId');
removeAdvancedSearchConstraint(grid);
updateAdvancedSearchButtonVis(grid, removeButton);
}
}
],
listeners: {
rowclick: function(grid, rowIndex, evt) {
var removeButton = Ext.getCmp('subjectRemoveConstraintId');
removeButton.setVisible(true);
}
}
});

friend
10 May 2011, 8:45 AM
You'll need to add the hiddenName attribute to your Combo Boxen.

flamant
10 May 2011, 9:12 AM
Hi friend and thank you for your answer

I tried to add a hiddenName this way but it doesn't work



var subjectFromComboEditor = new Ext.form.ComboBox({
triggerAction: 'all',
displayField: 'subjectNumber',
valueField: 'id',
hiddenName: 'id',
lazyRender:true,
store: new Ext.data.JsonStore({
root: 'records',
autoLoad:true,
idProperty: 'id',

fields: [
{ name: 'id' },
{ name: 'subjectNumber' }
],
proxy: new Ext.data.ScriptTagProxy({
url: "<c:url value="/secure/getAdvancedSearchSubjectList.htm"/>"
})
})
});

var subjectToComboEditor = new Ext.form.ComboBox({
triggerAction: 'all',
displayField: 'subjectNumber',
valueField: 'id',
hiddenName: 'id',
lazyRender:true,
store: new Ext.data.JsonStore({
root: 'records',
autoLoad:true,
idProperty: 'id',
fields: [
{ name: 'id' },
{ name: 'subjectNumber' }
],
proxy: new Ext.data.ScriptTagProxy({
url: "<c:url value="/secure/getAdvancedSearchSubjectList.htm"/>"
})
})
});