sencha-touch-2 - 为警报创建自定义组件？

Question

我正在尝试开发一个自定义组件，如我的模型中所示。我在网上找到了一个示例组件(可能在 Sencha 的文档中)，现在我正在尝试根据我的目的调整它。我有两个问题:

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

我需要的是一个可滚动 ListView ，但具有不同类型的 View 。有点像 Apple 的 iPhone 消息应用程序中的气球。

我在互联网上找到的示例代码，我正在改编中:

Ext.define("Sencha.view.ComponentView", {
    扩展:'Ext.Component'，
    xtype: '自定义组件',

    配置:{
        xtype: '容器',
        可滚动:真，
        布局:{type:'vbox'，pack:'开始'，align:'拉伸(stretch)'}，
        cls: [' View 1'],
        数据: {
            项目: [
                {name: '隧道附近拥堵', n: 100},
                {name: '10号导出附近前车', n: 21},
                {name: '隧道中抛 anchor 的车辆', n: 24},
                {name: '接下来 20 英里交通缓慢', n: 24},
                {name:'小心驾驶'，n:26}
            ]
        },
        商店:'警报商店'，

        tpl: 新的 Ext.XTemplate(

            '',
            '{% if(xindex % this.getPerRow() == 1) {%}',
            '
',
            '{% } %}',

            '
',
            '
{[xindex]} - {name}
',
            '
',

            '{% if(xindex % this.getPerRow() == 0 || xindex == xcount){ %}',
            '
',
            '{% } %}',
            '',
            {
                getPerRow: 函数 () {
                    返回2；
                }
            })
    },

    初始化:函数(){
        this.callParent(参数);

    }
});

Answer 1

您应该能够使用 list和一个css class添加rounded corners到您的列表项。

这是一个基本的 fiddle :http://new.senchafiddle.com/#/vZ4fT/