PDA

View Full Version : Stuck in Row-edit plugin



singlaive
2 Mar 2013, 12:13 AM
Well I am so exhausted, can not figure out why I got the second error when I click a row of my grid. Every time I click a row, it prints out a line of error like that.

And yes, the first one also piss me off. I did not even use 'substring' method in my code.

The error:



Uncaught TypeError: Cannot call method 'substring' of undefined ext-all-debug.js:4596 (file:///D:/Dropbox/PPFF/ext-4.1.1a/ext-all-debug.js)



Uncaught TypeError: Cannot call method 'down' of undefined Uncaught TypeError: Cannot call method 'down' of undefined ppff.js:254 (file:///D:/Dropbox/PPFF/ppff.js)



The code:


Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*',
'Ext.form.*',
]);


// Define Company entity
// Null out built in convert functions for performance *because the raw data is known to be valid*
// Specifying defaultValue as undefined will also save code. *As long as there will always be values in the data, or the app tolerates undefined field values*
Ext.define('FFF', {
extend: 'Ext.data.Model',
fields: [
{name: 'FFF'},
{name: 'Mandatory', type: 'string'},
{name: 'Option', type: 'string'},
{name: 'Select', type: 'boolean', convert: null, defaultValue: undefined},
{name: 'Mutex', type: 'boolean'},
{name: 'Included', type: 'boolean'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia', defaultValue: undefined}
],
idProperty: 'company'
});


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

// setup the state provider, all state information will be saved to a cookie
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));


// sample static data for the store
var myData = [
['CAPTIONS_TELETEXT', '', 'Option', true, false, true, '9/1 12:00am'],
['CAPTIONS_TELETEXT_FULL_PAGE_ENGINE', 'Mandatory', '', false, false, true, '9/1 12:00am'],
['CAPTIONS_CEA_CLOSED_CAPTIONS', '', 'Option', true, false, false, '9/1 12:00am'],
['CAPTIONS_DVB_SUBTITLES', '', 'Option', true, false, true, '9/1 12:00am'],
['CAROUSEL _OTV', '', '', false, false, false, '9/1 12:00am'],
['CAROUSEL_DSMCC', 'Mandatory', '', false, false, true, '9/1 12:00am'],
['CAROUSEL_MHC', '', 'Option', true, false, true, '9/1 12:00am']
];


function renderer_bool(value){
if (value === false)
{
return '<span"> </span>';
}
else
{
return true;
}
}
/**
* Custom function used for column renderer
* @param {Object} val
*/
function change(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
}


/**
* Custom function used for column renderer
* @param {Object} val
*/
function pctChange(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '%</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}


// create the data store
var store = Ext.create('Ext.data.ArrayStore', {
model: 'FFF',
data: myData
});


var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false
});


// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
stateful: true,
collapsible: true,
multiSelect: true,
stateId: 'stateGrid',
columns: [
{
text : 'FFF & FFF setting',
flex : 1,
sortable : false,
dataIndex: 'FFF',
editor: {
xtype: 'textfield',
allowBlank: false
}

},
{
text : 'Mandatory',
width : 75,
sortable : false,
dataIndex: 'Mandatory',
editor: {
xtype: 'textfield',
allowBlank: true
}


},
{
text : 'Option',
width : 75,
sortable : false,
dataIndex: 'Option',
editor: {
xtype: 'textfield',
allowBlank: true
}


},
{
text : 'Select',
width : 75,
sortable : true,
dataIndex: 'Select',
editor: {
xtype: 'textfield',
allowBlank: false
}


},
{
text : 'Mutex',
width : 75,
sortable : true,
sortable : true,
renderer : renderer_bool,
dataIndex: 'Mutex',
editor: {
xtype: 'textfield',
allowBlank: true
}


},
{
text : 'Included',
width : 75,
sortable : true,
renderer : renderer_bool,
dataIndex: 'Included',
editor: {
xtype: 'textfield',
allowBlank: true
}


},
{
text : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange',
editor: {
xtype: 'datafield',
allowBlank: false,
format: 'm/d/Y',
minValue: '01/01/2013',
minText: 'Cannt be this early!',
maxValue: Ext.Date.format(new Date(), 'm/d/Y')
}


},
{
menuDisabled: true,
sortable: false,
xtype: 'actioncolumn',
width: 50,
items: [{
icon : '../shared/icons/fam/delete.gif', // Use a URL in the icon config
tooltip: 'Sell stock',
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
alert("Sell " + rec.get('company'));
}
}, {
getClass: function(v, meta, rec) { // Or return a class from a function
if (rec.get('change') < 0) {
this.items[1].tooltip = 'Hold stock';
return 'alert-col';
} else {
this.items[1].tooltip = 'Buy stock';
return 'buy-col';
}
},
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
alert((rec.get('change') < 0 ? "Hold " : "Buy ") + rec.get('company'));
}
}]
}
],
tbar: [{
text: 'Add FFF setting',
iconCls: 'add_setting',
handler : function() {
rowEditing.cancelEdit();


// Create a model instance
var r = Ext.create('FFF', {
FFF: 'New FFF',
Mandatory: false,
Option: true,
Select: false,
Mutex: false,
Included: false,
lastChange: new Date
});


store.insert(0, r);
rowEditing.startEdit(0, 0);
}
}, {
itemId: 'remove_setting',
text: 'Remove FFF setting',
iconCls: 'remove_setting',
handler: function() {
var sm = grid.getSelectionModel();
rowEditing.cancelEdit();
store.remove(sm.getSelection());
if (store.getCount() > 0) {
sm.select(0);
}
},
disabled: true
}],
selType: 'rowmodel',
plugins: [rowEditing],
listeners: {
'selectionchange': function(view, records) {
grid.down('#remove_setting').setDisabled(!records.length);
}
},
height: 350,
width: 1024,
title: 'Canal D Gateway',
renderTo: 'grid-example',
viewConfig: {
stripeRows: true,
enableTextSelection: true
}
});
});

skirtle
2 Mar 2013, 4:46 AM
I suggest switching to ext-all-dev.js for better debug output.

You should be able to debug this quite quickly just by chasing up the stacktrace. However, at a guess, I'd say it's this line that's at fault:


xtype: 'datafield',

I assume you mean 'datefield'.

singlaive
14 Mar 2013, 12:18 PM
Thanks it works now.