Sencha Touch Splitview嵌套清單和getDetailCard

Question

我見過不少具有nestedList的sencha觸摸應用程序的例子，它在getDetailCard方法中創建一個視圖，所有這些都可以正常工作。但我沒有看到這在MVC設置中實現。更具體地說，一個splitview MVC應用程序，其中nestedList停靠在左側，細節窗格向右。

我可以使用setActiveItem來顯示一整天的全屏細節視圖和整天的相關數據，但是當這樣做時，左對接嵌套列表被刪除。我如何保持拆分視圖設置並更新detailView？

控制器：Products.js

/** 
* @class Products 
* @extends Ext.Controller 
*/ 
Ext.regController('Products', { 

    // index action 
    index: function(){ 
     if (! this.indexView){ 
      this.indexView = this.render({ 
       xtype: 'ProductIndex', 
      }); 
     } 
     this.application.viewport.setActiveItem(this.indexView); 
    }, 
    detail: function(options){ 
     var record = options.params[0].attributes.record.data; 
     console.log(record); 

     if (! this.detailView){ 
      this.detailView = this.render({ 
       xtype: 'ProductDetail', 
       //data: record 
      }); 
      //var detailsView = this.indexView.query('#detailsView')[0]; 
      this.detailView.update(record); 
     }  
     //this.application.viewport.setActiveItem(this.detailView, options.animation); 
    } 
}); 

型號：Product.js

Ext.regModel('Product', { 
    fields: [ 
     {name: "id", type: "int"}, 
     {name: "pid", type: "int"}, 
     {name: "type", type: "string"}, 
     {name: "status", type: "string"}, 
     {name: "title", type: "string"}, 
     {name: "content", type: "auto"}, 
     {name: "date", type: "string"}, 
     {name: "modified", type: "string"} 
    ] 
}); 


MVCApp.ProductStore = new Ext.data.TreeStore({ 
    model: 'Product', 
    autoLoad: true, 
    storeId: 'ProductStore', 
    proxy: { 
     type: 'ajax', 
     id: 'ProductStore', 
     url: 'data/nestedProducts.json', 
     reader: { 
      type: 'tree', 
      root: 'items' 
     } 
    } 
}); 

查看：ProductIndexView.js

KCI.views.ProductIndex = Ext.extend(Ext.Panel, { 
    layout: 'hbox', 
    dockedItems: [ 
     { 
      dock: 'left', 
      xtype: 'nestedlist', 
      width: '320', 
      height: '100%', 
      store: 'ProductStore', 
      displayField: 'title', 
      useToolbar: Ext.is.Phone ? false : true, 
       getDetailCard : function(record, parentRecord){ 
        Ext.dispatch({ 
         controller : 'Products', 
         action  : 'detail', 
         historyUrl : 'Products/index', 
         params : [record, parentRecord] 
        }); 
      } 
      } 
    ], 
    items: [ 
     { 
      xtype: 'ProductDetail', 
      itemId: 'detailView', 
      width: "704", 
      height: '100%' 
      } 
    ] 
}); 
Ext.reg('ProductIndex', KCI.views.ProductIndex); 

查看：ProductDetailView.js

KCI.views.ProductDetail = Ext.extend(Ext.Panel, { 
    scroll: 'vertical', 
    styleHtmlContent: true, 
    background: '#464646', 
    html: '<h1>Product Detail</h1>', 
    tpl: ['{title}<br />{id}<br />{pid}<br />{leaf}<br />{date}<br />{modified}<br />{type}<br />{status}<div>{content}</div>'] 
}); 
Ext.reg('ProductDetail', KCI.views.ProductDetail); 

Answer 1

我找到了答案，這將細節卡滑出，更新，重新滑入在

對我的產品控制器，我需要改變我的詳細視圖：

detail: function(options) 
{ 
    this.currentItem = options.params[0].attributes.record.data; 
    var rightPanel = this.application.viewport.query('#rightPanel')[0]; 

    if (! this.detailView) 
    { 
     this.detailView = this.indexView.query('#detailView')[0]; 
     this.dummyView = this.indexView.query('#dummyView')[0]; 

     this.dummyView.on('activate', function() 
     { 
      this.detailView.update(this.currentItem); 

      rightPanel.setActiveItem(this.detailView, {type: 'slide'}); 
     }, this); 
    } 

    rightPanel.setActiveItem(this.dummyView, {type: 'slide', reverse: true}); 
} 

然後在我的產品索引視圖，創建子面板和dummyview：

var rightPanel = new Ext.Panel({ 
    layout: 'card', 
    xtype: 'rightPanel', 
    itemId: 'rightPanel', 
    items: [ 
     { 
      xtype: 'ProductDetail', 
      itemId: 'detailView', 
      width: "704", 
      height: '100%', 
      html: 'right panel' 
     }, 
     { 
      itemId: 'dummyView' 
     } 
    ] 
}); 

編輯：求購參考我的源代碼，以及才華橫溢的ST開發：CAM

Answer 2

嘗試創建一個子視窗其中將包含詳細信息窗格。然後，您可以僅爲該視口的setActiveItem而不是應用程序視口。 。