Results 1 to 2 of 2

Thread: Why is htmlready not firing for sencha cordova application on samsung galaxy tab

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1

    Default Why is htmlready not firing for sencha cordova application on samsung galaxy tab

    Htmlready event not firing on Android 5.0.2 on Samsung Tablet
    I have a Sencha Touch and Cordova application that has been written for Android and iOS tablets. However, the application does not seem to trigger the htmlready event on a Samsung tablet with Android 5.0.2.
    The reason why I found this was because the tap stopped working on some of my buttons in the app. Initially I thought that maybe the tap event had changed, however, they are still firing the same in the samsung tablet with Android 5.0.2 (and I have seen this using GapDebug so I know that the touch events are definitely firing).
    Then, I found that all instances where I am registering event handlers on the htmlready event of the panels were not being registered anymore. After putting some debugging alerts and testing whether the htmlready event was fired on an older version of android (4.4.2) on A Samsung Galaxy Note 10.1 2014 Ed, which it was, that is how I found htmlready not working.
    I have done ALOT of investigation and debugging I am struggling with how to now register these event handlers.
    From what I have read about Sencha, this would normally be done in the view or the controller config.
    In this case, I have done it in the controller config, because the view is not being fully created by using sencha config, but by pulling in existing html.
    Any suggestions and assistance at this point would be welcome like. - is there an alternative to htmlready? - how else could I register these handlers when using an imported html view?
    In my app I am using:
    • Sencha Cmd v4.0.1.45
    • Node.js - v0.10.33
    • JRE - v1.7.0_71
    • Cordova - v3.4.1
    • Ant - v1.9.4
    • Sencha Touch v2.3.1
    I have included sections of the code that I felt are relevant to the issue. Let me know if you need anything else to assist.
    Home Page View (Home.js)

    Code:
        /**
         * This view class defines content of Home page.
         *
         * @class MyApp.view.panels.Client
         * @extends Ext.Panel
         */
        Ext.define('MyApp.view.panels.Home', {
    
    
            extend: 'Ext.Panel',
            xtype: 'panel-home',
            id: 'panel-home',
    
    
            config: {
    
    
                title: 'Home',
                scrollable: true,
    
    
                layout: {
                    type: 'vbox',
                    pack: 'start',
                    align: 'stretch',
                    direction: 'normal'
                },
    
    
                items: [
                    {
                        xtype: 'titlebar',
                        title: 'Home',
                        docked: 'top',
                        items: [
                            {
                                align: 'left',
                                name: 'nav_btn',
                                iconCls: 'list',
                                ui: 'plain'
                            }
                        ]
                    },
                    {
                        xtype: 'contentpanel',
                        name: 'home-content',
                        html: MyApp.utils.Global.loadContent('resources/content/home.html'),
                        flex: 1
                    },
                    {
                        xtype: 'footer'
                    }
                ]
            },
            listeners: {
            itemtap: function() {
                Ext.Msg.alert('event','delegate tap');
            },
            delegates:'div'
            }
        });


    Here is the html that is loaded into that view:

    Code:
        <div id="homeContainer" class="home-container">
            <div class="home-section long">
                <div class="home-section-button title blue top-left top-right large-shade">
                    <p class="home-title">Page Title</p>
                </div>
                <img id="info0" class="home-info-icon" src="resources/images/info-small.png">
            </div>
            <div class="home-section long">
                <div id="info0Content" class="home-info app">
                    Some content to explain about the page.
                </div>
            </div>
            <div class="home-section-column">
                <div class="home-section short">
                    <div id="home-link-stuff" class="home-section-button slate large-shade">
                        <p class="home-button-title">About Stuff</p>
                        <p id="info1Content" class="home-info button">Overview of Stuff</p>
                    </div>
                </div>
            </div>
        </div>

    Then this is the events are registered are follows:

    Code:
        /**
         * This controller class is responsible for all navigation within the application. It handles the slide out menu and
         * navigating between panels.
         *
         * @class MyApp.controller.Navigation
         * @extends Ext.app.Controller
         */
        Ext.define('MyApp.controller.Navigation', {
        extend: 'Ext.app.Controller',
    
    
        config: {
            refs: {
                main:               'main',
                mainMask:           'main mask',
                navBtn:             'button[name="nav_btn"]',
                navigation:         'navigation',
                homeContent:        'contentpanel[name="home-content"]'
                //other references as well....
            },
    
    
            control: {
                navigation: {
    
    
                    /**
                     * Navigate to panel when a item is tapped on the slide out menu.
                     *
                     * @method control.navigation.itemtap
                     *
                     * @param list {Object} Unused
                     * @param index {Integer} Unused
                     * @param target {Object} Unused
                     * @param e {Object} Unused
                     * @param record {Object} The record from the model containing the data about the panel to navigate to.
                     */
                    itemtap: function(list, index, target, e, record) {
                        if(record.get('panelId') !== null) {
                            this.navigateTo(record.get('panelId'));
                        }
                    },
    
    
                    /**
                     * If the slide out menu item is a leaf item then close it.
                     *
                     * @method control.navigation.leafitemtap
                     */
                    leafitemtap: function () {
                        this.toggleNav();
                    }
                },
    
    
                navBtn: {
                    /**
                     * Toggle the navigation slide out menu when the navigation button is tapped,
                     * @method control.navBtn.tap
                     */
                    tap: 'toggleNav'
                },
    
    
                mainMask: {
                    /**
                     * Toggle the navigation slide out menu when the mask is tapped (i.e. anything outside the menu itself),
                     * Used to dismiss the menu easily.
                     *
                     * @method control.mainMask.tap
                     */
                    tap: function() {
                        this.toggleNav();
                    }
                },
    
    
                homeContent: {
                    /**
                     * When the html on the Home panel is rendered, attach navigation link listeners to allow navigation by
                     * tapping on the links.
                     *
                     * @method control.homeContent.htmlready
                     */
                    //THIS IS NOT FIRING FOR SOME REASON!!
                    htmlready: function() {
                Ext.Msg.alert('event','htmlready');
                        this.addLinkListeners([
                            { divId: 'home-link-stuff',      panelId: 'panel-stuff'   }
                        ]);
                    }
                }
            }
        },
        
        //lots of other functions registrations
        ....
    
    
        /**
         * Causes navigation to the panel id passed to it. Also fires a navigatedTo event on the panel being navigated to
         * and fires an navigatedAway event on the panel be navigated away from.
         *
         * @method navigateTo
         * @param panelId {String} The id of the panel being navigated to.
         */
        navigateTo: function(panelId) {
            if(panelId !== null) {
                var main = Ext.getCmp('main-tab-panel');
                var panel = Ext.getCmp(panelId);
                var from = main.getActiveItem();
                main.setActiveItem(panel);
                panel.fireEvent('navigatedTo', from);
                from.fireEvent('navigatedAway', panel);
            }
        },
    
    
        ....
    
    
        /**
         * Method to add a listeners to a list of links passed to it. Used to enable app navigation on links in html and
         * template code.
         *
         * @method addLinkListeners
         * @param map {Array} Array of objects. The object array takes the form: [{ divId: 'my-div-id', panelId: 'my-panel-id' }]
         */
        addLinkListeners: function(map){
            var me = this;
            map.forEach(function(linkMap){
                Ext.get(linkMap.divId).on({
                    tap: function(e) {
                        me.navigateTo(linkMap.panelId);
                    },
                    touchstart: function(e){
                        e.delegatedTarget.classList.add('pressed');
                    },
                    touchend: function(e){
                        e.delegatedTarget.classList.remove('pressed');
                    }
                });
            });
        }
        });

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    Thanks for the report. Can you please post a test case which reproduces the issue you are seeing?
    https://fiddle.sencha.com/#home

Similar Threads

  1. [CLOSED] Sencha Touch 2 carousel bug on Samsung Galaxy Note II
    By PavelMarkovnin in forum Sencha Touch 2.x: Bugs
    Replies: 4
    Last Post: 9 Jul 2013, 6:16 AM
  2. Replies: 2
    Last Post: 17 May 2012, 9:04 PM
  3. [OPEN-762] Problems with Sencha Touch on Samsung Galaxy
    By vlads in forum Sencha Touch 1.x: Bugs
    Replies: 4
    Last Post: 1 Apr 2012, 1:45 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •