Sencha Touch Splitview NestedList and getDetailCard

Question

I've seen quite a few examples of a sencha touch app with a nestedList that creates a view within the getDetailCard method and all of that works fine. BUT I have not seen this implemented in an MVC setup. More specifically, a splitview MVC app where the nestedList is docked to the left and the detail pane to the right.

I can use setActiveItem to display a fullscreen detail view with the relevant data all day but when doing so, the left docked nestedlist is removed. How do I keep the split-view setup and update the detailView?

Controller: 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);
    }
});

Model: 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'
        }
    }
});

View: 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);

View: 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

I have the answer, this will slide the detail card out, update it and slide it back in.

In my Products controller, I needed to alter my detail view:

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});
}

Then in my Product Index view, create a sub panel and a 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: Wanted to reference my source, and highly talented ST dev: CAM

Answer 2

Try creating a sub viewport which will contain detail pane. Then you can just setActiveItem for that viewport instead of the application viewport.