PDA

View Full Version : Why is RowEditing shifting grid cells up



flatbugz
9 Sep 2011, 9:24 AM
I'm experiencing an issue where clicking on a cell to begin row editing is shifting all the cells up, so that the top rows become invisible underneath the header (and possibly also the tabs). Below are screen shots before and after initiating rowediting.

Before:

27979

After:

27980

I have stripped down some development code to a bare example; see below. Is this a possible bug, or is there some configuration setting? I also experience this when using a plain panel instead of a tab panel.

Code (just 90 lines), and below that, the JSON getting returned when I load the store. Thanks in advance


<html>
<head>
<script src='/javascripts/extjs/ext-all-debug.js'></script>
<link rel="stylesheet" type="text/css" href="/stylesheets/extjs/resources/css/ext-all.css"/>
<script>
Ext.onReady(function(){
var win, button = Ext.get('show-btn');

button.on('click', function() {
if (!win) {
win = Ext.create('Ext.window.Window', {
title:'Task Management',
width: 600,
height: 400,
shim:false,
animCollapse:false,
constrainHeader:true,
layout: 'fit',
items: [tasksTabPanelContainer()]
});
}
win.show();
});

function tasksTabPanelContainer() {
return Ext.create('Ext.tab.Panel', {
items: [{
title: 'My Tasks',
items: [tasksGrid()]
}, {
title: 'Other Tasks'
}]
})
}

function tasksGrid() {
var myTasksStore = Ext.create('Ext.data.Store', {
proxy: {
type: 'ajax',
url : '/erp_app/desktop/task_management/my_tasks',
reader: {
idProperty: 'id',
totalProperty:'totalCount',
type: 'json',
root: 'data'
}
},
remoteSort:true,
fields:['id', 'description', 'projected_completion_time'],
autoLoad: true
});

var myTasksColumns = [{
header:'Description',
dataIndex:'description',
width: 250,
editor: {
xtype: 'textfield',
allowBlank: false
}
},{
header:'Estimated Hours',
dataIndex:'projected_completion_time',
width: 100,
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 0
}
}]

return Ext.create('Ext.grid.Panel', {
store: myTasksStore,
loadMask: false,
columns: myTasksColumns,
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
})
]
});
}
});
</script>
</head>
<body>
<input type="button" id="show-btn" value="Show Window">
</body>
</html>


JSON:



{data:[{"description":"Test refactored models","projected_completion_time":2,"id":44},
{"description":"Quickie","projected_completion_time":1,"id":45},
{"description":"De-require actual hours when row editing","projected_completion_time":2,"id":47},
{"description":"Investigate RowEditing anomaly","projected_completion_time":4,"id":48}], my_party_id:3}

skirtle
11 Sep 2011, 9:12 AM
You're missing a layout manager on the first tab:


function tasksTabPanelContainer() {
return Ext.create('Ext.tab.Panel', {
items: [{
layout: 'fit',
title: 'My Tasks',
items: [tasksGrid()]
}, {
title: 'Other Tasks'
}]
})
}