PDA

View Full Version : [SOLVED][Ext 2.1] Problem focusing first cell in EditorGrid



Jaitsu
2 Jul 2009, 7:20 AM
I am having a problem with focusing the first cell in the first row of an EditorGrid in IE7+.

The problem occurs whenever the FIRST row is added to the store and I attempt to 'focus' the first cell in the grid using the startEditing function:



Ext.getCmp('purchaseInvoicePopupListGrid').startEditing(0, 0);
And doesn't occur for subsequent rows added to the store.

An excerpt from the code for the grid is below:



var allocateJobForm = new Ext.FormPanel({
region: 'center',
stateful: false,
id: 'jobConfirmationForm',
bodyStyle: 'margin: 6px; background: #e8e8e8; border: 0;',
reader: new Ext.data.JsonReader(),
items: [{
bodyStyle: 'background: #e8e8e8; border: 1px; width: 731px;',
items:[{
id: 'purchaseInvoicePopupListGrid',
stateId: 'purchaseInvoicePopupListGrid',
stateful: true,
xtype:"editorgrid",
border:true,
viewConfig:{
forceFit: false,
autoFill: false
},
autoHeight: true,
autoExpandColumn: 'invoice-job-details',
selModel: new Ext.grid.RowSelectionModel(),
ds: new Ext.data.JsonStore({
storeId: 'purchaseInvoicePopupListStore',
baseParams: {invoice: invoice_id},
url: 'grids/invoices/get_purchase_invoices_popup.php',
reader: new Ext.data.JsonReader(),
limit: 10,
start: 0,
autoLoad: true,
remoteSort: true
}),
sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
cm: new Ext.grid.ColumnModel([{
id: 'job',
header: "Job No",
dataIndex: 'job_number',
width: 100,
editor: new Ext.form.ComboBox({
width: 300,
forceSelection: true, // user must choose one of the options
allowBlank: false,
name: 'job_number',
hiddenName: 'job_id',
store: storeMyJobs,
lastQuery: '',
displayField: 'job_number',
valueField: 'job_number',
mode: 'remote',
triggerAction: 'all',
listeners: {
'focus': function(field) {
field.selectText();
alert('focused');
}
}
})
},{
header: "Ship",
id: 'ship',
dataIndex: 'ship',
align: 'left',
width: 100
},{
header: "Cost Heading",
dataIndex: 'cost_id',
width: 100,
editor: new Ext.form.ComboBox({
emptyText: 'Choose One...',
forceSelection: true,
name: 'cost_type',
hiddenName: 'cost_type_id',
displayField: 'cost_type',
valueField: 'cost_type_id',
store: Ext.StoreMgr.lookup('storeCostTypes'),
allowBlank: false,
lastQuery: '',
mode: 'local',
triggerAction: 'all',
renderer: lookupCostType
})
}])
}]
}]
})

I have added a focus listener to the editor component in question but this does not get fired when the first row is added, but does for all others.

Any ideas anyone? It works fine in Firefox and Safari browsers, but having a nightmare with IE.

Cheers

Jaitsu
3 Jul 2009, 12:02 AM
anyone any ideas?

Animal
3 Jul 2009, 12:24 AM
Well, you don't show the crucial bit.

When do you call this focus call? I'm betting it's before there is a first row to focus. But that's just a guess because we can't see it.

And why have you put a GridPanel inside a no layout Panel, inside a FormPanel????

Why those two extra, totally unecessary layers?

Jaitsu
3 Jul 2009, 1:04 AM
At the request of the user, the EditorGrid works in sync with a table in the database. So when a record is added to the store at the frontend an Ajax call is fired to the server to update the table with the new row. (Not the best practice I know, but this is to allow the user to modify data in the grid and come back to it at a later date). Basically the EditorGrid is the Ext representation of the database table.

There is a button to insert a new row into the grid which contains the following code


{
text: 'Attach Job',
icon: 'images/icons/book_add.png',
cls: 'x-btn-text-icon',
handler: function(a, b) {
pnlPopupTimeResults = Ext.getCmp('purchaseInvoicePopupListGrid');
pnlPopupTimeResults.stopEditing();

Ext.Ajax.request({
url: 'ajax/set_record.php',
params: {
table: 'purchase_order_items',
fields: 'purchase_invoice_id,created,created_id',
values: invoice_id + ',NOW(),' + bbis_user_id
},
success: function(response, options) {
pnlPopupTimeResults.getStore().reload({
callback: function() {
pnlPopupTimeResults.startEditing(0, 0);
}
});
}
});
} // end button handler
}
So an Ajax request is fired to the backend, where a row is created in the database. The store is then reloaded with this new blank row. The startEditing call is made and the first cell should be then focused in the EditorGrid, except its not focusing correctly as you can see in the attachment (the example on the left shows that startEditing has fired the editor component but the field has no focus, and the example on the right shows that the field has been given proper focus with the cursor present).

Another thing worth noting is when adding the first row, I am unable to tab through the rest of the cells as you would normally expect.

I am not calling focus() at any point manually, but I do believe that startEditing in turn calls focus() at some point (this was obvious when the alert in the focus listener for the cell fired after adding a second row, third row, fourth row etc.). The was never called when the first row was added, so clearly something strange is happening with the first row.

Hope I've explained this better, didn't want to go into a load of unnecessary detail in the first post.

Thanks

Animal
3 Jul 2009, 4:04 AM
Try deferRowRender: false on your Grid

Jaitsu
3 Jul 2009, 4:31 AM
Tried that config option but with no luck...
Managed to resolve the issue by just recalling stopEditing and startEditing immediately after calling startEditing:



pnlPopupTimeResults.stopEditing();

//add row with ajax request and reload the store

pnlPopupTimeResults.startEditing(0, 0);
pnlPopupTimeResults.stopEditing();
pnlPopupTimeResults.startEditing(0, 0);


Dirty workaround but it worked