PDA

View Full Version : [OPEN] rowEditing plugin layout problem in Grid autoHeight:true



ap
25 Jul 2011, 6:55 AM
REQUIRED INFORMATION


Ext version tested:

Ext 4.0.1
Ext 4.0.2
Ext 4.0.4


Browser versions tested against:

Chrome 12
FF4 (firebug 1.3.0.10 installed)


Description:

If the grid contains just one row, the rowEditing plugin does not seem to trigger any view refresh of the grid to set the proper height. In the case where the grid has a fixed height, at least a scroll bar will appear to navigate to the row editing controls.
When the grid is set to autoHeight, the grid view is stuck at the original height, no scroll, only tabbing through the fields will bring up the row editing buttons.

Even if the autoHeight grid has more than one row, the scroll bar does not appear when RowEditor is rendered.


Steps to reproduce the problem:

Create a Grid with RowEditing plugin
Set the Grid to have autoHeight


The result that was expected:

Either a scroll bar appears for the grid since the row editor increased the actual element height
Or, the Grid should layout correctly(grow) to accommodate the height increase.


The result that occurs instead:

The Grid View does not refresh, no easy way for user to get to the RowEditor controls


Test Case:



<html>
<head>
<title>ExtJs 4 - combobox setValue bug</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: 'bool' }
]
});

// 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 = 1;
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'
}]
});

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
}
}],
renderTo: Ext.getBody(),
width: 600,
//height: 400,
autoHeight:true,
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());
if (store.getCount() > 0) {
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>




HELPFUL INFORMATION


Screenshot or Video:

Single row
https://lh4.googleusercontent.com/-TJiQkEFpZtk/Ti2CjvtcBnI/AAAAAAAAGF8/qiVT5S3iYXM/Screen%252520shot%2525202011-07-25%252520at%25252010.46.40%252520AM.png
No scrollbar or grid view update
https://lh3.googleusercontent.com/-DwsEcvQ1dGE/Ti2CjtXzSCI/AAAAAAAAGGA/qf7dnF_xdLc/Screen%252520shot%2525202011-07-25%252520at%25252010.46.49%252520AM.png
2 rows
https://lh5.googleusercontent.com/-He8_gnxO688/Ti2CkFyrfcI/AAAAAAAAGGI/ByfQbxb9m4s/Screen%252520shot%2525202011-07-25%252520at%25252010.46.16%252520AM.png
No scrollbar, editing on the second row. No way to get to the first row
https://lh4.googleusercontent.com/-QPnk3oZ3XRo/Ti2Cj8tTe9I/AAAAAAAAGGE/6l13bdsckss/Screen%252520shot%2525202011-07-25%252520at%25252010.46.22%252520AM.png




Debugging already done:

none


Possible fix:

not provided


Additional CSS used:

only default ext-all.css
custom css (include details)


Operating System:

OSX 10.6.7

ap
15 Aug 2011, 3:18 PM
Can someone please address this issue?
If it should be the user's responsibility to take care of the interaction of the plugin with the grid's layout, please at least provide more built-in events in rowEditing plugin.

The rowEditing plugin is such a step back from the rowEditor ux in 3.x, this is quite frustrating...

Thanks anyways.

droessner
24 Aug 2011, 12:04 PM
I'm running into this same issue. I'm using version 4.0.5. Have you found any viable work-around or solution for this in the meantime?

If not, what would be the best way to handle this issue until it is fixed? Do I create a function to manually calculate the height of the panel and then call that function on the beforedit, edit, and canceledit events? Or is there a better way to do this?

mdlincoln
31 Aug 2011, 6:51 AM
We have confirmed this issue and created a bug report for it.

edspencer
31 Aug 2011, 6:35 PM
Thanks for the great bug report and sorry for the slow initial response. I've put this one onto the 4.0.7 pile

ngamble
27 Nov 2011, 9:18 PM
I'm having the same problems. Any suggestion for a workaround to this issue?

AndreyLevchenko
29 Feb 2012, 10:29 AM
This patch may help:

Ext.define('Ext.ux.grid.RowEditor', {
override : 'Ext.grid.RowEditor',
onHide: function() {
var me = this,
grid = me.editingPlugin.grid,
viewEl = grid.view.el;
this.callOverridden(arguments);
if (this.delta) {
// restore grid height
this.changeGridHeight(-this.delta);
}
this.delta = undefined;
},
changeGridHeight : function(delta){
var me = this,
grid = me.editingPlugin.grid,
viewEl = grid.view.el;


viewEl.setHeight(viewEl.getHeight() + delta);
grid.getEl().setHeight(grid.getEl().getHeight() + delta);

},
reposition : function() {


var me = this,
context = me.context,
row = context && Ext.get(context.row),
grid = me.editingPlugin.grid,
viewEl = grid.view.el;


if (row && Ext.isElement(row.dom)) {

this.delta = me.getHeight() + grid.headerCt.getEl().getHeight() - viewEl.getHeight() + 10 ; //magic 10 is used in overridden method


if (this.delta > 0) {
this.changeGridHeight(this.delta);
}
}


this.callOverridden(arguments);

}
});

ap
29 May 2012, 9:21 AM
Is there any update on this?
I tested this on 4.1.0. It's still breaking.

catalinux1907
8 Aug 2012, 10:12 AM
The patch above wil work if you change this


viewEl.setHeight(viewEl.getHeight() + delta);
grid.getEl().setHeight(grid.getEl().getHeight() + delta);in

viewEl.setHeight(viewEl.getHeight() + delta);
grid.getEl().setHeight(grid.getEl().getHeight() + delta );
grid.doComponentLayout();

and
this.delta = me.getHeight() + grid.headerCt.getEl().getHeight() - viewEl.getHeight() + 10 ; //magic 10 is used in overridden method


in
this.delta = me.getHeight() + grid.headerCt.getEl().getHeight() - viewEl.getHeight() + 76 ; //magic 76 is used in overridden method






I think the magic with 46 should be changed with the magic of 10 when this.delta is calculated.

ap
8 Aug 2012, 11:00 AM
Thanks

This line made Andrey's patch work.

grid.doComponentLayout();

catalinux1907
8 Aug 2012, 11:37 AM
Hi ap. For me it wasn't enough. I had to ad that 76 for delta. My case was the grid had no data or only a row, and it,s hit was auto.

rethesh.george
15 Feb 2013, 12:28 PM
I'm facing similar issue, using 4.0.7. rowEdit floating window is hidden in Grid for the first row Editing and with no scrollbars

Like to know if there is a fix available ?

dobberph
28 Feb 2013, 2:00 AM
Hi all,
I'm using architect 2 for my project. I can only chose a rowplugin for my grid. Is there a possibility to define an overwritten class as described above?

My code so far is:


plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
ptype: 'rowediting',
onHide: function() {
var me = this, grid = me.editingPlugin.grid, viewEl = grid.view.el;
this.callOverridden(arguments);
if (this.delta) {
//restore grid height
this.changeGridHeight(-this.delta);
}
this.delta = undefined;
},
changeGridHeight: function(delta) {
var me = this, grid = me.editingPlugin.grid, viewEl = grid.view.el;
viewEl.setHeight(viewEl.getHeight() + delta);
grid.getEl().setHeight(grid.getEl().getHeight() + delta);
grid.doComponentLayout();
},
reposition: function() {
var me = this,
context = me.context,
row = context && Ext.get(context.row),
grid = me.editingPlugin.grid,
viewEl = grid.view.el;


if (row && Ext.isElement(row.dom)) {
this.delta = me.getHeight() + grid.headerCt.getEl().getHeight() - viewEl.getHeight() + 10 ; //magic 10 is used in overridden method


if (this.delta > 0) {
this.changeGridHeight(this.delta);
}
}


this.callOverridden(arguments);
},
pluginId: 'rowEditor'
})
],


The problem is, that I can't override rowediting.
Can someone help me please?

Thanks,
Tobias