Geek asks and answers

Add onLoad Listener to Sencha Touch List

I want to perform the operation of selecting List after the data has been loaded , because based on the data I received, I have to select one cell in this list and it is also necessary to update the database of detailed views.

    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 that I tried to use the onLoad() method , but I want to do everything in my controller to make it more understandable.

As you saw, my event itemTapwas processed in the controller, triggering the event. But the same does not work for the event load.

+3
source share
3

, .

ProductList.js

Ext.define('WaxiApp.view.ProductViews.ProductList', {
extend: 'Ext.Container',
alias: "widget.ProductList",
requires: [
               'Ext.Img',
],
initialize: function () {

    this.add([
        {
            xtype: 'list',
            id: 'product-list-view',
            store: 'ProductsList',
            masked: { xtype: 'loadmask', message: 'loading' },
            //onLoad is not a listener it private sencha touch method used to unmask the screen after the store loaded
            onLoad: function (store) {
                this.unmask();//I manually unmask, because I override this method to do additional task.
                console.log('list loaded');
                this.fireEvent("productListLoadedCommand", this, store);
            }
            ,
            //Painted is event so added it to listener, I saw fee document state that, add event like Painted and show should to added to the
            //Component itslef is best practice. 
            listeners: {
                order: 'after',
                painted: function () {
                    console.log("Painted Event");
                    this.fireEvent("ProductListPaintedCommand", this);
                },
                scope: this
                 //This is also very important, because if we using this in card layout
                 //and changing the active view in layout cause this event to failed, so
                 //setting scope to this will help to receive the defined view instead of this list component.
            }

        }]);
},

config: {
    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);
                }
            }
    ],

    }//End of config

});//End of Define

ProductViewController.js

/// <reference path="../../touch/sencha-touch-all-debug.js" />


Ext.define("WaxiApp.controller.ProductsViewController", {

    extend: "Ext.app.Controller",
    listStoreNeedLoad:true,
    config: {
        refs: {
            ProductContainer: "ProductList",
            ProductList: "#product-list-view",
            ProductDetailView:"ProductDetail"
        },
        control: {
            ProductContainer:{
                productListSelectedCommand: "onProductListSelected",
                ProductListPaintedCommand: "onProductListPainted"
            },
            ProductList:{
                productListLoadedCommand: "onProductListLoaded"        
            }

        }//End of control

    },//End of config
    // Transitions
    getstore:function(){
        return Ext.ComponentQuery.query('#product-list-view')[0].getStore();
    },
    onProductListPainted:function(list)
    {
        //Check for if need to load store because painted event called every time your view is painted on screen
        if (this.listStoreNeedLoad) {
            var store = this.getstore();
            this.getstore().load();
        }
    },
    onProductListLoaded:function(list,store)
    {
        this.listStoreNeedLoad = false;
        var index = 0;
        //Iterate through record and set my select Index
        store.each(function(record,recordid){
            console.info(record.get("isNeedInventry"));
            if (record.get("isNeedInventry")) {
                return false;
            }
            index++;
        });

        console.log('list load event fired');
        if(Ext.os.deviceType.toLowerCase()!='phone')
        {
            this.setRecord(store.getAt(index));
            list.select(index);
        }

    }

})//End of define
0

@Jimmy, onLoad. . , , , , ProductList ( list), control :

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

, ProductList, :

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);
            }
        }
    }
]

, , , , , , load . , this ProductList product-list-view.

+2

Sencha Touch onLoad Ext.dataview.List. , Ext.data.Store load, . , , , , .

Store :

launch: function () {        
    // your store should be setup in your Ext.application
    Ext.getStore('NameOfStore').on('load', this.productListLoadedCommand);
},

productListLoadedCommand: function(store, records, successful, operation, eOpts) {
     // do some after load logic
}

. fireEvent . . , xtype: 'productlist' Ext.define WaxiApp.view.ProductViews.ProductList. Controller ref itemtap :

config: {
    ref: {
        productList: 'productlist'
    },

    control: {
        productList: {
            itemtap: 'productListSelectCommand'
        }
    }
},

productListSelectCommand: function (list, index, target, record, e, eOpts) {
    // do some itemtap functionality
}

, :

Ext.define('MyApp.controller.Controller', {
    extend: 'Ext.app.Controller',

    requires: [
        // what is required
    ],

    config: {
        ref: {
            productList: 'productlist'
        },

        control: {
            productList: {
                itemtap: 'productListSelectCommand'
            }
        }
    },

    launch: function () {        
        // your store should be setup in your Ext.application
        Ext.getStore('NameOfStore').on('load', this.productListLoadedCommand);
    },

    productListLoadedCommand: function(store, records, successful, operation, eOpts) {
         // do some after load logic
         // this.getProductList() will give you handle of productlist
    },

    productListSelectCommand: function (list, index, target, record, e, eOpts) {
        // do some itemtap functionality
    }
}

Finally, be sure to add the xtype: 'productlist'inside Ext.definefor yours WaxiApp.view.ProductViews.ProductList. I'm not sure about your overall Sencha Touch app development experience, but here is a good reference for understanding their look, model, store, controller structure.

0
source

More articles:


All Articles