3

Store の各要素のカスタム コンポーネントを使用した作成に関するチュートリアルを読みました。DataViewレコードのフィールドを のコンポーネントにマッピングすることについて書かれていますDataItemが、私の質問はコンポーネントが に追加される順序を定義する方法DataItemです。

たとえば、次のような DataItem があります。

Ext.define('demo.view.CottageItem', {
    extend: 'Ext.dataview.component.DataItem',
    requires: ['Ext.Label', 'Ext.Array', 'Ext.Img'],
    xtype: 'listitem',

    config: {
        layout: {
            type: 'hbox',
            align: 'center',
            pack: 'start',
        },
        title: {
            flex: 1
        },
        photo: {
            width: '140px',
            height: '140px'
        },

        dataMap: {
            getTitle: {
                setHtml: 'title'
            },
            getPhoto: {
                setSrc: 'photo'
            }
        },
        styleHtmlContent: true
    },

    applyTitle: function(config) {
        return Ext.factory(config, Ext.Label, this.getTitle());
    },

    updateTitle: function(newTitle, oldTitle) {
        if (oldTitle) {
            this.remove(oldTitle);
        }

        if (newTitle) {
            this.add(newTitle);
        }
    },

    applyPhoto: function(config) {
        return Ext.factory(config, Ext.Img, this.getPhoto());
    },

    updatePhoto: function(newImage, oldImage) {
        if (oldImage) {
            this.remove(oldImage);
        }

        if (newImage) {
            this.add(newImage);
        }
    },
});

レイアウトタイプhboxなので、写真を先に入れてからタイトルを入れたいです。そのタイトルは写真の右側になります。どうすればこれを達成できますか？

別の質問は、DataItemラベルと画像を挿入できる別のコンテナーをこの内に追加する方法はありますか?

更新: 私のレイアウトは次のようになります:

|ラベル(タイトル)| |画像(写真)|

私はそれがこのように見えるようにしたい:

|画像(写真)| |ラベル(タイトル)|

4

2 に答える 2

3

最後に、私は自分の問題を解決する方法を理解しました。ここに私のコードがあります:

Ext.define('demo.view.CottageItem', {
    extend: 'Ext.dataview.component.DataItem',
    requires: ['Ext.Label', 'Ext.Array', 'Ext.Img'],
    xtype: 'listitem',

    config: {
        layout: {
            type: 'hbox',
            align: 'center',
            pack: 'start',
        },
        title: {
            style: {
                'font-weight': 'bold'
            }
        },
        photo: {
            width: '140px',
            height: '140px'
        },
        desc: {},

        dataMap: {
            getTitle: {
                setHtml: 'title'
            },
            getPhoto: {
                setSrc: 'photo'
            },
            getDesc: {
                setHtml: 'desc'
            },
        },
        styleHtmlContent: true,
        items: [
            {
                xtype: 'panel',
                itemId: 'photoContainer',
            },
            {
                xtype: 'panel',
                layout: {
                    type: 'vbox'
                },
                itemId: 'textContainer',
                flex: 1,
            }
        ],
    },

    applyTitle: function(config) {
        return Ext.factory(config, Ext.Label, this.getTitle());
    },

    updateTitle: function(newTitle, oldTitle) {
        if (oldTitle) {
            this.getComponent('textContainer').remove(oldTitle);
        }

        if (newTitle) {
            this.getComponent('textContainer').add(newTitle);
        }
    },

    applyPhoto: function(config) {
        return Ext.factory(config, Ext.Img, this.getPhoto());
    },

    updatePhoto: function(newImage, oldImage) {
        if (oldImage) {
            this.getComponent('photoContainer').remove(oldImage);
        }

        if (newImage) {
            this.getComponent('photoContainer').add(newImage);
        }
    },

    applyDesc: function(config) {
        return Ext.factory(config, Ext.Label, this.getDesc());
    },

    updateDesc: function(newDesc, oldDesc) {
        if (oldDesc) {
            this.getComponent('textContainer').remove(oldDesc);
        }

        if (newDesc) {
            this.getComponent('textContainer').add(newDesc);
        }
    },
});

コンポーネントをルートに追加する代わりに、 内に 2 つのパネル (プレースホルダー) を定義しDataItemました。メソッドを使用してそれらにアクセスしgetComponent、コンポーネントを目的の場所に追加します。ここでの唯一の問題は、追加されたアイテムの順序textContainerが定義されていないことですが、私の場合、目的の順序になりました。

于 2012-09-05T19:19:59.440 に答える
0

バックエンド ストアの並べ替え順序を変更しますか? コンポーネントベースのDataViewについてはわかりませんが、要素ベースの一致はソートを保存します。

並べ替えを適切に設定 (または変更) するには、Store のconfig sortersプロパティまたはsort関数を読み取る必要があります

乾杯、オレグ

于 2012-09-04T23:02:41.350 に答える