Sencha touch Sencha Touch Splitview嵌套列表和getDetailCard

我已经看到了很多sencha touch应用程序的示例，它带有一个嵌套列表，可以在getDetailCard方法中创建一个视图，所有这些都可以正常工作。但我还没有看到在MVC设置中实现这一点。更具体地说，是一个splitview MVC应用程序，其中nestedList停靠在左侧，detail窗格停靠在右侧

我可以使用setActiveItem全屏显示包含相关数据的详细视图，但这样做时，左侧停靠的nestedlist将被删除。如何保持拆分视图设置并更新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);
    }
});

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

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

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

型号：Product.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);
    }
});

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

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

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

视图：ProductIndexView.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);
    }
});

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

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

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

视图：ProductDetailView.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);
    }
});

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

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

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

KCI.views.ProductDetail=Ext.extend（Ext.Panel{
滚动：‘垂直’，
styleHtmlContent:对，
背景:"4646",，
html:“产品详细信息”，
tpl:[{title}
{id}
{pid}
{leaf}
{date}
{modified}
{type}
{status}{content}]
});
Ext.reg（'ProductDetail'，KCI.views.ProductDetail）；

尝试创建包含详细信息窗格的子视口。然后，您可以只为该视口而不是应用程序视口设置活动项。

我有答案，这将滑出详细信息卡，更新它，然后滑回

在我的产品控制器中，我需要更改我的详细视图：

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

这听起来正是我需要的，你能提供一个子视口和嵌套面板的示例吗？