2

我正在尝试开发一个自定义组件，就像我的模型中显示的那样。我在网上找到了一个示例组件（可能在 Sencha 的文档中），现在我正在尝试根据我的目的对其进行调整。我有两个问题：

  • 这是正确的方法吗？
  • 如何从我的 AlertStore 动态驱动我的数据。该示例是带有 data: [] 值的硬编码。这不能绑定到商店吗？

我需要的是一个可滚动的列表视图，但具有不同类型的视图。有点像 Apple iPhone Messages 应用程序中的气球。

组件样机

我在互联网上找到的示例代码，我正在适应： 

Ext.define("Sencha.view.ComponentView", {
    extend: 'Ext.Component',
    xtype: 'custom-component',

    config: {
        xtype: 'container',
        scrollable: true,
        layout: {type: 'vbox', pack: 'start', align: 'stretch'},
        cls: ['view1'],
        data: {
            items: [
                {name: 'Congestion near tunnel', n: 100},
                {name: 'Car fore near exit 10', n: 21},
                {name: 'Broken down vehicle in tunnel', n: 24},
                {name: 'Slow traffic next 20 miles', n: 24},
                {name: 'Drive carefully', n: 26}
            ]
        },
        store: 'AlertStore',

        tpl: new Ext.XTemplate(

            '<tpl for="items">',
            '{% if(xindex % this.getPerRow() == 1) {%}',
            '<div class="view-container">',
            '{% } %}',

            '<div class="alert-row">',
            '<div class="name">{[xindex]} - {name}</div>',
            '</div>',

            '{% if(xindex % this.getPerRow() == 0 || xindex == xcount){ %}',
            '</div>',
            '{% } %}',
            '</tpl>',
            {
                getPerRow: function () {
                    return 2;
                }
            })
    },

    initialize: function () {
        this.callParent(arguments);

    }
});

4

3 回答 3

1

您应该能够使用列表和css 类为列表项添加圆角。

这是一个基本的小提琴： http: //new.senchafiddle.com/#/vZ4fT/

于 2013-06-28T21:28:48.433 回答
1

我用 Sencha Touch 2为这个应用程序实现了这个聊天：

在此处输入图像描述

这是list带有 XTemplate 的。正如@kevhender 在他的评论中建议的那样，您应该让您的组件继承自Ext.dataview.DataView（或者Ext.dataview.List如果您不需要由多个组件制作的列表项）。

当然，您可以使用商店store中的Sencha Docs 部分来驱动您的组件。您基本上可以从附加到商店的代理中检索您的数据，或者您可以从任何其他来源获取数据，例如使用or ，然后在商店中使用。正确配置商店后，列表将在更改其内容时自动更新。Ext.AjaxExt.data.JsonPsetData()

于 2013-06-28T21:16:02.383 回答
0

这是我从提供的答案中得出的结论。

    Ext.define("SF.view.SampleDataView", {
        扩展：'Ext.Container'，
        xtype: '样本视图',
        id: '样本视图 ID',

        要求：[]，

        配置：{
            cls: ['class1', 'class2'],

            项目： [
                {
                    xtype: '数据视图',
                    cls: '我的班级',
                    itemTpl: '{name}',
                    店铺： {
                        字段：['名称']，
                        数据： [
                            {name: '隧道附近的拥堵'},
                            {name: '隧道中的故障车辆'},
                                                                                                {name：'会议结束。明年再见。'}，
                        {name: '接下来 20 英里路况缓慢'},
                        {name: '小心驾驶'},
                        {name: '隧道附近的拥堵'},
                        {name: '隧道中的故障车辆'},
                        {name：'会议结束。明年再见。'}，
                        {name: '接下来 20 英里路况缓慢'},
                        {name: '小心驾驶'}
                    ]
                }
            }
        ]
    },

    初始化：函数（）{
        this.callParent(参数);
    }
});

我还为@bwags' css 添加了一些边距和填充。

    .customRound {
        边框：2px 实心；
        边框半径：25px；
        边距：30px；
        填充：10px；
    }
于 2013-07-08T14:18:05.680 回答