Question

我想在加载数据后列表 执行选择操作 ，因为根据我收到的数据，我必须选择该列表中的一个单元格，并且还需要根据该单元格更新详细信息视图。

    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

在这个实际视图上方，我用来显示列表。我的问题是我尝试了onLoad（）方法，但是我希望在我的控制器中做所有事情以使其更清晰。

如您所见，我的itemTap事件已在Controller中通过触发事件处理。但同样不适用于load事件。

Answer 1

如@Jimmy所述，列表中没有onLoad方法。但是，有几种方法可以解决它。我对你想要实现的内容的理解是，当加载支持列表的商店时，你希望从ProductList实例（而不是list）触发事件，这样在控制器中你可以配置{{ 1}}成为：

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。

Answer 2

根据Sencha Touch文档，我没有看到Ext.dataview.List的onLoad函数。但是，列表包含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
}

您还应该在控制器中为列表设置事件侦听器。您不需要在视图配置中创建一个侦听器，只能在Controller中调用fireEvent方法。相反，在控制器中执行所有事件处理。要在控制器中处理列表，请在xtype: 'productlist'内为Ext.define添加WaxiApp.view.ProductViews.ProductList。然后，将您的列表作为参考添加到Controller的配置中，并在控件中附加列表的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
    }
}

最后，不要忘记在xtype: 'productlist'内为Ext.define添加WaxiApp.view.ProductViews.ProductList。我不确定您使用Sencha Touch应用程序设计的整体体验，但here是理解其视图，模型，存储，控制器结构的良好参考。

Answer 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's 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

将onLoad侦听器添加到Sencha Touch List

3 个答案: