PDA

View Full Version : Making row editor modal



celadonz
18 Feb 2011, 12:52 PM
Hello,
First, I'm new to Ext, so please forgive my ignorance. Second I have searched both google and these forums before posting (although, I could easily have been searching with the wrong terms). Okay, that out of the way, I have a grid using the roweditor from the examples. I was able to get the roweditor to act like a modal dialog with :



var editor = new Ext.ux.grid.RowEditor({
saveText: 'Update'
,clicksToEdit: 1
,monitorValid: false
,modal: true
});

var grid = new Ext.grid.GridPanel({
id:'myId'
,store: _store
,renderTo:'loc_grid'
,colModel: _colModel
,sm: rowSelectionModel
.....
,editor: editor
,plugins:[editor]
});

grid.editor.on('beforeedit', function(roweditor) {
if(roweditor.modal){
roweditor.mask = roweditor.grid.container.createChild({cls:'ext-el-mask'}, roweditor.grid.el.dom);
roweditor.mask.enableDisplayMode('block');
roweditor.mon(roweditor.mask, 'click', roweditor.focus, roweditor);
Ext.getBody().addClass('x-body-masked');
roweditor.mask.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
roweditor.mask.show();
}
});



This works beautifully on FF3, Chrome, and even IE8... but on IE7 the mask covers the editor. I've tried changing the container the mask belongs to and changing when the mask is created (by editing the roweditor.js file), but I cannot get IE7 to accept it.

So, my question :
Is it possible to make the roweditor modal in such a way it will work in the most common browser?