PDA

View Full Version : [FIXED] [OPEN EXTJSIV-2540] [4.0.2]Rowediting rendering problem with hidden column



ap
17 Jun 2011, 2:39 PM
Rowediting plugin has trouble rendering if a column is hidden with editor defined. The fields that could cause this problem seem to be limited to those with triggers (numberfield, combo, datefield).

Slightly modified self contained example from the demo to exhibit the problem.



<html>
<head>
<title>ExtJs 4 - rowediting 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 = 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'
}]
});

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,
hidden: true,
editor: {
xtype: 'numberfield',
//hideTrigger: true, //hiding the trigger does not resolve the problem.
allowBlank: false,
minValue: 1,
maxValue: 150000
}
}, {
header: 'Active?',
dataIndex: 'active',
width: 60
}],
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());
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>

https://lh6.googleusercontent.com/-Pv5FJfa3Wz0/TfvYE5-n2kI/AAAAAAAAFv0/ZoZSI_ZUJK4/Screen%252520shot%2525202011-06-17%252520at%2525206.40.21%252520PM.png

mike.estes
17 Jun 2011, 2:45 PM
Thank you for reporting this, filed as EXTJSIV-2540

don@electionmall.com
27 Aug 2011, 9:40 AM
I'm copying here only the columns config. I have added width = 0 for the hidden columns to minimize the rendering issue, please notice that my hidden columns have no field property configured but one of my shown columns has.



{
xtype: 'gridcolumn',
dataIndex: 'ItemID',
width: 0,
hidden: true
},
{
xtype: 'gridcolumn',
dataIndex: 'IsFolder',
width: 0,
hidden: true
},
{
xtype: 'gridcolumn',
dataIndex: 'PermissionType',
width: 0,
hidden: true
},
{
xtype: 'templatecolumn',
tpl: Ext.create('Ext.XTemplate', '<div class="foldericon-{IsFolder}"></div>'),
width: 32
},
{
xtype: 'gridcolumn',
dataIndex: 'Name',
text: 'Name',
field: {
xtype: 'textfield',
allowBlank: false
},
flex: 1
},
{
xtype: 'gridcolumn',
dataIndex: 'PostedDate',
text: 'Date',
type: 'Date',
renderer: function (value) {
return Ext.Date.format(Ext.Date.parse(value, "MS"), "d-m-Y g:i A");
},
width: 120
}


27724

evant
14 Sep 2011, 5:30 AM
This should be resolved in 4.0.7, please let us know if you have problems with it after 4.0.7 comes out.

easley
23 Aug 2012, 3:18 AM
I've still got the issue on 4.0.7

PietroB
19 Feb 2014, 6:49 AM
Hello,
I'm using ExtJS 4.0.7 and I would report that the problem is solved only if I use fixed width for all columns.

In case I use "flex:" property in configuring column-width the rendering won't function properly. But if I hide (with hide menu column) all the columns with configured 'flex:' property the rendering will function.

Is there any solution for this persistent problem?

Thanks,
Pietro

pscanlon1
27 Mar 2014, 9:49 AM
STILL A BUG!!!

hdave
7 Apr 2014, 2:34 PM
+1 This bug is still present in 4.2.2. Anyone know how to work around it?

charCo
29 Apr 2014, 10:31 AM
I am using the hide function to hide the column after the initial rendering of the grid for now. This resolves the alignment issue. This column that I need to hide does not have editors in it. I'm guessing this correctly calculates the flex widths and then hides the column after it has that needed setup for this alignment issue. I have nested columns and came across this issue when I tried to hide this parent column using the config rather than the function.



onGridpanelAfterRender: function(component, eOpts) {
var hideColumn = component.down('gridcolumn[itemId=columnToHide]');
hideColumn.hide();
}