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

Posted 2023-02-25

【中文标题】如何定义将组件添加到 DataItem 的顺序

【英文标题】：How to define order in which components are added to DataItem

【发布时间】：2012-09-04 22:38:21

【问题描述】：

我读过一篇tutorial，关于为 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 中添加另一个容器，可以在其中插入我的标签和图像？

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

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

我希望它看起来像这样：

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

【参考方案1】：

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

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 的项目顺序未定义，但在我的情况下，我得到了所需的顺序。

【参考方案2】：

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

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

干杯，奥列格

【讨论】：

不，不是存储中项目的顺序，而是视图组件添加到 DataItem 的顺序。我更新了我的问题

是的，这正是我的意思。如果您更改商店中的排序 => 您会更改 UI 上的布局。在创建数据视图之后，您是否在运行时执行此操作。你检查过吗？对于基于元素的数据视图，它可以 100% 工作

我说的是单个 DataItem 中的组件顺序，而不是整个 DataView。并且只是为了确保我尝试更改存储内的记录顺序并且单个 DataItem 的布局没有改变。