Question

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

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

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

Component Mockup

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



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

    }
});

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

Answer 1

我使用Sencha Touch 2为this application实现了此聊天：

enter image description here

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

当然，您可以使用stores上的store结帐Sencha文档部分来推动您的组件。您基本上可以从附加到商店的代理检索数据，也可以从任何其他来源获取数据，例如使用Ext.Ajax或Ext.data.JsonP，然后在商店中使用setData()。正确配置存储后，列表将在更改其内容时自动更新。

Answer 2

您应该可以使用list和css class将rounded corners添加到列表项目中。

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

Answer 3

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


    Ext.define("SF.view.SampleDataView", {
        extend: 'Ext.Container',
        xtype: 'sample-view',
        id: 'sample-view-id',

        requires: [],

        config: {
            cls: ['class1', 'class2'],

            items: [
                {
                    xtype: 'dataview',
                    cls: 'myclass',
                    itemTpl: '{name}',
                    store: {
                        fields: ['name'],
                        data: [
                            {name: 'Congestion near tunnel'},
                            {name: 'Broken down vehicle in tunnel'},
                                                                                                {name: 'The conference is over.  See you next year.'},
                        {name: 'Slow traffic next 20 miles'},
                        {name: 'Drive carefully'},
                        {name: 'Congestion near tunnel'},
                        {name: 'Broken down vehicle in tunnel'},
                        {name: 'The conference is over.  See you next year.'},
                        {name: 'Slow traffic next 20 miles'},
                        {name: 'Drive carefully'}
                    ]
                }
            }
        ]
    },

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

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


    .customRound {
        border:2px solid;
        border-radius:25px;
        margin: 30px;
        padding: 10px;
    }

为警报创建自定义组件？

3 个答案: