Sencha Touch Splitview NestedList и getDetailCard

Question

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

Я могу использовать setActiveItem для отображения полноэкранного подробного представления с соответствующими данными весь день, но при этомлевый закрепленный вложенный список удаляется.Как сохранить настройку разделения вида и обновить подробный вид?

Контроллер: 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});
}

Затем в моем представлении «Индекс продукта» создайте вспомогательную панель и пустышку:

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 dev: CAM

Answer 2

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