View Full Version : CRUD - RowEditor Store undefined

9 Oct 2009, 5:01 AM
Hello All,

I'm not a developper so I'm pulling my hair out after spending nearly 2 days on 1 line of code.
In short store. My store is undefined in 1 private function, and defined in another. Makes no sense to me.

I've put together an extended EditorGridPanel with a rowEditor, because I need to use the component several times across my application.

In the onAdd function, I always get Store undefined errors when attempting to create a new store record. I've tried several variations but nothing seems to work.

var store = this.store;
var store = this.getStore();
var store = Ext.getCmp('disk-mgmt-grid').getStore();

Would has got me puzzled is that the declaration var store = this.store in the onDelete function works like a charm.

Thanks in advance for any help.

ps - i've read through the scope tutorials on extjs and why it works in 1 function and not in the other.


// create pre-configured grid class
Ori.module.grid.DiskMgmt = Ext.extend(Ext.grid.EditorGridPanel, {
layout: 'fit'
,border: false
,stateful: false
//,title: 'Disk Mgmt'
//,closable: true
,initComponent:function() {

var grid = this;

this.recordObj = Ext.data.Record.create([
{name: 'disk_mgmt_id', type: 'int'}
,{name: 'disk_id', type: 'string'} //needs to be string because of insert val is null
,{name: 'disk_count', type: 'int'}
,{name: 'description', type: 'string'}

this.numbered = new Ext.grid.RowNumberer();

this.editor = new Ext.ux.grid.RowEditor({
saveText: 'Update'
Ext.apply(this, {
loadMask: true,
stripeRows: true,
store: new Ext.data.Store({
autoDestroy: true
,autoSave: true
,proxy: new Ext.data.HttpProxy({
//url: baseURL + '/ori.disk_mgmt_lookup' --otherwise all requests will go through this
api: {
read : baseURL + '/ori.disk_mgmt_lookup'
,update: baseURL + '/ori.update_disk_mgmt'
,create : baseURL + '/ori.create_disk_mgmt'
,destroy: baseURL + '/ori.delete_disk_mgmt'
remoteSort: true
,sortInfo:{field:'disk_mgmt_id', direction:'ASC'}
,reader: new Ext.data.JsonReader({
root: 'results',
idProperty: 'disk_mgmt_id',
totalProperty: 'total',
successProperty: 'success'
}, this.recordObj),
writer: new Ext.data.JsonWriter({
writeAllFields: false
,createRecord: this.onAdd
,deleteRecord: this.onDelete
listeners: {
write : function(store, action, result, res, rs) {
//Ext.Msg.alert('Write', res.message);
update : function(store, action, result, res, rs) {
remove : function(store, action, result, res, rs) {
exception : function(proxy, type, action, options, res, arg) {
if (type === 'remote') {
msg: res.message,
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
dataIndex: 'disk_id',
header: 'Type',
width: 200,
sortable: true,
editor: {
xtype: 'combo-disk-type',
id: 'disk-mgmt-type-combo',
selectOnFocus: true
renderer: this.renderDiskType
header: 'Disk Count'
,dataIndex: 'disk_count'
//,width: 75
,align: 'center'
,sortable: true
,editor:new Ext.form.TextField({
header: 'Description'
,dataIndex: 'description'
,width: 200
,sortable: true
,editor:new Ext.form.TextField({
selModel: new Ext.grid.RowSelectionModel({singleSelect:false})
,clicksToEdit: 2
,viewConfig: {
//,markDirty: false
text: 'Add'
,iconCls: 'icon-add'
,handler: this.onAdd
,scope: this
text: 'Delete'
,iconCls: 'icon-delete'
,handler: this.onDelete
,scope: this
}); // eo apply

this.relayEvents(this.store, ['destroy', 'save', 'update']);
// call parent
Ori.module.grid.DiskMgmt.superclass.initComponent.apply(this, arguments);
}, // eo function initComponent

onRender:function() {
Ori.module.grid.DiskMgmt.superclass.onRender.apply(this, arguments);

var tabs = Ext.getCmp('inventory-mgmt-tabpanel');
var grid = tabs.getActiveTab().getId();
var r = Ext.getCmp(grid).getSelectionModel().getSelected();
var selectedId = r.data['inventory_id'];

this.store.load.defer(1,this.store,[{params: {p_start:0, p_limit:20, l_id: selectedId}}]);
}, // eo function onRender

onAdd:function(btn, ev) {

var tabs = Ext.getCmp('inventory-mgmt-tabpanel');
var grid = tabs.getActiveTab().getId();
var r = Ext.getCmp(grid).getSelectionModel().getSelected();
var selectedId = r.data['inventory_id'];
//var store = this.store; //show err store undefined
//var store = this.getStore(); //show store err undefined
//var grid = Ext.getCmp('disk-mgmt-grid'); //show err undefined

var u = new store.recordType({ //store is undefined
disk_mgmt_id: ''
,disk_id: selectedId
,disk_count: 0
,description: ''

store.insert(0, u);


onSave : function(btn, ev) {
Ext.Msg.alert('Save', 'onSave is being executed');

onDelete:function(btn, ev) {

var rec = this.getSelectionModel().getSelected();
var store = this.store;

icon: Ext.Msg.QUESTION,
buttons: Ext.Msg.YESNO,
msg: 'Are you sure you want to delete this record?',
//scope: this,
fn: function(btn) {
if(btn === 'yes') {
if (!rec) {
Ext.Msg.alert('no seletion found');
return false;
} else {
} // Eo fn
}, // EoF onDelete

renderDiskType: function(val) {
var cbo = Ext.getCmp('disk-mgmt-type-combo');
var r = cbo.store.getById(val);
return r ? r.get('name') : '- Select a Disk -';

}); // eo extend

// register component
Ext.reg('disk-mgmt-grid', Ori.module.grid.DiskMgmt);