Question

我目前正在使用Phonegap 1.6.0和Sencha Touch 1.1创建基于网络的移动应用程序。该应用程序包含许多面板，用户可以通过这些面板单击。其中一些面板中包含文本字段或文本字体。进入面板后，我们希望它们能够自动聚焦。这似乎适用于文本字段，但不适用于textareas。

我有一个包含以下组件的Panel：

xtype: 'textareafield',
cls: 'jasbackblock',
id: 'addreactiontextarea',
height: '100%',
grow: true,
listeners: {
    afterrender: function(cmp) {
    console.log('Component rendered.');
    cmp.fieldEl.dom.focus();
}

每当我第一次打开面板时，它会自动对焦，这很好。然而，当我离开面板然后返回它时，我想不出用事件做这件事的好方法。我以前在面板中尝试过show listener：

listeners: {
    show: function(cmp) {
        Ext.get('addreactiontextarea').fieldEl.dom.focus();
    }
}

这给了我以下错误：

Uncaught TypeError: Cannot read property 'fieldEl' of null

在show事件期间，我似乎无法访问该元素。是否还有其他可以使用的事件，每次加载面板时都会触发并允许我访问textarea？

如果有任何帮助，这就是我们调用从一个面板切换到另一个面板的方法：

function switchScreen(from, to, newArgs) {
    /* Save screen information. */
    if (from != -1)
        historyStack.push([from, screenArgs]);

    if (currentPage > 2) {
        if (to != 3)
            main.getComponent(3).hide();
        app.getComponent(currentPage - 3).hide();
    }
    else
        main.getComponent(currentPage).hide();

    screenArgs = newArgs;

    if (to > 2) {
        main.setActiveItem(3);
        app.setActiveItem(to - 3);

        /* setActiveItem does not fire a screen's show event if it has been
         * shown before. Since we want the code in the screen's show listener to
         * be executed every time we switch to the screen, we call show manually
         * just to fire the event. */
        main.getComponent(3).show();
        app.getComponent(to - 3).show();
    }
    else {
        main.setActiveItem(to);
        main.getComponent(to).show();
    }

    if (to == 0 || to == 1)
        adMode = to;
    else
        adMode = -1;

    currentPage = to;
}

提前致谢。

Answer 1

我解决了这个问题。问题是我不太清楚DOM元素是如何工作的。

Ext.get（'id'）返回id为'id'的Javascript对象的DOM元素。它不会返回对象本身。 Ext.getCmp（'id'）返回id为'id'的Javascript对象。因此，Ext.getCmp（'id'）。fieldEl返回与Ext.get（'id'）相同的对象。

由于Sencha Touch 1.1中存在错误，我们选择使用DOM焦点功能而不是Sencha焦点功能。可以通过Ext.getCmp（'id'）。fieldEl.dom.focus（）或Ext.get（'id'）。dom.focus（）访问此函数。正如你在我的问题中看到的那样，我将它们混合起来。由于我缺乏DOM元素的经验，当我尝试以这种方式使用Object函数时，我变得更加困惑。（Ext.get（'id'）。reset（）简直是不合逻辑的。）

如果您有任何疑问，请随时留言。

Sencha Touch 1.1：在show方法之后聚焦TextArea

1 个答案: