Add onLoad Listener to Sencha Touch List

Question

I want to perform selection operation on List after the data has been loaded, because based on the data which I received I have to select one cell in that list and also need to update the detail view base on that.

    Ext.define('WaxiApp.view.ProductViews.ProductList', {
    extend: 'Ext.Container',
    alias: "widget.ProductList",
    requires: [
                   'Ext.Img',
    ],
    config: {
        layout: Ext.os.deviceType == 'Phone' ? 'fit' : {
            type: 'hbox',
            pack:'strech'
        },
        cls: 'product-list',
        items: [{
            xtype: 'list',
            id:'product-list-view',
            width: '100%',
            height:'100%',
            store: 'ProductsList',
            infinite: true,
            plugins: 'sortablelist',
            itemCls: 'productList',
            itemId:"product-item",
            itemTpl: new Ext.XTemplate(
                '<div class="list-content-div ',
      '<tpl if="this.needSortable(isNeedInventry)">',
            Ext.baseCSSPrefix + 'list-sortablehandle',

        '</tpl>',
         '">',
         '<b>{UpcCode} {Name}</b>',
        '<tpl if="isActive">',
            '</div>',
        '</tpl>',
            {
                // XTemplate configuration:
                compiled: true,
                // member functions:
                needSortable: function (isneedInventry) {
                    return !isneedInventry;
                },
            }),
            masked: { xtype: 'loadmask',message: 'loading' },
            onLoad: function (store) {
                this.unmask();
                console.log('list loaded');
                this.fireEvent("productListLoadedCommand", this,store);
            },

        }
        ],
        listeners: [
                {
                    delegate: "#product-list-view",
                    event: "itemtap",
                    fn: function (list, index, target, record) {
                        console.log(index);
                        console.log('list selection command fired');
                        this.fireEvent("productListSelectedCommand", this,index,record);
                    }
                }

        ],
        style: 'background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FDFDFD), color-stop(1, #DBDBDB));background-image: linear-gradient(to bottom right, #FDFDFD 0%, #DBDBDB 100%);'
    }//End of config

});//End of Define

Above this actual view I used to display the list. My problem is I tried onLoad() method it work but i want do everything in my Controller to make it more clear.

As you saw my itemTap event has been handled in Controller by firing event. But same is not working for load event.

Answer 1

As mentioned by @Jimmy there is no onLoad method on list. However there are a few ways to work around it. My understanding of what you want to achieve is that when the store backing the list is loaded, you want an event to be fired from the ProductList instance (not the list) such that in the controller you can configure the control to be:

control: {
    ProductList: {
        productListSelectedCommand: 'productListSelectCommand',
        productListLoadedCommand: 'productListLoadedCommand'
    }
}

If so then we can modify the listeners in your existing ProductList class to do the following:

listeners: [
    {
        delegate: "#product-list-view",
        event: "itemtap",
        fn: function (list, index, target, record) {
            console.log(index);
            console.log('list selection command fired');
            this.fireEvent("productListSelectedCommand", this,index,record);
        }
    },
    {
        delegate: "#product-list-view",
        event: "show",
        fn: function (list) {
            var store = list.getStore();
            var handler = function() {
                list.unmask();
                console.log('list loaded');
                this.fireEvent("productListLoadedCommand", this, store);
            };
            if (store.isLoaded()) {
                handler.apply(this)
            } else {
                list.getStore().on('load', handler, this);
            }
        }
    }
]

What this is does is to what for the list to be shown and then get it's store, if the store has loaded then invoke the handler, otherwise register a load listener directly on it. Note that the this object here will be the ProductList not the product-list-view.