grid focus issue in ExtJS4

Question

We are using ExtJS4 in our application. We have a problem with grid focus.We are using grid.getView().focusEl.focus() in ExtJS3. Now it seems that this is not working.What is the replacement for this one in ExtJS4.

Answer 1

I have helped you checked on the differences in ExtJS3 and ExtJS4, the major changes is the focusEl has been removed from the gridView element.

In ExtJS3, focusEl is the anchor link in the view

<div class="x-grid3-scroller" id="ext-gen10" style="width: 298px; height: 174px; ">
    <div class="x-grid3-body" style="width:100px;" id="ext-gen12">
        <div class="x-grid3-row x-grid3-row-first x-grid3-row-last" style="width:100px;">
            <table class="x-grid3-row-table" border="0" cellspacing="0" cellpadding="0" style="width:100px;">
                <tbody>
                    <tr><td class="x-grid3-col x-grid3-cell x-grid3-td-0 x-grid3-cell-first " style="width: 100px;" tabindex="0"><div class="x-grid3-cell-inner x-grid3-col-0" unselectable="on">0</div></td></tr>
                </tbody>
            </table>
        </div>
    </div>
    <a href="#" class="x-grid3-focus" tabindex="-1" id="ext-gen13"></a>
</div>

In ExtJS4, this anchor link doesn't exist

Solution

This is a small fiddle test I have created for you. Basically what you need to change is as follow:

grid.getView().el.focus();

Instead of getting the focusEl (an anchor link), we use the whole element.

Hope this solve your problem.