Javascript Sencha Touch 2:如何将我的DataView划分为具有不同标题的两个部分?

Javascript Sencha Touch 2:如何将我的DataView划分为具有不同标题的两个部分?,javascript,extjs,sencha-touch,sencha-touch-2,Javascript,Extjs,Sencha Touch,Sencha Touch 2,我的应用程序中有一个选项卡面板,在“我的评论”选项卡上,应该有一个用于用户提交的评论的部分,另一个用于用户只“喜欢”的评论。目前,我正在用JSON填充单个dataview,其中包含用户交互的所有评论,并且用户提交的评论和用户“喜欢”的评论之间没有分离。我想把这两个分开,给每个人一个标题 我的选项卡如下所示: { title: 'Reviews Dashboard', iconCls: 'action', layout: 'f

我的应用程序中有一个选项卡面板,在“我的评论”选项卡上,应该有一个用于用户提交的评论的部分,另一个用于用户只“喜欢”的评论。目前,我正在用JSON填充单个dataview,其中包含用户交互的所有评论,并且用户提交的评论和用户“喜欢”的评论之间没有分离。我想把这两个分开,给每个人一个标题

我的选项卡如下所示:

{
            title: 'Reviews Dashboard',
            iconCls: 'action',
            layout: 'fit',
            xtype: 'reviewsdashboard'


            items: [
                {
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'Reviews Dashboard'

                }

            ] 

        }
var tpl = new Ext.XTemplate(
'<div class=dashbox>',
'<div class="col1">${starRating} for {movietitle}</div>',
'<div class="col2">Submitted by {user}</div>',
'<div class="col3">{status}</div>',
'</div>'
);

Ext.define('MyApp.view.ReviewsDashboard',
{
extend: 'Ext.dataview.DataView',
xtype: 'reviewsdashboard',
config:
{
    xtype: 'dataview',
    title: 'Reviews Dashboard',
    itemTpl: tpl,

    store:
    {
        autoLoad: true,

        fields: [
            {
                name: 'id',
                type: 'int'
            },
            {
                name: 'user',
                type: 'int'
            },
            {
                name: 'movietitle',
                type: 'string'
            },
            {
                name: 'starRating',
                type: 'int'
            },
            {
                name: 'date',
                type: 'string'
            },
            {
                name: 'status',
                type: 'string'
            }

        ],

        proxy:
        {
            type: 'jsonp',
            url: MyApp.util.Config.getBaseUrl() +
                '/getReviews.php',
            reader:
            {
                type: 'json',
                rootProperty: 'listing'
            }
      }
   }
 }
});
我的“Reviews Dashboard”数据视图如下所示:

{
            title: 'Reviews Dashboard',
            iconCls: 'action',
            layout: 'fit',
            xtype: 'reviewsdashboard'


            items: [
                {
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'Reviews Dashboard'

                }

            ] 

        }
var tpl = new Ext.XTemplate(
'<div class=dashbox>',
'<div class="col1">${starRating} for {movietitle}</div>',
'<div class="col2">Submitted by {user}</div>',
'<div class="col3">{status}</div>',
'</div>'
);

Ext.define('MyApp.view.ReviewsDashboard',
{
extend: 'Ext.dataview.DataView',
xtype: 'reviewsdashboard',
config:
{
    xtype: 'dataview',
    title: 'Reviews Dashboard',
    itemTpl: tpl,

    store:
    {
        autoLoad: true,

        fields: [
            {
                name: 'id',
                type: 'int'
            },
            {
                name: 'user',
                type: 'int'
            },
            {
                name: 'movietitle',
                type: 'string'
            },
            {
                name: 'starRating',
                type: 'int'
            },
            {
                name: 'date',
                type: 'string'
            },
            {
                name: 'status',
                type: 'string'
            }

        ],

        proxy:
        {
            type: 'jsonp',
            url: MyApp.util.Config.getBaseUrl() +
                '/getReviews.php',
            reader:
            {
                type: 'json',
                rootProperty: 'listing'
            }
      }
   }
 }
});
var tpl=new Ext.XTemplate(
'',
{movietitle}的“${starting}”,
'由{user}提交',
“{status}”,
''
);
Ext.define('MyApp.view.ReviewsDashboard',
{
扩展:“Ext.dataview.dataview”,
xtype:“ReviewDashboard”,
配置:
{
xtype:“数据视图”,
标题:“评论仪表板”,
第三方物流:第三方物流,
商店:
{
自动加载:对,
字段:[
{
名称:“id”,
键入:“int”
},
{
名称:“用户”,
键入:“int”
},
{
名称:'电影字幕',
键入:“字符串”
},
{
名称:'主演',
键入:“int”
},
{
姓名:'日期',
键入:“字符串”
},
{
名称:'状态',
键入:“字符串”
}
],
代理:
{
键入:“jsonp”,
url:MyApp.util.Config.getBaseUrl()+
“/getReviews.php”,
读者:
{
键入:“json”,
rootProperty:'正在列出'
}
}
}
}
});

如何将数据视图拆分为两个部分,并为每个部分指定标题或标题?谢谢

您是指在一个选项卡上的两个不同视图,还是在单独的选项卡中?请澄清。如果在1个选项卡中,您必须使用容器来容纳2个数据视图,则布局将是容器上的hbox(水平框,即并排堆叠)。每个dataview的flex配置为0.5。

谢谢您的回复。我希望在两个单独的框中显示单个选项卡中的单个dataview。您是建议我使用两个数据视图,还是有一种方法可以使用同一个数据视图,但用某些值填充一个容器,用其他值填充另一个容器?您可以有两个不同的数据视图,但它们都使用相同的模型和存储。在每个数据视图模板(tpl)中,您可以使用模板中的{item name}筛选每个数据视图模板的存储结果。搜索“有条件的第三方物流数据视图”,你会发现一些东西。