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

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',
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 : ''
userGrid.store.insert(0, u);
* onDelete
function onDelete() {
var rec = userGrid.getSelectionModel().getSelected();
if (!rec) {
return false;