PDA

View Full Version : Row-editing plugin does not work for me



singlaive
25 Feb 2013, 1:15 PM
Absoutley newbie for Ext Js and Javascript! I am learning Ext Js4.1. The way I learn is to copy and twist the sample code.

The table does not show when I tried to turn on the raw editing plugin. The js file works with the same html file as in http://docs.sencha.com/ext-js/4-1/#!/example/grid/row-editing.html

What did I miss?


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


// 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
});


// 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'
},
{
text : 'Mandatory',
width : 75,
sortable : false,
dataIndex: 'Mandatory'
},
{
text : 'Option',
width : 75,
sortable : false,
dataIndex: 'Option'
},
{
text : 'Select',
width : 75,
sortable : true,
dataIndex: 'Select'
},
{
text : 'Mutex',
width : 75,
sortable : true,
sortable : true,
renderer : renderer_bool,
dataIndex: 'Mutex'
},
{
text : 'Included',
width : 75,
sortable : true,
renderer : renderer_bool,
dataIndex: 'Included'
},
{
text : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
},
{
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'));
}
}]
}
],
selType: 'rowmodel',
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
})]?
height: 350,
width: 1024,
title: 'Canal D Gateway',
renderTo: 'grid-example',
viewConfig: {
stripeRows: true,
enableTextSelection: true
}
});
});

scottmartin
26 Feb 2013, 8:19 AM
You have a syntax error in your code ...



plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
})]? <--- not a real comma?


You then need to add an editor to each column:


editor: {
xtype: 'textfield',
allowBlank: false
}


Scott.

singlaive
27 Feb 2013, 8:18 AM
Thanks so much!
It works now.