I came across this rare bug in the current development of a project. It makes heavy use of the RowEditing plugin of Extjs‘ grid. Because the Extjs environment is used within SharePoint 2010 I have to use the scoped theme to avoid “damage” to the SharePoint UI.
After inserting a record into the grid via RowEditing and pressing cancel the RowEditings’ editor window is not shown. You guess it right: only when using Internet Explorer (7, 8, 9). After testing it showed that the css itself is not the reason. So debugging the Extjs-source where the setting scopeResetCSS is evaluated…
The final result is a workaround applied via Ext.override to solve the “problem”.
if(Ext.isIE) { Ext.AbstractComponent.override({ onRender: function(container, position) { var me = this, el = me.el, styles = me.initStyles(), renderTpl, renderData, i; position = me.getInsertPosition(position); if(!el) { if(position) { el = Ext.DomHelper.insertBefore(position, me.getElConfig(), true); } else { el = Ext.DomHelper.append(container, me.getElConfig(), true); } } else if(me.allowDomMove !== false) { if(position) { container.dom.insertBefore(el.dom, position); } else { container.dom.appendChild(el.dom); } } if(Ext.scopeResetCSS && !me.ownerCt) { if(el.dom == Ext.getBody().dom) { el.parent().addCls(Ext.baseCSSPrefix + 'reset'); } else { if(me.$className != 'Ext.grid.RowEditor') { me.resetEl = el.wrap({ cls: Ext.baseCSSPrefix + 'reset' }); } } } me.setUI(me.ui); el.addCls(me.initCls()); el.setStyle(styles); me.el = el; me.initFrame(); renderTpl = me.initRenderTpl(); if(renderTpl) { renderData = me.initRenderData(); renderTpl.append(me.getTargetEl(), renderData); } me.applyRenderSelectors(); me.rendered = true; } }); } |
The woraround itself is only this:
if(me.$className != 'Ext.grid.RowEditor') { me.resetEl = el.wrap({ cls: Ext.baseCSSPrefix + 'reset' }); } |
BTW: I “love” IE!