Question

我想使用Sencha ExtJS 6现代工具包创建一个简单的IM程序。在对话面板中，我为每个发送/接收的消息动态添加一个新面板。已发送的消息应与右侧对齐，并且已接收的消息应与左侧对齐（就像Whatsapp会话一样）。

我尝试了“VBOX”布局，但它将对齐（左或右）应用于所有消息。有一个名为“Ext.layout.float”的布局，但我无法完成这项工作，因为它没有详细记录。

如何获得所需的布局？

感谢名单

Answer 1

以下是使用dataview和css实现它的示例：

Ext.application({
    name: 'Fiddle',

    launch: function() {
        var store = new Ext.data.Store({
            fields: ['text'],
            data: (function() {
                var data = [],
                    i;

                for (i = 0; i < 20; ++i) {
                    data.push({
                        text: 'Message' + (i + 1)
                    });
                }
                return data;
            })()
        });

        Ext.Viewport.add({
            xtype: 'dataview',
            store: store,
            itemTpl: '<div class="clearfix"><div style="float: {[xindex % 2 === 0 ? "left" : "right"]};">{text}</div></div>'
        });
    }
});

CSS：

.clearfix:after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

Answer 2

您可以将vbox和hbox布局与flex配置结合使用。以下是一个示例：https://fiddle.sencha.com/#fiddle/19oo

类似于WhatsApp对话的布局

2 个答案: