PDA

View Full Version : Combobox with JsonStore in EditorGridPanel



msinn
28 Sep 2009, 6:17 AM
Hello everybody,

i hope you have a good week start.

I'm trying to populate a combobox with Json data and it doesn't work.

First I solved this with a plain array store and everything seems to be OK in my grid.
Then I've tried to change my code to work with a JsonStore for the combobox, because this should be the final version. I see that I have in this case the same name for the valueFields in both grid store and combobox firmStore - "hbf_id", as in the database. With my array store I have diffrent valueFields. Should that be the problem?

Anyway, when I change the code for the combobox to work with the JsonStore nothing works anymore (see the code in the block comment bellow).

I know, there are hundreds of threads within this problem is solved, but I'm still searching for that right one.

Would you be kind to show me where I'm wrong and maybe to give me a link to a thread, which solved this problem in an easy way?

I'm just at the begin with Ext JS. I thank you for your precious time.

Marius




Ext.onReady(function() {

//...more code

//my grid store

var ds_model = Ext.data.Record.create([{
name : 'hbe_id'
}, {
name : 'hbf_id',
type : 'string'
}
//...more code
]);

var store = new Ext.data.GroupingStore({
url : 'database/getEmployees.php',
sortInfo : {
field : 'lastname',
direction : "ASC"
},
groupField : 'hbf_id',
reader : new Ext.data.JsonReader({
root : 'rows',
id : 'hbe_id'
}, ds_model)
});
store.load();

//here I've tried to use a JsonStore instead the array. This is what I need to have it working.
/*
var firmStore = new Ext.data.JsonStore({
url: 'database/getFirm.php',
root: 'rows',
fields: ['hbf_id', 'firmname'],
autoLoad: true
});

function firm_render(val) {
return firmStore.queryBy(function(rec) {
return rec.data.hbf_id == val;
}).itemAt(0).data.firmname;
}
*/

// my initial store and render for the combo box and everything works fine

var firmStore = new Ext.data.SimpleStore({
fields : ['id', 'firmname'],
data : [['1', 'firm1'], ['2', 'firm2']]
});

function firm_render(val) {
return firmStore.queryBy(function(rec) {
return rec.data.id == val;
}).itemAt(0).data.firmname;
}

var firm_edit = new Ext.form.ComboBox({
typeAhead : true,
triggerAction : 'all',
mode : 'local',
store : firmStore,
displayField : 'firmname',
valueField : 'id',
//so should it be with the JsonStore //valueField: 'hbf_id',
forceSelection: true,
allowblank : false,
editable : false
});

var grid = new Ext.grid.EditorGridPanel({
id : 'happy-birthday',
renderTo : document.body,
frame : true,
title : 'Happy-Birthday',
height : 750,
width : 1130,
clicksToEdit : 2,
store : store,
columns : [new Ext.grid.RowNumberer(), {
header : 'Firm',
dataIndex : 'hbf_id',
width : 100,
sortable : true,
editor : firm_edit,
renderer : firm_render
}
//...more code
],
view : new Ext.grid.GroupingView(),
sm : new Ext.grid.RowSelectionModel({
singleSelect : true
}),

listeners : {
afteredit : function(e) {
var conn = new Ext.data.Connection();
conn.request({
url : 'database/updateEmployee.php',
params : {
hbe_id : e.record.data.hbe_id,
field : e.field,
value : Ext.isDate(e.value) ? Ext.util.Format.date(e.value, 'd.m.Y') : e.value
},
success : function(resp, opt) {
e.record.commit();
},
failure : function(resp, opt) {
e.record.reject();
}
});
}
},
keys : [{
key : 46,
fn : function(key, e) {
deleteEmployee();
},
ctrl : false,
stopEvent : true
}],
tbar : [{
text : 'Add Employee',
icon : 'images/table_add.png',
cls : 'x-btn-text-icon',
handler : function() {
var conn = new Ext.data.Connection();
conn.request({
url : 'database/addEmployee.php',
params : {
hbe_id : -1000
},
success : function(resp, opt) {
var insert_id = Ext.util.JSON.decode(resp.responseText).insert_id;
grid.getStore().insert(0, new ds_model({
hbe_id : insert_id,
hbf_id : 1
// ...more code
}));
grid.startEditing(0, 0);
},
failure : function(resp, opt) {
Ext.Msg.alert('Error',
'Error-Text');
}
});
}
}, {
text : 'Delete Employee',
icon : 'images/table_delete.png',
cls : 'x-btn-text-icon',
handler : function() {
deleteEmployee();
}
}]
});

});