Sencha Touch Splitview NestedList и getDetailCard

Question

Я видел довольно много примеров приложения для подключения sencha touch с вложенным списком, который создает представление в методе getDetailCard, и все это отлично работает. НО я не видел, что это реализовано в настройке MVC. Более конкретно, приложение splitview MVC, в котором вложенный узел состыкован влево, а панель сведений - вправо.

Я могу использовать setActiveItem для отображения полноэкранного подробного представления с соответствующими данными весь день, но при этом удаленный вложенный список слева удаляется. Как сохранить настройку split-view и обновить 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' 
     } 
    ] 
}); 

EDIT: Хотел ссылаться на мой источник, и очень талантливый ST Dev: CAM

Answer 2

Попробуйте создать суб видовой экран, который будет содержать детали панели. Тогда вы можете просто setActiveItem для этого окна просмотра вместо окна просмотра приложения. .