PDA

View Full Version : Add record to SimpleStore; bind to EditorGrid



andrewjbaker
10 Jan 2008, 3:15 AM
I have created a SimpleStore and bound it to an EditorGrid in the following manner.



ssQualifications = new Ext.data.SimpleStore({
fields: ['QualificationCode', 'SubjectCode1', 'SubjectCode2', 'Verified']
});
var egQualifications = new Ext.grid.EditorGrid('egQualifications', {
autoSizeColumns: true,
autoWidth: true,
cm: cmQualifications,
ds: ssQualifications,
height: 128
});


Attached to an onClick event, I am using the following code to attempt to add data to the ssQualifications SimpleStore so that I can populate the EditorGrid.



var record = new Ext.data.Record.create({
{ name: 'QualificationCode' },
{ name: 'SubjectCode1' },
{ name: 'SubjectCode2' },
{ name: 'Verified' }
});
ssQualifications.add(new record({
QualificationCode: qualifications[0].QualificationCode,
SubjectCode1: qualifications[0].SubjectCode1,
SubjectCode2: qualifications[0].SubjectCode2,
Verified: qualifications[0].Verified
});


Using Firebug, I receive the following error message in the call to Ext.data.Record.create():

invalid property id
{ name: 'QualificationCode' },\n

Any ideas? What am I doing wrong?

andrewjbaker
10 Jan 2008, 4:14 AM
OK, I've spotted a couple of extraneous braces and a missing parenthesis.

New code as follows...



var record = new Ext.data.Record.create(
{ name: 'QualificationCode' },
{ name: 'SubjectCode1' },
{ name: 'SubjectCode2' },
{ name: 'Verified' }
);
ssQualifications.add(new record({
QualificationCode: qualifications[0].QualificationCode,
SubjectCode1: qualifications[0].SubjectCode1,
SubjectCode2: qualifications[0].SubjectCode2,
Verified: qualifications[0].Verified
}));


The error is no longer raised. However, the EditorGrid does not reflect the changes made to the SimpleStore. Is there a reloadDataSource() method or similar for the EditorGrid component? I couldn't spy one in the documentation.

andrewjbaker
10 Jan 2008, 4:22 AM
Right, I think the EditorGrid may be updated automatically. The Verified column has its values set to No when the code within the onClick event is triggered.

I wonder if there's a problem with the mapping. In the EditorGrid the columns are named in camel-case (qualificationCode, subjectCode1, etc.) but in the SimpleStore they're named using Pascal-case (QualificationCode, SubjectCode1, etc.).

Hmm...

andrewjbaker
10 Jan 2008, 4:30 AM
I've. Answered. My. Own. Question. Doh! Gee, I hate it when that happens. Ultimately it all came down to case. The case of the EditorGrid's ColumnModel components, the SimpleStore fields and the attributes passed to the Ext.data.Record.create() method must all be identical.



/*
* Qualifications EditorGrid
*/
var cmQualifications = new Ext.grid.ColumnModel([{
dataIndex: 'qualificationCode',
editor: new Ext.grid.GridEditor(
new Ext.form.ComboBox({
displayField: 'Value',
emptyText: '...',
id: 'qualificationCode',
mode: 'remote',
name: 'qualificationCode',
resizable: true,
selectOnFocus: true,
store: sQualificationCodes,
triggerAction: 'all',
typeAhead: true,
valueField: 'Key'
})
),
header: 'Qualification Code'
}, {
dataIndex: 'subjectCode1',
editor: new Ext.grid.GridEditor(
new Ext.form.ComboBox({
displayField: 'Value',
emptyText: '...',
id: 'subjectCode1',
mode: 'remote',
name: 'subjectCode1',
resizable: true,
selectOnFocus: true,
store: sDegreeSubjects,
triggerAction: 'all',
typeAhead: true,
valueField: 'Key'
})
),
header: 'Subject Code 1'
}, {
dataIndex: 'subjectCode2',
editor: new Ext.grid.GridEditor(
new Ext.form.ComboBox({
displayField: 'Value',
emptyText: '...',
id: 'subjectCode2',
mode: 'remote',
name: 'subjectCode2',
resizable: true,
selectOnFocus: true,
store: sDegreeSubjects,
triggerAction: 'all',
typeAhead: true,
valueField: 'Key'
})
),
header: 'Subject Code 2'
}, {
dataIndex: 'verified',
editor: new Ext.grid.GridEditor(
new Ext.form.Checkbox({ id: 'verified' })
),
header: 'Is Verified',
renderer: function(value) {
return (value) ? ('Yes') : ('No');
}
}]);
ssQualifications = new Ext.data.SimpleStore({
fields: ['qualificationCode', 'subjectCode1', 'subjectCode2', 'verified']
});
var egQualifications = new Ext.grid.EditorGrid('egQualifications', {
autoSizeColumns: true,
autoWidth: true,
cm: cmQualifications,
ds: ssQualifications,
height: 128
});




var record = new Ext.data.Record.create(
{ name: 'qualificationCode' },
{ name: 'subjectCode1' },
{ name: 'subjectCode2' },
{ name: 'verified' }
);
for (var i = 0; i < qualifications.length; i++) {
ssQualifications.add(new record({
qualificationCode: qualifications[i].QualificationCode,
subjectCode1: qualifications[i].SubjectCode1,
subjectCode2: qualifications[i].SubjectCode2,
verified: qualifications[i].Verified
}));
}