Sample extjs app continued, grid and form setup

sample-extjs-app-cont.js

var textField =  new Ext.form.TextField();

// Grid-columns with meta-data from backend.
var recipeColumns =  [
    {header: "ID", width: 40, sortable: true, dataIndex: 'id'},
    {header: "Name", width: 100, sortable: true, dataIndex: 'name', editor: textField},
    {header: "Brew Notes", width: 180, sortable: true, dataIndex: 'brewNotes', editor: textField},
    {header: "Taste Notes", width: 180, sortable: true, dataIndex: 'tasteNotes', editor: textField},
	{
		header: 'Yeast',
		width: 130,
		dataIndex: 'yeastName',
		editor: new Ext.form.ComboBox({
			editable: false,
			store: this.yeastStore,
			mode: 'remote',
			triggerAction: 'all',
			lazyRender: true,
			listClass: 'x-combo-list-small',
			displayField: 'name',
			valueField: 'name',
			hiddenName: 'yeastName'
		}),
		renderer:

			  function(value, metaData, record, rowIndex, colIndex, store) {
				  if (value) {
					  return value;
				  }
				  else{
					  var yeast = record.get('yeast');
					  return yeast ? yeast.name : '';
				  }
			  }
	}
	/* No date time picker in extjs, so leave for now.  
    {header: "Brew Start", width: 120, sortable: true, dataIndex: 'start',  xtype:'datecolumn', format: 'M d, Y H:i:s', editor: textField},
    {header: "Brew End", width: 120, sortable: true, dataIndex: 'end',  xtype:'datecolumn', format: 'M d, Y H:i:s', editor: textField}*/
];

Ext.onReady(function() {
    Ext.QuickTips.init();

    // create recipe.Form instance (@see recipeForm.js)
    var recipeForm = new youbrew.recipe.Form({
        renderTo: 'recipe-form',
		yeastStore: this.yeastStore,
        listeners: {
            create : function(fpanel, data) {   // <-- custom "create" event defined in youbrew.recipe.Form class
                var rec = new recipeGrid.store.recordType(data);
                recipeGrid.store.insert(0, rec);
            }
        }
    });

    // create youbrew.recipe.Grid instance (@see recipeGrid.js)
    var recipeGrid = new youbrew.recipe.Grid({
        renderTo: 'recipe-grid',
        store: store,
		clicksToEdit: 'auto',
        columns : recipeColumns,
        listeners: {
            rowclick: function(g, index, ev) {
                var rec = g.store.getAt(index);
                recipeForm.loadRecord(rec);
				//
				//Load the yeast display field
				recipeForm.yeastCombo.setRawValue(rec.get('yeast') ? rec.get('yeast').name : null);
            },
            destroy : function() {
                recipeForm.getForm().reset();
            }
        }
    });
});