Hi ampathdev
This is interesting. I think this is a bug.
It has to do with the button's inner CSS. After the grid is enabled again, the button's inner element still has the "x-mask" classes.
<div role="presentation" class="x-mask x-border-box" id="ext-element-12">
<div role="presentation" class="x-mask-msg" id="ext-element-13" style="display: none;">
<div role="presentation" class="x-mask-msg-inner">
<div role="presentation" class="x-mask-msg-text"></div>
</div>
</div>
</div>
The full generated HTML for the button:
<a class="x-btn x-unselectable x-box-item x-toolbar-item x-btn-default-toolbar-small x-masked-relative x-masked" style="width: 50px; right: auto; left: 0px; top: 0px; margin: 0px;" hidefocus="on" unselectable="on" id="button" componentid="button" tabindex="-1" target="_blank">
<span id="button-btnWrap" data-ref="btnWrap" role="presentation" unselectable="on" style="table-layout: fixed;" class="x-btn-wrap x-btn-wrap-default-toolbar-small ">
<span id="button-btnEl" data-ref="btnEl" role="presentation" unselectable="on" style="" class="x-btn-button x-btn-button-default-toolbar-small x-btn-text x-btn-button-center ">
<span id="button-btnIconEl" data-ref="btnIconEl" role="presentation" unselectable="on" class="x-btn-icon-el x-btn-icon-el-default-toolbar-small " style=""></span>
<span id="button-btnInnerEl" data-ref="btnInnerEl" unselectable="on" class="x-btn-inner x-btn-inner-default-toolbar-small">button
</span>
</span>
</span>
<div role="presentation" class="x-mask x-border-box" id="ext-element-8">
<div role="presentation" class="x-mask-msg" id="ext-element-9" style="display: none;">
<div role="presentation" class="x-mask-msg-inner">
<div role="presentation" class="x-mask-msg-text">
</div>
</div>
</div>
</div>
</a>
For now, you can resolve it by manually unmasking the button after you enable the grid.
App.pnlMain.setDisabled(false);
App.button.unmask();
