的onLoad監聽器添加到煎茶觸摸列表

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事件已由控制器通過觸發事件處理。但是load事件不起作用。

Answer 1

我發現解決方案到底如何處理這種情況，並張貼我的 自己的解決方案。

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 

Answer 2

根據Sencha Touch文檔，我沒有看到Ext.dataview.List的onLoad函數。但是，該列表包含Ext.data.Store的load事件偵聽器。所以，你的事件監聽器可能應該在數據存儲上，而不一定是列表本身。

內部控制器的啓動方法，你可以設置爲存儲的負載事件監聽器，如下：

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方法即可。相反，請在控制器中進行所有事件處理。要在Controller的列表中添加一個xtype: 'productlist'，請在Ext.define內爲WaxiApp.view.ProductViews.ProductList添加xtype: 'productlist'。然後，在控制列表添加到控制器的配置作爲參考，並附加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 
    } 
} 

最後，請不要忘記在Ext.define內爲您的WaxiApp.view.ProductViews.ProductList添加xtype: 'productlist'。我不確定您使用Sencha Touch應用程序設計的整體體驗，但here是瞭解其視圖，模型，商店和控制器結構的很好參考。

Answer 3

正如@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。