Combo Box In Extjs 4 - extjs4

Question

my combo boxes are not displaying when i click on add occurs a new row but it shows "Uncaught TypeError: Cannot read property 'xtype' of undefined" error every time and not showing the combo box.please help me to solve this problem.it works fine in extjs 3 but i am currently working on extjs 4
var cond1 = Ext.create('Ext.data.Store', {
fields: ['maint_condition1'],
data : [
['Excellent'],['Poor'],['New'],['good'],['scrap']
]
}
);
var cond2 = Ext.create('Ext.data.Store', {
fields: ['maint_condition2'],
data : [
['Excellent'],['Poor'],['New']
]
}
);
var cond3 = Ext.create('Ext.data.Store', {
fields: ['maint_condition3'],
data : [
['New'],['Excellent']
]
}
);
var cond4 = Ext.create('Ext.data.Store', {
fields: ['maint_condition4'],
data : [
['New'],['Excellent'],['good'],['Poor'],['scrap']
]
}
);
//ready store
//var cb_select2 =new Ext.grid.CheckboxSelectionModel();
//var cb_select2 =new Ext.grid.CheckboxSelectionModel();
var asset_edit = new Ext.form.TextField();
var notes_edit = new Ext.form.TextField();
var date_edit = new Ext.form.DateField({format: 'm/d/Y'});
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false,
saveText: 'Save',
listeners: {
afteredit: syncStore
}
});
var cond1_edit = new Ext.form.DateField({format: 'combo'});
//var sm = Ext.grid.getSelectionModel();
//Grid for show data
var grid = Ext.create('Ext.grid.Panel', {
renderTo: document.body,
//renderTo: 'grid1',
extend: 'Ext.form.ComboBox',
plugins:[rowEditing],
frame: true,
height:140,
width:950,
enableColumnMove: false,
store: store,
columns: [
{header: "Asset ID", dataIndex: 'asset_id',readOnly: true},
{header: "Maint. ID", dataIndex: 'id',readOnly: true},
{header: "Date", dataIndex: 'date_',xtype: 'datecolumn',width: 90,
editor: {
xtype: 'datefield',
allowBlank: false,
format: 'm/d/Y',
minValue: '01/01/2006',
minText: 'Cannot have a start date before the company existed!',
maxValue: Ext.Date.format(new Date(), 'm/d/Y')
}
},
{header: "Notes", dataIndex: 'notes',editor: notes_edit},
{header: "Maint_condition1", dataIndex: 'maint_condition1', sortable: true,width: 120,
editor: Ext.create('Ext.form.ComboBox', {
xtype:'combobox',
allowBlank: false,
mode: 'local',
store: cond1,
valueField: 'maint_condition1',
displayField: 'maint_condition1',
triggerAction: 'all',
editable: false
}
)},
{header: "Maint_condition2", dataIndex: 'maint_condition2', sortable: true,width: 120,
editor: Ext.create('Ext.form.ComboBox', {
xtype:'combobox',
allowBlank: false,
mode: 'local',
store: cond2,
valueField: 'maint_condition2',
displayField: 'maint_condition2',
triggerAction: 'all',
editable: false
}
)},
{header: "Maint_condition3", dataIndex: 'maint_condition3', sortable: true,width: 120,
editor: Ext.create('Ext.form.ComboBox', {
xtype:'combobox',
allowBlank: false,
mode: 'local',
store: cond3,
valueField: 'maint_condition3',
displayField: 'maint_condition3',
triggerAction: 'all',
editable: false
}
)},
{header: "Maint_condition4", dataIndex: 'maint_condition4', sortable: true,width: 120,
editor: Ext.create('Ext.form.ComboBox', {
xtype:'combobox',
allowBlank: false,
mode: 'local',
store: cond4,
valueField: 'maint_condition4',
displayField: 'maint_condition4',
triggerAction: 'all',
editable: false
}
)}
],
tbar: [
{
text: 'Add Record',
icon: 'http://localhost/toolbar2/app/webroot/images/table_add.png',
cls: 'x-btn-text-icon',
handler: function()
{
rowEditing.cancelEdit();
var r = Ext.create('User', {
id: 0,
notes: 'New Notes',
asset_id: window.id,
});
store.insert(0, r);
rowEditing.startEdit(0,0);
}
},
{
text: 'Remove Record',
icon: 'http://localhost/toolbar2/app/webroot/images/table_delete.png',
cls: 'x-btn-text-icon',
handler: function() {
var sm = grid.getSelectionModel();
rowEditing.cancelEdit();
store.remove(sm.getSelection());
if (store.getCount() > 0)
{
sm.select(0);
}
}
}]
});

Answer 1

As I mentioned on my last comment on your other question - you need to define datatypes in the store - aka the xtype. Your code won't just know the items are strings unless you implicit define it.