PDA

View Full Version : format coulmns after second store is loaded?



Cannon
19 Feb 2010, 9:23 AM
I have a row-editable grid with 3 columns: Day, Project, and Time

project has a custom Ext.form.ComboBox transformed from a <select> field dynamically generated by the server side and based on the database

the problem is, when not editing the row, it doesn't render the name of the project but rather the integer id number

i tried several ways of writing a custom formatter to correct this, but every time i do i encounter a
Error store.getById(value) is undefined i discovered that
store.load() is async

every now and again it gets the timing right but not always

but how do i make the formatter function wait?

callbacks and listeners don't seem to work here, at least i dont know how to write it correctly

any help would be greatly appreciated

here is the source code


/*!
* Ext JS Library 3.1.0
* Copyright(c) 2006-2009 Ext JS, LLC
* [email protected]
* http://www.extjs.com/license
*/
// Application instance for showing user-feedback messages.
var App = new Ext.App({});

// Create a standard HttpProxy instance.
var proxy = new Ext.data.HttpProxy({url: '/entries.xml'});
var projectProxy = new Ext.data.HttpProxy({api:{
read: {url: '/projects.xml', method: 'GET'}
}
});

var reader = new Ext.data.XmlReader({
record: 'entry',
id: 'id'
}, [
'day', 'project-id', 'time','employee_id'
]);
var projectReader = new Ext.data.XmlReader({
record: 'project',
id: 'id'
}, [
'name', 'description'
]);

// The new DataWriter component.
var writer = new Ext.data.XmlWriter({
encode: false // <-- don't return encoded JSON -- causes Ext.Ajax#request to send data using jsonData config rather than HTTP params
});



var projectStore = new Ext.data.Store({
proxy: projectProxy,
reader: projectReader
});

projectStore.load(); // load the store immeditately


// Typical Store collecting the Proxy, Reader and Writer together.
var store = new Ext.data.Store({
restful: true, // <-- This Store is RESTful
proxy: proxy,
reader: reader,
writer: writer // <-- plug a DataWriter into the store just as you would a Reader
});

store.load();// load the store immediately

////
// centralized listening of DataProxy events "beforewrite", "write" and "writeexception"
// upon Ext.data.DataProxy class. This is handy for centralizing user-feedback messaging into one place rather than
// attaching listenrs to EACH Store.
//
// Listen to all DataProxy beforewrite events
//
Ext.data.DataProxy.addListener('beforewrite', function(proxy, action) {
App.setAlert(App.STATUS_NOTICE, "Before " + action);
});

////
// all write events
//
Ext.data.DataProxy.addListener('write', function(proxy, action, result, res, rs) {
App.setAlert(true, action + ':' + res.message);
});

////
// all exception events
//
Ext.data.DataProxy.addListener('exception', function(proxy, type, action, options, res) {
App.setAlert(false, "Something bad happend while executing " + action);
});




Ext.onReady(function() {

Ext.util.Format.comboRenderer = function(value){
var record = projectStore.getById(value);
name = record.get('name');

return name;
};





var combo = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
lazyRender:true,
transform: 'project_id'})
var userColumns = [
{header: "Date", width: 120, dataIndex: 'day',editor: new Ext.form.DateField({}), renderer: Ext.util.Format.date()},
{ header: "Project",
width: 50,
dataIndex: 'project-id',
editor: combo,
renderer: Ext.util.Format.comboRenderer

},
{header: "Hours", width: 50, dataIndex: 'time',editor: new Ext.form.NumberField({})}

];


// use RowEditor for editing
var editor = new Ext.ux.grid.RowEditor({
saveText: 'Update'
});

// Create a typical GridPanel with RowEditor plugin
var userGrid = new Ext.grid.GridPanel({
renderTo: 'user-grid',
iconCls: 'icon-grid',
frame: true,
title: 'Users',
autoScroll: true,
height: 300,
store: store,
plugins: [editor],
columns : userColumns,
tbar: [{
text: 'Add',
iconCls: 'silk-add',
handler: onAdd
}, '-', {
text: 'Delete',
iconCls: 'silk-delete',
handler: onDelete
}, '-'],
viewConfig: {
forceFit: true
}
});

/**
* onAdd
*/
function onAdd(btn, ev) {
var u = new userGrid.store.recordType({
first : '',
last: '',
email : ''
});
editor.stopEditing();
userGrid.store.insert(0, u);
editor.startEditing(0);
}
/**
* onDelete
*/
function onDelete() {
var rec = userGrid.getSelectionModel().getSelected();
if (!rec) {
return false;
}
userGrid.store.remove(rec);
}

});