PDA

View Full Version : Rowediting plugin breaks, when editor is a reference



ap
11 Jun 2011, 7:53 PM
In Extjs 3.x I was able to pass a reference as a column's editor. In 4.x (4.0.2), the code breaks at ext-all-debug.js (line 16506). No component is passed to Ext.ComponentManager.create( component, defaultType)

I have modified the example/demo slightly to demonstrate this.

Following has a combobox predefined, and passed to editor ( editor: testCombobox ). The roweditor will fail to load for the first time, then ignores the editor for the column.


<html>
<head>
<title>ExtJs 4 - function intercept test</title>
<!-- Ext includes -->
<link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/ext-4.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="http://dev.sencha.com/deploy/ext-4.0.0/ext-all-debug.js"></script>

<script type="text/javascript">
Ext.Loader.setConfig({
enabled: true
});

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

Ext.onReady(function(){
// Define our data model
Ext.define('Employee', {
extend: 'Ext.data.Model',
fields: [
'name',
'email',
{ name: 'start', type: 'date', dateFormat: 'n/j/Y' },
{ name: 'salary', type: 'float' },
{ name: 'active', type: 'int' }
]
});

// Generate mock employee data
var data = (function() {
var lasts = ['Jones', 'Smith', 'Lee', 'Wilson', 'Black', 'Williams', 'Lewis', 'Johnson', 'Foot', 'Little', 'Vee', 'Train', 'Hot', 'Mutt'],
firsts = ['Fred', 'Julie', 'Bill', 'Ted', 'Jack', 'John', 'Mark', 'Mike', 'Chris', 'Bob', 'Travis', 'Kelly', 'Sara'],
lastLen = lasts.length,
firstLen = firsts.length,
usedNames = {},
data = [],
s = new Date(2007, 0, 1),
now = new Date(),

getRandomInt = function(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
},

generateName = function() {
var name = firsts[getRandomInt(0, firstLen - 1)] + ' ' + lasts[getRandomInt(0, lastLen - 1)];
if (usedNames[name]) {
return generateName();
}
usedNames[name] = true;
return name;
};

while (s.getTime() < now.getTime()) {
var ecount = getRandomInt(0, 3);
for (var i = 0; i < ecount; i++) {
var name = generateName();
data.push({
start : Ext.Date.add(Ext.Date.clearTime(s, true), Ext.Date.DAY, getRandomInt(0, 27)),
name : name,
email: name.toLowerCase().replace(' ', '.') + '@sencha-test.com',
active: getRandomInt(0, 1),
salary: Math.floor(getRandomInt(35000, 85000) / 1000) * 1000
});
}
s = Ext.Date.add(s, Ext.Date.MONTH, 1);
}

return data;
})();

// create the Data Store
var store = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed
autoDestroy: true,
model: 'Employee',
proxy: {
type: 'memory'
},
data: data,
sorters: [{
property: 'start',
direction: 'ASC'
}]
});
//------------- define model and combobox ------------
Ext.define( 'GenericLocalData', {
extend: 'Ext.data.Model',
fields : [
{name: 'val' },
{name: 'opt' }
],
idProperty: 'val'
});
var testCombobox = Ext.create( 'Ext.form.ComboBox', {
editable: false,
hideLabel:true,
queryMode:'local',
store: Ext.create( 'Ext.data.Store', {
model:'GenericLocalData',
autoLoad:true,
data: [
{opt:'Yes', val:1},
{opt:'No', val:0}
]
}),
valueField: 'val',
displayField: 'opt'
});

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

// create the grid and specify what field you want
// to use for the editor at each column.
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [{
header: 'Name',
dataIndex: 'name',
flex: 1,
editor: {
// defaults to textfield if no xtype is supplied
allowBlank: false
}
}, {
header: 'Email',
dataIndex: 'email',
width: 160,
editor: {
allowBlank: false,
vtype: 'email'
}
}, {
xtype: 'datecolumn',
header: 'Start Date',
dataIndex: 'start',
width: 90,
field: {
xtype: 'datefield',
allowBlank: false,
format: 'm/d/Y',
minValue: '01/01/2006',
minText: 'Cannot have a start date before the company existed!',
maxValue: Ext.Date.format(new Date(), 'm/d/Y')
}
}, {
xtype: 'numbercolumn',
header: 'Salary',
dataIndex: 'salary',
format: '$0,0',
width: 90,
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 150000
}
}, {

header: 'Active?',
dataIndex: 'active',
renderer: function( val ){ return (val==1)?'Yes':'No'; },
width: 60,
editor: testCombobox
}],
renderTo: Ext.getBody(),
width: 600,
height: 400,
title: 'Employee Salaries',
frame: true,
tbar: [{
text: 'Add Employee',
iconCls: 'employee-add',
handler : function() {
rowEditing.cancelEdit();

// Create a record instance through the ModelManager
var r = Ext.ModelManager.create({
name: 'New Guy',
email: 'new@sencha-test.com',
start: new Date(),
salary: 50000,
active: true
}, 'Employee');

store.insert(0, r);
rowEditing.startEdit(0, 0);
}
}, {
itemId: 'removeEmployee',
text: 'Remove Employee',
iconCls: 'employee-remove',
handler: function() {
var sm = grid.getSelectionModel();
rowEditing.cancelEdit();
store.remove(sm.getSelection());
sm.select(0);
},
disabled: true
}],
plugins: [rowEditing],
listeners: {
'selectionchange': function(view, records) {
grid.down('#removeEmployee').setDisabled(!records.length);
}
}
});
});
</script>
</head>
<body>
<form id="history-form" class="x-hide-display">
<input type="hidden" id="x-history-field" />
<iframe id="x-history-frame"></iframe>
</form>
</body>
</html>

The following works when editor is defined locally in the column


<html>
<head>
<title>ExtJs 4 - function intercept test</title>
<!-- Ext includes -->
<link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/ext-4.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="http://dev.sencha.com/deploy/ext-4.0.0/ext-all-debug.js"></script>

<script type="text/javascript">
Ext.Loader.setConfig({
enabled: true
});

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

Ext.onReady(function(){
// Define our data model
Ext.define('Employee', {
extend: 'Ext.data.Model',
fields: [
'name',
'email',
{ name: 'start', type: 'date', dateFormat: 'n/j/Y' },
{ name: 'salary', type: 'float' },
{ name: 'active', type: 'int' }
]
});

// Generate mock employee data
var data = (function() {
var lasts = ['Jones', 'Smith', 'Lee', 'Wilson', 'Black', 'Williams', 'Lewis', 'Johnson', 'Foot', 'Little', 'Vee', 'Train', 'Hot', 'Mutt'],
firsts = ['Fred', 'Julie', 'Bill', 'Ted', 'Jack', 'John', 'Mark', 'Mike', 'Chris', 'Bob', 'Travis', 'Kelly', 'Sara'],
lastLen = lasts.length,
firstLen = firsts.length,
usedNames = {},
data = [],
s = new Date(2007, 0, 1),
now = new Date(),

getRandomInt = function(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
},

generateName = function() {
var name = firsts[getRandomInt(0, firstLen - 1)] + ' ' + lasts[getRandomInt(0, lastLen - 1)];
if (usedNames[name]) {
return generateName();
}
usedNames[name] = true;
return name;
};

while (s.getTime() < now.getTime()) {
var ecount = getRandomInt(0, 3);
for (var i = 0; i < ecount; i++) {
var name = generateName();
data.push({
start : Ext.Date.add(Ext.Date.clearTime(s, true), Ext.Date.DAY, getRandomInt(0, 27)),
name : name,
email: name.toLowerCase().replace(' ', '.') + '@sencha-test.com',
active: getRandomInt(0, 1),
salary: Math.floor(getRandomInt(35000, 85000) / 1000) * 1000
});
}
s = Ext.Date.add(s, Ext.Date.MONTH, 1);
}

return data;
})();

// create the Data Store
var store = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed
autoDestroy: true,
model: 'Employee',
proxy: {
type: 'memory'
},
data: data,
sorters: [{
property: 'start',
direction: 'ASC'
}]
});
//------------- define model and combobox ------------
Ext.define( 'GenericLocalData', {
extend: 'Ext.data.Model',
fields : [
{name: 'val' },
{name: 'opt' }
],
idProperty: 'val'
});
var testCombobox = Ext.create( 'Ext.form.ComboBox', {
editable: false,
hideLabel:true,
queryMode:'local',
store: Ext.create( 'Ext.data.Store', {
model:'GenericLocalData',
autoLoad:true,
data: [
{opt:'Yes', val:1},
{opt:'No', val:0}
]
}),
valueField: 'val',
displayField: 'opt'
});

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

// create the grid and specify what field you want
// to use for the editor at each column.
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [{
header: 'Name',
dataIndex: 'name',
flex: 1,
editor: {
// defaults to textfield if no xtype is supplied
allowBlank: false
}
}, {
header: 'Email',
dataIndex: 'email',
width: 160,
editor: {
allowBlank: false,
vtype: 'email'
}
}, {
xtype: 'datecolumn',
header: 'Start Date',
dataIndex: 'start',
width: 90,
field: {
xtype: 'datefield',
allowBlank: false,
format: 'm/d/Y',
minValue: '01/01/2006',
minText: 'Cannot have a start date before the company existed!',
maxValue: Ext.Date.format(new Date(), 'm/d/Y')
}
}, {
xtype: 'numbercolumn',
header: 'Salary',
dataIndex: 'salary',
format: '$0,0',
width: 90,
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 150000
}
}, {

header: 'Active?',
dataIndex: 'active',
renderer: function( val ){ return (val==1)?'Yes':'No'; },
width: 60,
editor: { xtype:'combo',
editable: false,
hideLabel:true,
queryMode:'local',
store: Ext.create( 'Ext.data.Store', {
model:'GenericLocalData',
autoLoad:true,
data: [
{opt:'Yes', val:1},
{opt:'NO', val:0}
]
}),
valueField: 'val',
displayField: 'opt'
}
}],
renderTo: Ext.getBody(),
width: 600,
height: 400,
title: 'Employee Salaries',
frame: true,
tbar: [{
text: 'Add Employee',
iconCls: 'employee-add',
handler : function() {
rowEditing.cancelEdit();

// Create a record instance through the ModelManager
var r = Ext.ModelManager.create({
name: 'New Guy',
email: 'new@sencha-test.com',
start: new Date(),
salary: 50000,
active: true
}, 'Employee');

store.insert(0, r);
rowEditing.startEdit(0, 0);
}
}, {
itemId: 'removeEmployee',
text: 'Remove Employee',
iconCls: 'employee-remove',
handler: function() {
var sm = grid.getSelectionModel();
rowEditing.cancelEdit();
store.remove(sm.getSelection());
sm.select(0);
},
disabled: true
}],
plugins: [rowEditing],
listeners: {
'selectionchange': function(view, records) {
grid.down('#removeEmployee').setDisabled(!records.length);
}
}
});
});
</script>
</head>
<body>
<form id="history-form" class="x-hide-display">
<input type="hidden" id="x-history-field" />
<iframe id="x-history-frame"></iframe>
</form>
</body>
</html>

cpaulik
17 Nov 2011, 7:25 AM
Hi

I encounter the same problem using version 4.0.7

Will this issue be addressed?

Thanks, Christoph

ap
17 Nov 2011, 7:31 AM
I doubt it...

Very frustrating with 4.x. Even though I have successfully migrated our application to it, there are so many unaddressed issues.

pvginkel
6 Dec 2011, 6:01 AM
I have the same issue. This problem can be circumvented by inheriting from RowEditing:


Ext.define('Ext.grid.plugin.RowEditingWithFix', {
extend: 'Ext.grid.plugin.RowEditing',

getColumnField: function (columnHeader) {
return columnHeader.field = this.callParent(arguments);
}
});

bee
14 Dec 2011, 8:23 AM
I doubt it...

Very frustrating with 4.x. Even though I have successfully migrated our application to it, there are so many unaddressed issues.

I agree with this. I am also facing so many problems.