0

いくつかのビューを持つテスト アプリケーションがあります。ボタンで単純な「タップ」リスナーを呼び出そうとしています。コントローラーがインスタンス化されて起動されても、タップ イベントは発生していないようです。

ここに私のapp.jsがあります

Ext.application({
    name: 'MyApp',

    requires: [
        'Ext.MessageBox',
        'Ext.form.FormPanel',
        'Ext.navigation.View'
    ],

    views: [
        'Main',
        'Tasks'
    ],

    controllers: [
        'Main'
    ],

    models: [
        'Task',
        'Schedule'
    ],

    stores: [
        'Tasks',
        'Schedules'
    ],

    launch: function() {
        // Destroy the #appLoadingIndicator element
        try{
            Ext.fly('appLoadingIndicator').destroy();
        }catch(err){
            console.warn("[CUSTOMWARN]Could not destroy loading indicator because of -- \n"+err);
        }

        var DEBUG=false;
        if(!DEBUG){
            // Initialize the main view
            Ext.Viewport.add(Ext.create('MyApp.view.Main'));
        }
    }
});

Main.js -- コントローラー

Ext.define('MyApp.controller.Main', {
    extend: 'Ext.app.Controller',
    requires: [
        'MyApp.view.Main'
    ],
    init: function(){
        // download and parse data from server here.
        console.log('controller initiated!');
    },
    config: {
        refs: {
            loginBtn: 'button[action=login]'
        },
        control: {
            loginBtn: {
                tap: 'loginBtnHandler'
            }
        }
    },
    loginBtnHandler: function(){
        this.callParent(arguments); 
        Ext.Msg.alert('here');
    }
});

Main.js -- 見る

Ext.define('MyApp.view.Main', {
    extend: 'Ext.navigation.View',
    alias: 'customnavigationview',
    requires: [
        'MyApp.form.Login'
    ],
    config: {
        navigationBar: {
            hidden: true
        },
        items: [
            {
                xtype: 'logincard',
                flex: 1
            }
        ],        
    }
});

Login.js -- xtype の場合: 'logincard'

Ext.define('MyApp.form.Login', {
    extend: 'Ext.form.Panel',
    xtype: 'logincard',
    requires: [
        'Ext.field.Password',
        'Ext.field.Email',
        'Ext.form.FieldSet',
        'Ext.field.Toggle',
        'Ext.Label'
    ],
    // id: 'loginForm',
    config: {
        items: [
            {

                xtype         : 'label',
                html          : 'Login failed. Please enter correct credentials.',
                itemId        : 'signInFailedLabel',
                hidden        : true,
                hideAnimation : 'fadeOut',
                showAnimation : 'fadeIn',
                style         : 'color:#990000;',
                margin        : 10
            },
            {
                title: 'Please log in',
                xtype: 'fieldset',
                items:[
                    {
                        xtype: 'textfield',
                        name : 'username',
                        label: 'UserName'
                    },
                    {
                        xtype: 'passwordfield',
                        name : 'password',
                        label: 'Password'
                    }
                ]
            },
            {
                xtype: 'fieldset',
                items: [
                    {                
                        xtype : 'togglefield',
                        name  : 'rememberLogin',
                        label : 'Remember Me '
                    }
                ]
            },
            {
                xtype    : 'button',
                id       : 'loginSubmitBtn',
                itemId   : 'loginSubmitItemBtn',
                text     : 'Login',
                ui       : 'action',
                action   : 'login',
                margin   : 10
            }
        ]
    }
});

どんな助けでも大歓迎です!

編集:だから私はExt.ComponentQuery.query("#loginSubmitBtn")コンソールで出力を使用して印刷しようとしましたが、正しいボタンを指していることがわかります。これが出力です。

0: Class
_badgeCls: "x-badge"
_baseCls: "x-button"
_disabledCls: "x-item-disabled"
_floatingCls: "x-floating"
_hasBadgeCls: "x-hasbadge"
_hiddenCls: "x-item-hidden"
_icon: false
_iconAlign: "left"
_itemId: "loginSubmitItemBtn"
_labelCls: "x-button-label"
_margin: 10
_pressedCls: "x-button-pressing"
_pressedDelay: 0
_styleHtmlCls: "x-html"
_text: "Login"
_ui: "action"
action: "login"
badgeElement: Class
bodyElement: Class
config: objectClass
currentUi: "x-button-action"
element: Class
eventDispatcher: Class
getEventDispatcher: function () {
getId: function () {
getObservableId: function () {
getUniqueId: function () {
iconElement: Class
id: "loginSubmitBtn"
initConfig: function (){}
initialConfig: Object
initialized: true
innerElement: Class
managedListeners: Object
observableId: "#loginSubmitBtn"
onInitializedListeners: Array[0]
parent: Class
referenceList: Array[4]
refreshFloating: function () {
refreshSizeState: function () {
renderElement: Class
rendered: true
textElement: Class
usedSelectors: Array[1]
__proto__: Object
length: 1

**編集 3: ** 見つけた! こちらの回答を参照してください: Sencha Tap リスナーが起動しない

4

4 に答える 4

1

私は過去にこの問題を抱えていたと思います。コントローラーの参照をビュー名で修飾して、クエリを絞り込んでみてください。

loginBtn: 'logincard button[action=login]'
于 2013-06-18T07:42:22.553 に答える
1

ボタンタップのリスナーは、「itemtap」ではなく「tap」にする必要があります

tap: 'loginBtnHandler'

それが役に立てば幸い-

于 2013-06-18T00:19:56.290 に答える
0

わかりました、これは奇妙ですが、ボタンクリックが適切に処理されない理由がわかりました。私は通常、Web インスペクターをオンにしたテスト ブラウザーとして Google Chrome を使用します。Safari をダウンロードして同じコードを試してみたところ、想定どおりに動作しました。私は両方のブラウザを調べましたが、唯一の違いは、Chrome には Web インスペクタがあり、Safari にはありませんでした。Chrome で Web インスペクタを閉じたところ、ボタン ハンドラは (リロードせずに) うまく機能しました。ブラウザーを再起動し、インスペクターを別のウィンドウにプッシュしましたが、どれも機能しませんでした。ただし、Safari はインスペクターをオンにしても問題なく動作します。おそらくChromeのバグですか?

Google Chrome バージョン: 27.0.1453.110

*編集: * Web インスペクタでタッチ エミュレーションを有効にしました。これをオンにすると、タッチ イベントを登録するために Web インスペクターを閉じる必要があります。それ以外の場合は、タッチ エミュレーションをオフにして、Web インスペクターが開いている間にイベントを登録する必要があります。

TL;DR: タッチ エミュレーションがオンになっている場合は、テストの前に Chrome で Web インスペクタを閉じてください。

于 2013-06-18T15:22:28.650 に答える