如何定义组件添加到DataItem的顺序

How to define order in which components are added to DataItem

本文关键字：添加 DataItem 顺序 组件 何定义 定义      更新时间：2023-09-26

我读过一篇教程，介绍如何为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中添加另一个容器，可以在其中插入我的标签和图像？

更新：现在我的布局是这样的：

|标签（标题）||图像（照片）|

我希望它看起来像这样：

|图像（照片）||标签（标题）|

我终于明白了如何解决我的问题，下面是我的代码：

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

我没有在根目录中添加组件，而是在DataItem中定义了两个面板（占位符）。我使用getComponent方法访问它们，并将我的组件添加到所需的位置。这里唯一的问题是添加到textContainer的项目的顺序是未定义的，但在我的情况下，我得到了所需的顺序。

是否更改后端存储的排序顺序？我不确定基于组件的DataView，但基于元素的匹配存储排序。

要正确设置（或更改）排序，您必须阅读Store的配置排序器属性或排序函数

干杯，Oleg

相关文章：