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

时间:2014-01-22 05:26:56

标签: javascript extjs sencha-touch sencha-touch-2

我的应用程序和“我的评论”标签上有一个标签面板,应该有一个用户提交的评论部分,另一个评论用户只有“喜欢”。目前,我使用JSON填充单个数据视图,其中包括用户与之交互的所有评论,并且用户提交的评论与用户“赞”评论之间没有分离。我想把这两个分开,并为每个分配一个标题。

我的标签如下:

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


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

                }

            ] 

        }

和我的“评论仪表板”DataView看起来像这样:

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

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

1 个答案:

答案 0 :(得分:0)

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