WhatsAppの会話に似たレイアウト

Question

Sencha ExtJS 6の最新のツールキットを使用して簡単なIMプログラムを作成したいと考えています。会話パネルでは、送受信されたメッセージごとに新しいパネルを動的に追加します。送信されたメッセージは右側に整列され、受信されたメッセージは（Whatsappの会話のように）左に揃えられるべきです。

私は "VBOX"レイアウトを試しましたが、すべてのメッセージにアライメント（左または右）を適用します。 「Ext.layout.float」と呼ばれるレイアウトがありますが、文書化されていないため、その作業を行うことができませんでした。

希望するレイアウトを取得するにはどうすればよいですか？ここで

ありがとう

Answer 1

あなたがの組み合わせを使用することができますフレックス設定のvboxとhboxレイアウト。 https://fiddle.sencha.com/#fiddle/19oo

Answer 2

は、それを達成するためにデータビューとCSSを使用した例である：

Fiddle

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