PDA

View Full Version : Very Urgent. EditorGridPanel scrolls to top and lose the focus of textarea



barbara1712
30 Aug 2012, 3:45 AM
Hi,
I am using ExtJS 3.0. I am getting one issue. I have one editor grid panel where I have many records which causes the grid to scroll.

When I click on last row in the grid to input the value in textarea, the focus gets lost and grid moves to top (scrolls to top).

Please help me. This is very urgent.

Thanks in advance.

barbara1712
31 Aug 2012, 4:01 AM
No One?

scottmartin
31 Aug 2012, 8:41 AM
Can you provide a small example of what you are having problems with?

Scott.

scottmartin
4 Sep 2012, 7:06 AM
Can you update to 3.4?

I do not see this behavior using:



Ext.onReady(function(){
// sample static data for the store
var myData = [
['3m Co', 71.72, 0.02, 0.03, '12/1/2012'],
['Alcoa Inc', 29.01, 0.42, 1.47, '12/1/2012'],
['Altria Group Inc', 83.81, 0.28, 0.34, '12/1/2012'],
['American Express Company', 52.55, 0.01, 0.02, '12/1/2012'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '12/1/2012'],
['Verizon Communications', 35.57, 0.39, 1.11, '12/1/2012'],

['3m Co', 71.72, 0.02, 0.03, '12/1/2012'],
['Alcoa Inc', 29.01, 0.42, 1.47, '12/1/2012'],
['Altria Group Inc', 83.81, 0.28, 0.34, '12/1/2012'],
['American Express Company', 52.55, 0.01, 0.02, '12/1/2012'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '12/1/2012'],
['Verizon Communications', 35.57, 0.39, 1.11, '12/1/2012'],

['3m Co', 71.72, 0.02, 0.03, '12/1/2012'],
['Alcoa Inc', 29.01, 0.42, 1.47, '12/1/2012'],
['Altria Group Inc', 83.81, 0.28, 0.34, '12/1/2012'],
['American Express Company', 52.55, 0.01, 0.02, '12/1/2012'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '12/1/2012'],
['Verizon Communications', 35.57, 0.39, 1.11, '12/1/2012'],

['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '12/1/2012']
];

// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'm/d/Y'}
]
});

// manually load local data
store.loadData(myData);

var rowEditor = new Ext.ux.grid.RowEditor({
saveText: 'Update'
});

// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
plugins: [ rowEditor ],
columns: [
{
id :'company',
header : 'Company',
width : 160,
sortable : true,
dataIndex: 'company',
editor: {
xtype: 'textarea',
allowBlank: false
}
},
{
header : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
},
{
header : 'Change',
width : 75,
sortable : true,
dataIndex: 'change'
},
{
header : '% Change',
width : 75,
sortable : true,
dataIndex: 'pctChange'
},
{
header : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}
],
stripeRows: true,
autoExpandColumn: 'company',
height: 350,
width: 600,
title: 'Array Grid',
renderTo: Ext.getBody()
});

});


Scott.

barbara1712
9 Sep 2012, 9:48 PM
Thanks Scott.

Today I have release and at this time I don't wanto to update to 3.4.

My grid is rendered dynamically.. like

If my HTML hidden input flag value is 0 display Editor Grid and if 1 then display HTML editor.
Also if I input multiple line in textartea the text gets wrapped properly. only issue is I can not add data in textarea for last line if there are more records.
The issue is on IE ..not facing this issue in Mozilla.

Please help its very very urgent.

barbara1712
9 Sep 2012, 11:26 PM
I am having release today. and i can not change the version at this stage.

I am having editor grid where rows in grid gets added dynamically on clicking of 'Add Record' button.
I am having one tabpanel where one of the item in one of the tabs is rendered dynamically like
if input hidden flag is 0 display grid and if flag is 1 then display htmleditor.

please help me its urgent!!!

barbara1712
10 Sep 2012, 8:42 PM
Help me please.

The example provided in the thread is not working on IE in extjs 3.0.

Very Urgent.

willigogs
10 Sep 2012, 10:47 PM
Without a code example this is virtually impossible to reproduce or diagnose.

barbara1712
10 Sep 2012, 11:30 PM
Using extjs 3.0. Issue is on IE




Ext.onReady(function(){
// sample static data for the store
var myData = [
['3m Co', 71.72, 0.02, 0.03, '12/1/2012'],
['Alcoa Inc', 29.01, 0.42, 1.47, '12/1/2012'],
['Altria Group Inc', 83.81, 0.28, 0.34, '12/1/2012'],
['American Express Company', 52.55, 0.01, 0.02, '12/1/2012'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '12/1/2012'],
['Verizon Communications', 35.57, 0.39, 1.11, '12/1/2012'],
['3m Co', 71.72, 0.02, 0.03, '12/1/2012'],
['Alcoa Inc', 29.01, 0.42, 1.47, '12/1/2012'],
['Altria Group Inc', 83.81, 0.28, 0.34, '12/1/2012'],
['American Express Company', 52.55, 0.01, 0.02, '12/1/2012'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '12/1/2012'],
['Verizon Communications', 35.57, 0.39, 1.11, '12/1/2012'],
['3m Co', 71.72, 0.02, 0.03, '12/1/2012'],
['Alcoa Inc', 29.01, 0.42, 1.47, '12/1/2012'],
['Altria Group Inc', 83.81, 0.28, 0.34, '12/1/2012'],
['American Express Company', 52.55, 0.01, 0.02, '12/1/2012'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '12/1/2012'],
['Verizon Communications', 35.57, 0.39, 1.11, '12/1/2012'],
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '12/1/2012']
];
// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'm/d/Y'}
]
});
// manually load local data
store.loadData(myData);
// create the Grid
var grid = new Ext.grid.EditorGridPanel({
store: store,
columns: [
{
id :'company',
header : 'Company',
width : 160,
sortable : true,
dataIndex: 'company',
editor: {
xtype: 'textarea',
allowBlank: false
}
},
{
header : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
},
{
header : 'Change',
width : 75,
sortable : true,
dataIndex: 'change'
},
{
header : '% Change',
width : 75,
sortable : true,
dataIndex: 'pctChange'
},
{
header : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}
],
stripeRows: true,
autoExpandColumn: 'company',
height: 350,
width: 600,
title: 'Array Grid',
renderTo: 'grid1'
});
});

willigogs
11 Sep 2012, 12:57 AM
Unable to replicate the issue using the following:
http://jsfiddle.net/642NH/

scottmartin
11 Sep 2012, 4:09 AM
Perhaps if you made a video (using jing)? Unable to duplicate this. Is this specific to a browser or OS?

Scott.

barbara1712
11 Sep 2012, 4:35 AM
thanks for the link.

I have gone through the link and it working. But when I checked the source code on Result Panel (through View Source) and the code is using 3.3.1.

It is occuring only on IE.

scottmartin
11 Sep 2012, 5:00 AM
The quickest route would be to upgrade. I know you say you do not have time, but have you tried and were there problems? The reason for upgrade are to fix issues such as this and many others.

Scott.

willigogs
11 Sep 2012, 5:05 AM
Managed to get a fiddle up and running using 3.0 (minus any style), which does seem to replicate the problem (I have to edit the bottom field, then after closing the editor, click the bottom row again):
http://jsfiddle.net/6CsUC/1/

(http://jsfiddle.net/6CsUC/1/)However, as Scott says - it might be easier to upgrade, as I would assume this will require some digging into the source code to fix...

barbara1712
12 Sep 2012, 8:53 PM
Thanks to both of you.
@willigogs : I could not see the grid for the link you have provided.

Following code helped me to solve this problem


viewConfig: {
getEditorParent: function() {
return this.mainWrap.dom;
}
},