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而不是应用程序视口。 。