0

我目前正在使用 Phonegap 1.6.0 和 Sencha Touch 1.1 创建一个基于 Web 的移动应用程序。该应用程序由许多面板组成，用户可以通过这些面板单击。其中一些面板中有文本字段或文本区域。进入面板后，我们希望这些自动聚焦。这似乎适用于文本字段，但不适用于文本区域。

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

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

每当我第一次打开面板时，它会自动对焦，这很好。但是，当我离开面板然后返回它时，我想不出用事件来做这件事的好方法。我之前在面板中尝试过显示监听器：

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

这给了我以下错误：

Uncaught TypeError: Cannot read property 'fieldEl' of null

看来我无法在表演活动期间访问该元素。是否有任何其他事件可以在每次加载面板时触发并允许我访问文本区域？

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

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;
}
4

1 回答 1

0

我解决了这个问题。问题是我不太了解 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 中的一个 bug，我们选择使用 DOM 焦点功能而不是 Sencha 焦点功能。可以通过 Ext.getCmp('id').fieldEl.dom.focus() 或 Ext.get('id').dom.focus() 访问此函数。正如您在我的问题中看到的那样，我将这些混合在一起。由于我对 DOM 元素缺乏经验，当我尝试以这种方式使用 Object 函数时，我变得更加困惑。（Ext.get('id').reset() 简直不合逻辑。）

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

于 2012-07-12T11:57:49.743 回答