View Full Version : Extjs 4.2.1 issue Grid row editing buttons showing on top

5 Sep 2013, 6:12 AM
With the Extjs 4.2.1 version when trying to use Grid editing the buttons Update/Cancel are showing on top. Usually it should show below in the previous versions.

Following is the screenshot which I am having issue.
Is there any configuration I can do to move these buttons Update/Cancel below.

Please help with this.


6 Sep 2013, 3:20 AM
This issue is most likely caused by some custom css.

6 Sep 2013, 5:06 AM
I am not using any custom CSS.

Can somebody please help.

Gary Schlosberg
6 Sep 2013, 7:37 PM
Are you using IE7?

9 Sep 2013, 4:54 AM
I am using IE8.

Please help me on this.

Gary Schlosberg
9 Sep 2013, 5:14 AM
Well, according to the bug report, the issue shouldn't affect IE8 unless you are using compatibility mode. It would help to know if you are facing the same issue or another one, so you might try the test case in the bug report to see if it reproduces the issue for you. You might also try the workaround farther down the page to see if it helps you.

9 Sep 2013, 5:23 AM
I am not using any custom CSS just using the default Extjs 4.2.1.
For my other project I did used Extjs 4.1.1 and i did't have any issues there for IE 8.

Not sure why the new version is behaving like this.

Gary Schlosberg
10 Sep 2013, 1:48 PM
Can you post a test case which reproduces the problem? This better allows us to see a problem and if needed file a bug. Thanks.

11 Sep 2013, 4:51 AM
In my original post I already uploaded the screenshot how the Update/Cancel buttons are showing on top.
Issue is for the first record in the grid buttons are showing on top and user can not even see those and cannot click update to edit the record.

Following is the code I am using
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false

var somePanel = Ext.create('Ext.grid.Panel', {
id: 'somePanel',
title: 'Pricing Exceptions',
titleAlign: 'left',
height: 190,
width: 1028,
store: exceptionStore,
viewConfig: {
stripeRows: true
plugins: [rowEditing,
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
columns: [{
text: 'colum 1',
editor: {
emptyText : 'Select',
xtype: 'combo'
text: 'Column2',
editor: {
emptyText : 'Select',
xtype: 'combo'

Is there any option to open the grid in editable mode without clicking the row. Can I open the items always in editable mode, if possible I can use that approach. This is very annoying.

Gary Schlosberg
15 Oct 2013, 1:47 PM
I don't think you could easily change the behavior of the buttons. Tried to run your example, but couldn't without the store. I made this Sencha fiddle with your code:

Perhaps you could post the store info. Also, is your IE8 in compatibility mode?

16 Oct 2013, 5:10 AM
I spent lot of time and not able to make it work.
So I switch back to 4.1.1 and it is working fine for me.

I saw many posts on this issue but nothing is resolved so I switched to older version .

Yes I am using IE8 and not using in compatibility view.

2 Jan 2014, 2:19 AM
Hi Gary Schlosberg ,
You can always open the items in editable mode by using this code.
I used this as i had a need to keep my last row editable. you can use it as your requirement.


N.B.: Assuming you are not using any other plugin for grid.plugins[0] - reffers to the editor plugin index, and columns[0] - plays a role if you use columnSel to decide which column to edit with.