Sencha Touch Splitview NestedList 和 getDetailCard答案

【问题标题】：Sencha Touch Splitview NestedList and getDetailCardSencha Touch Splitview NestedList 和 getDetailCard
【发布时间】：2011-12-29 20:45:46
【问题描述】：

我已经看到了很多带有 nestedList 的 sencha touch 应用程序示例，它在 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);

【问题讨论】：

标签： sencha-touch ipad nested-lists

【解决方案1】：

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

【讨论】：

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

【解决方案2】：

我有答案，这会将详细信息卡滑出，更新并滑回。

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

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 开发人员：CAM

【讨论】：