PDA

View Full Version : Editable Grid panel giving type error b is not defined



diet1986
5 Nov 2012, 12:25 AM
Hi All, i have a Ext 4 js Grid as below.I have implemented editable plugin in it to change the cells values of the grid.



Ext.define('tpsyndev.view.filedatapreview', {
extend: 'Ext.grid.Panel',
alias: 'widget.filedatapreview',
selType: 'cellmodel',
width:400,
height:200,
autoDestroy:true,
autoScroll:true,
id : 'fileuploadpreview',
//enableLocking : true,
collapsible: true,
x: 10,
y: 5,
columns: [
{
text: 'Customer Number',
flex: 70,
dataIndex: 'customerNumber',
cls: 'font-weight:bold;color:#04408c',
editor: 'textfield'
},
{
text: 'Supplier Number',
flex: 70,
dataIndex: 'supplierNumber',
cls: 'font-weight:bold;color:#04408c',
editor: 'textfield'
},
{
text: 'Party1ItemNumber',
flex: 70,
dataIndex: 'party1ItemNumber',
cls: 'font-weight:bold;color:#04408c',
editor: 'textfield'
},
{
text: 'Party2ItemNumber',
flex: 70,
dataIndex: 'party2ItemNumber',
cls: 'font-weight:bold;color:#04408c',
editor: 'textfield'
},
{
text: 'Item Description',
flex: 70,
dataIndex: 'itemDescripton',
cls: 'font-weight:bold;color:#04408c',
editor: 'textfield'
},
{
text: 'Currency',
flex: 70,
dataIndex: 'currency',
cls: 'font-weight:bold;color:#04408c',
editor: 'textfield'
},
{
text: 'BaseUOM',
flex: 70,
dataIndex: 'baseUOM',
cls: 'font-weight:bold;color:#04408c',
editor: 'textfield'
},
{
text: 'Price',
flex: 70,
dataIndex: 'price',
cls: 'font-weight:bold;color:#04408c',
editor: 'textfield'
},
{
text: 'StartDate',
flex: 70,
dataIndex: 'startDate',
xtype: 'datecolumn',
cls: 'font-weight:bold;color:#04408c',
editor: 'textfield'
},
{
text: 'End Date',
flex: 70,
dataIndex: 'endDate',
xtype: 'datecolumn',
cls: 'font-weight:bold;color:#04408c',
editor: 'textfield'
},
{
text: 'ActiveFlag',
flex: 70,
dataIndex: 'activeFlag',
cls: 'font-weight:bold;color:#04408c',
editor: 'textfield'
},
{
text: 'Validation Errors',
flex: 70,
dataIndex: 'validations',
cls: 'font-weight:bold;color:#04408c',
editor: 'textfield'
}
],
collapsible: false,
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
autoScroll: true,
title: 'Uploaded Data Preview',
columnLines: true,
sortableColumns: true,
// multiSelect: true,
store:'tempPartyRelations',
dockedItems: [{
xtype: 'pagingtoolbar',
dock: 'bottom',
layout: {
pack: 'left'
},
items: [
{ xtype: 'component', flex: 1 },
{ xtype: 'button', text: 'Submit', width: 80, listeners: {
'click': function() {
var datar = new Array();
var jsonDataEncode = "";
var records = Ext.widget('filedatapreview').getStore().getRange();
for (var i = 0; i < records.length; i++) {
datar.push(records[i].data);
}
jsonDataEncode = Ext.encode(datar);
Ext.Ajax.request({
url: '/tpsyndev/MainLayout/saveTempPartiesDataToMainDomian',
params: {
tempParties: jsonDataEncode
},
success: function(response) {
var text = response.responseText;
// process server response here. For example
alert('Success fully saved');
Ext.getCmp('filedatapreview').getStore().removeAll();

}
});
}
}
},{ xtype: 'button', text: 'Validate', width: 80, listeners: {
'click': function() {
var datar = new Array();
var jsonDataEncode = "";
var records = Ext.widget('filedatapreview').getStore().getRange();
for (var i = 0; i < records.length; i++) {
datar.push(records[i].data);
}
jsonDataEncode = Ext.encode(datar);
var k = eval( jsonDataEncode )
Ext.Ajax.request({
url: '/tpsyndev/MainLayout/validateGridData',
params: {
tempParties: jsonDataEncode
},
success: function(response) {
var text = response.responseText;
// process server response here. For example
alert('validation check');
Ext.getCmp('filedatapreview').getStore().load({
params: {
runID:k[0].processRunDetailsId,
type: 'json'
},
callback: function(records, operation, success) {
Ext.getCmp('filedatapreview').getView().refresh();
},
scope: this
});
}
});
}
}
}
]
}],
});

I am trying to load store and refresh grid on click of validate button and after this when i am trying to change the value of any cell of the grid i am getting type error b is undefined.

vietits
5 Nov 2012, 2:08 AM
I'm not sure this will fix your problem. However, below is my suggestion to fix your code of Validate button. It will also applied for the Submit button.


xtype: 'button',
text: 'Validate',
width: 80,
listeners: {
'click': function() {
var datar = new Array();
var jsonDataEncode = "";
// Ext.widget('filedatapreview') will create a new instance of "filedatapreview", I guess this is not what you want. Instead, you want to refer to current grid that contains this "Validate" button.
// var records = Ext.widget('filedatapreview').getStore().getRange();
var grid = this.up('filedatapreview'); // get the grid contains this button.
var store = grid.getStore(); // get store bound to the grid
var records = store.getRange();
for (var i = 0; i < records.length; i++) {

datar.push(records[i].data);
}
jsonDataEncode = Ext.encode(datar);
// var k = eval( jsonDataEncode ) <- no need because k will equivalent to datar
Ext.Ajax.request({
url: '/tpsyndev/MainLayout/validateGridData',
params: {
tempParties: jsonDataEncode
},
success: function(response) {
var text = response.responseText;
// process server response here. For example
alert('validation check');
// Here I suppose you refer to the same grid. I'm not sure I'm right or not?
// Ext.getCmp('filedatapreview').getStore().load({
store.load({
params: {

//runID: k[0].processRunDetailsId,
runID: datar[0].processRunDetailsId,
type: 'json'

},
callback: function(records, operation, success) {
// Here I suppose you refer to the same grid. I'm not sure I'm right or not?
// Ext.getCmp('filedatapreview').getView().refresh();
grid.getView().refresh();
},

scope: this
});
}
});
}
}

BTW, you should put your code between CODE tag for readability.

diet1986
5 Nov 2012, 2:14 AM
yes you are right

diet1986
5 Nov 2012, 2:31 AM
Thnx Vietits your suggestion work's .You are a genious.Thanx alot

I'm not sure this will fix your problem. However, below is my suggestion to fix your code of Validate button. It will also applied for the Submit button.


xtype: 'button',
text: 'Validate',
width: 80,
listeners: {
'click': function() {
var datar = new Array();
var jsonDataEncode = "";
// Ext.widget('filedatapreview') will create a new instance of "filedatapreview", I guess this is not what you want. Instead, you want to refer to current grid that contains this "Validate" button.
// var records = Ext.widget('filedatapreview').getStore().getRange();
var grid = this.up('filedatapreview'); // get the grid contains this button.
var store = grid.getStore(); // get store bound to the grid
var records = store.getRange();
for (var i = 0; i < records.length; i++) {

datar.push(records[i].data);
}
jsonDataEncode = Ext.encode(datar);
// var k = eval( jsonDataEncode ) <- no need because k will equivalent to datar
Ext.Ajax.request({
url: '/tpsyndev/MainLayout/validateGridData',
params: {
tempParties: jsonDataEncode
},
success: function(response) {
var text = response.responseText;
// process server response here. For example
alert('validation check');
// Here I suppose you refer to the same grid. I'm not sure I'm right or not?
// Ext.getCmp('filedatapreview').getStore().load({
store.load({
params: {

//runID: k[0].processRunDetailsId,
runID: datar[0].processRunDetailsId,
type: 'json'

},
callback: function(records, operation, success) {
// Here I suppose you refer to the same grid. I'm not sure I'm right or not?
// Ext.getCmp('filedatapreview').getView().refresh();
grid.getView().refresh();
},

scope: this
});
}
});
}
}

BTW, you should put your code between CODE tag for readability.