2

モックアップに示されているようなカスタム コンポーネントを開発しようとしています。Web でコンポーネントの例を見つけました (Sencha のドキュメントにあったかもしれません)。2 つの質問があります。

  • これは正しいアプローチですか？
  • AlertStore からデータを動的に駆動するにはどうすればよいですか。この例は、data: [] 値をハードコードしたものです。これはストアにバインドできませんか?

私が必要としているのは、スクロール可能なリスト ビューのようなものですが、ビューの種類が異なります。Apple の iPhone メッセージ アプリの吹き出しのようなものです。

コンポーネントのモックアップ

インターネットで見つけたサンプルコードで、適応中です。 

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 に答える