records is not defined

[bothman]

I get this error when I am trying to load record

app.js

Ext.Loader.setConfig({
enabled : true
});

Ext.onReady(function() {
Ext.application({

name : 'IN',
// autoCreateViewport: true,

appFolder : 'app',

controllers : ['Items'],

launch : function() {
Ext.create('Ext.container.Viewport', {
items : [{
xtype : 'itemuserconfig'
}]
});
}
});
})

UserConfig.js

Ext.define('IN.view.item.UserConfig', {
width : 1450,
height : 650,

extend : 'Ext.panel.Panel',
alias : 'widget.itemuserconfig',
layout : {
type : 'border',
padding : 5
},
defaults : {
split : false
},

initComponent : function() {
var sm = Ext.create('Ext.selection.CheckboxModel');
var cw;
this.items = [{
region : 'north',
collapsible : false,
split : false,
height : 30,
html : 'header',
minHeight : 30

}, {
region : 'center',
id : 'center-panel',
height : 50,
store : 'Items',
loadMask : true,
autoheight : true,
dockedItems : [{
xtype : 'pagingtoolbar',
store : 'Items',
dock : 'bottom',
displayInfo : true,
items : []
}],

items : cw = Ext.create('Ext.grid.Panel', {
title : 'List of Items',
store : 'Items',
loadMask : true,
autoheight : true,
selModel : sm,

columns : [{
header : 'User Name',
dataIndex : 'status',
flex : 1
}, {
header : 'Password',
dataIndex : 'desc1',
flex : 1
}, {
header : 'Description 2',
dataIndex : 'desc2',
flex : 1
}, {
header : 'Weight',
dataIndex : 'weight',
flex : 1
}]

}),
bbar : ['', ' ', {
text : 'Edit',
action : 'edit',
listeners : {
click : function() {
if (cw.getSelectionModel()
.hasSelection()) {
var row = cw.getSelectionModel()
.getSelection()[0];
Ext.getCmp('editUserNameId')
.setValue((row
.get('status'))
.toString());
Ext
.getCmp('passwordId')
.setValue((row.get('desc1'))
.toString());
}
Ext.resumeLayouts(true);
}
}
}]
}, {
region : 'west',
collapsible : true,
floatable : false,
split : false,
width : 200,
minWidth : 120,
minHeight : 140,
title : 'Filter'
}, {
region : 'south',
height : 200,
split : false,
collapsible : false,
title : 'User',
weight : -100,
items : [{
xtype : 'form',
items : [{
xtype : 'textfield',
labelWidth : 70,
fieldLabel : 'User Name',
id : 'editUserNameId'
}, {
xtype : 'textfield',
labelWidth : 70,
fieldLabel : 'Password',
id : 'passwordId'
}]
}],
bbar : ['', ' ', {
text : 'save',
action : 'save'
/* listeners : {
click : function() {
if (cw.getSelectionModel()
.hasSelection()) {
var row = cw.getSelectionModel()
.getSelection()[0];
Ext.getCmp('userNameId')
.setValue((row
.get('status'))
.toString());
Ext
.getCmp('passwordId')
.setValue((row.get('desc1'))
.toString());
}
Ext.resumeLayouts(true);
}
}*/
}]
}, {
region : 'south',
collapsible : false,
split : false,
height : 30,
html : 'footer'
}]
this.callParent();
}

});



and my controller is here



Ext.define('IN.controller.Items', {
extend : 'Ext.app.Controller',

// define the stores
stores : ['Items'],
// define the models
models : ['Item'],
// define the views
views : ['item.List', 'item.Edit', 'item.UserConfig'],

// special method that is called when your application boots
init : function() {

// control function makes it easy to listen to events on
// your view classes and take some action with a handler
// function
this.control({

// when the viewport is rendered
'userspanel' : {
itemdblclick : this.onPanelRendered
},

// when you double click on the grid layout
'itemlist' : {
itemdblclick : this.editItem
},

// when you click in the grid toolbar Add button
'itemlist button[action=add]' : {
click : this.addItem
},

// when you click on the Edit window save button
'itemuserconfig button[action=save]' : {
click : this.updateItem
},

'itemuserconfig button[action=edit]' : {
click : this.editItem
},

'itemuserconfig' : {
itemdblclick : this.selectEditItem
}
});
},

onPanelRendered : function() {
// just a console log to show when the panel si rendered
console.log('The panel was rendered');
},

addItem : function() {
// create the window and set the mode to Add
var view = Ext.widget('itemedit');
view.addMode = true;
},

editItem : function(grid, record) {
// create the window for editing
// the double click on the row sends the grid row record
// var view = Ext.widget('itemuserconfig');
// load the record into the form
button = Ext.getCmp('editUserNameId');
form = button.up().loadRecord(records[0].data);
console.log(view.down('form').getRecord());
console.log(view.down('form').getValues())
// get the Item Number field in the form and protect it
// form =
// Ext.getCmp('userNameId').up().getComponent('itemNumber').setReadOnly(true);

},

selectEditItem : function(grid, record) {
console.log('Select');
Ext.Msg.alert('Select');
},

updateItem : function(button) {
// get access to the window using the button reference
var panel = button.up('panel');
// get access to the form using the window reference
form = Ext.getCmp('editUserNameId').up();

// Add an Item
if (panel.addMode) {
// check if the form passed all validations
if (form.getForm().isValid()) {
// if there are no errors then send the Add request to
// server
Ext.Ajax.request({
url : 'ItemMaintenance',
params : {
company : 1,
// this encodes the form values to a
// JSON object
addData : Ext.encode(form.getValues())
},
scope : this,
// method to call when the request is
// successful
success : this.onSaveSuccess,
// method to call when the request is a
// failure
failure : this.onSaveFailure
});
// close the window
win.close();
}
} else {
// get reference to the record
record = form.getRecord();
// get reference to the form values
values = form.getValues();
// set the record with new values
record.set(values);
// close the window
win.close();
// Ask the stote to sync the new data with the server
this.getItemsStore().sync();
}
},

onSaveFailure : function(err) {
// Alert the user about communication error
Ext.MessageBox.alert('Status', 'Error occured during Item Add');
},

onSaveSuccess : function(response) {
// Alert the user about communication error
Ext.MessageBox.alert('Status', 'Item successfully Added');
// load the store to get the new Item that was added
this.getItemsStore().load();
}

});

the problem in the lines


ReferenceError: records is not defined





form = button.up().loadRecord(records[0].data);














Items.j...8626016 (line 66, col 12)


TypeError: record is undefined





record.set(values);

















Items.j...8626016 (line 117, col 6)




when I am trying to load the record in the form
and when I am trying to save the record with new values

[jdkhamba]

You might want to split the views into separate files as debugging source code like this is very difficult. It is also not recommended to use ids for components. itemId is a recommended option.

That being said, what exactly are you trying to achieve? There might be a cleaner implementation possible.

[bothman]

thank your for response I am new with Extjs and trying to edit a grid row by clicking on edit button ( not by double click on the row). what do you mean by splitting the view this is a border layout, can I make every region in separate view?

[jdkhamba]

Sounds like you are trying to do what the rowediting plugin already does out of the box.

Take a look at this example:

http://docs.sencha.com/extjs/4.2.0/#!/example/grid/row-editing.html

In this example, on click of the row, it becomes editable but that can be very easily changed on click of some button like the "Add employee" button. It is always better to first check out the example given in the docs before implementing something, especially the grid examples.

As for splitting the views in separate files, you can do them however you want but it would make most sense to separate them in a way such that each view captures one small unit of independent functionality.Take a look at the MVC architecture supported by ExtJS:

http://docs.sencha.com/extjs/4.2.0/#!/guide/application_architecture
the JS files can be loaded dyna,ically by extjs as long as all the conventions are followed.

Take a look at a small example to demonstrate splitting the views into files:

https://fiddle.sencha.com/#fiddle/124q

If you click on the small icon with 3 bars at the bottom left of the screen in the fiddle you would see the folder structure.

[bothman]

thank you jdkhamba your answer was very helpful I found solution :)