Sencha Touch 2 Component in list emptyText

Question

I have a list component that I want to display a button to send a suggestion for the data to be included if it turns up no results.

List component itself is implemented like this:

        {
            xtype: 'list',
            itemTpl: '{name}',

            // This is not ideal!
            emptyText: [
                '<div class="x-button-normal x-button">',
                    '<span class="x-button-label">',
                        'Suggest <i><span id="suggest-name"></i>',
                    '</span>',
                '</div>'
            ].join(''),

            store: 'TheStore'
        }

And this is the handler for the search field that simply sets a substring filter on the store:

        'keyup': function(self, e, eOpts) {
            queryString = self.getValue();
         
            var store = Ext.getStore('TheStore');
            store.clearFilter();
         
            if(queryString){
                var thisRegEx = new RegExp(queryString, "i");
                store.filterBy(function(record) {
                    if (thisRegEx.test(record.get('name'))) {
                        return true;
                    };
                    return false;
                });
                // Changes the button so it shows name
                document.getElementById('suggest-name').innerText = queryString;
            }
        },

Right now, I have the emptyText set to some simple HTML that emulates the look of a Sencha Touch button, but this means I have none of the button behaviour since it's not tied into the component system (such as being depressed when tapped). How can I set the emptyText attribute (or emulate it) since a proper button is displayed instead?

Answer 1

Try to view the two screencasts below

• Sencha Touch - Intro to Nested List Component
• Sencha Touch 2 - Intro to List Component

Answer 2

I know it's about 2 years too late... but I ran into the same problem as @Hampus Nilsson and when I found the solution, I figured if I was running into this 2 years later, others might run into it as well.

With that said... I'm currently running Sencha Touch version 2.3.1. The solution, as it pertains to that version, was really easy to implement, just super tricky to find. The problem is that Sencha has a CSS property on the emptyText component (x-list-emptytext class) that is ignoring all pointer interactions called pointer-events: none; (who knew?!)

This property is found in:

[sdk_root]/resources/themes/stylesheets/sencha-touch/base/src/dataview/_List.scss

.x-list-emptytext {
        text-align: center;
        pointer-events: none;  // THIS ONE!!
        font-color: #333333;
        @include st-box();
        @include st-box-orient(vertical);
        @include st-box-pack(center);
}

To fix this, simply override that property in your own sass/css. I chose to override it with pointer-events: inherit; but your mileage may vary.

THEN, all you need to do is setup a listener on your list, I recommend in the initialize function of your list class, like the so:

this.emptyTextCmp.element.on({
    delegate: '.x-button-normal',
    scope: this,
    tap: this.yourCustomFunction
});

Where this is your list component. It's important to note that you need a "." in front of the class name of your delegate. In the above example, I set the delegate to: '.x-button-normal', because that was one of the two classes listed in the question's code. I could've also used '.x-button'. If it were me, I'd give your html an additional class, to be used as the delegate, that helps identify it a little better, instead of just using the default Sencha class as your delegate. That's an opinion, not a requirement.

That's it, I hope this helps someone else!