Extjs Html要素のネストされたパネルオブジェクトでのソート問題

Question

3つのパネルオブジェクトをネストとして使用しています。すべてのパネルにhtml要素があります。最初のパネルのhtmlコンテンツを他の要素の上に表示したいしかし、最初のパネルのhtmlコンテンツは、コンテナパネルの最後に表示されています。ここで

は私がミスをやっている

Ext.define('MainComment', { 
extend: 'Ext.Panel', 
xtype: 'mainCommentItem', 
html: 
'<div class="mainComment">' + 
'<div class="topicCommentField">' + 
'<div class="userImageField">' + 
'<img src="images/user.jpg">' + 
'</div>' + 
'<div class="detailField">' + 
'<p>Main Comment<span class="commentTimeField">12 dk önce</span></p>' + 
'<a class="showComments"><i class="fa fa-chevron-down"></i>Yorumlar</a>' + 
'</div>' + 
'</div>' + 
'</div>'}); 


Ext.define('FirstSubComment', { 
extend: 'Ext.Panel', 
xtype: 'firstSubCommentItem', 
html: 
'<div class="subComment">' + 
'<div class="topicCommentField subCommentField">' + 
'<div class="userImageField">' + 
'<img src="images/user.jpg">' + 
'</div>' + 
'<div class="detailField">' + 
'<p>First Sub Comment<span class="commentTimeField subCommentTimeField">12 dk önce</span></p>' + 
'<a class="showComments"><i class="fa fa-chevron-down"></i>Yorumlar</a>' + 
'</div>' + 
'</div>' + 
'</div>'}); 

Ext.define('SecondSubComment', { 
extend: 'Ext.Panel', 
xtype: 'secondSubCommentItem', 
listeners: { 
    'render': function (panel) { 
     panel.body.on('contextmenu', function (eventObject, target) { 
      eventObject.preventDefault(); 
      commentContextMenu.showAt(eventObject.getXY()); 
     }); 
    } 
}, 
html: 
'<div class="subComment">' + 
'<div class="topicCommentField subCommentField">' + 
'<div class="userImageField">' + 
'<img src="images/user.jpg">' + 
'</div>' + 
'<div class="detailField">' + 
'<p>Second Sub Comment<span class="commentTimeField subCommentTimeField">12 dk önce</span></p>' + 
'<a class="showComments"><i class="fa fa-chevron-down"></i>Yorumlar</a>' + 
'</div>' + 
'</div>' + 
'</div>'}); 

var commentsContainer = Ext.create('Ext.panel.Panel', { 
items: 
[ 
    { 
     xtype: 'mainCommentItem', 
     items: 
     [ 
      { 
       xtype: 'firstSubCommentItem', 
       items: 
       [ 
        { 
         xtype: 'secondSubCommentItem' 
        } 
       ] 
      } 
     ] 
    } 
]}); 

、私のコードとスクリーンショットのですか？ ご協力いただきありがとうございます。あなたはあなたの答えコンポーネントをネストしている場合

Answer 1

あなたの主なコメントは、HTMLコンテンツとして働き、コンポーネントのように動作しません。したがって、コンポーネントとしてコメントを使用することになります。

Ext.define('Ext.component.Comment', { 
    xtype: 'comment' 
}) 

コメントコンポーネントが（など、著者、テキストボタンを追加、削除ボタン）1件のコメントに関するすべての情報を持っています：

が、これは私たちのコメントコンポーネントで考えてみましょう。

items: [ 
    { 
     xtype: 'container', 
     items: [ 
      { 
       id: 'mainCommentItem' 
       xtype: 'comment' // main comment 
      }, 
      { 
       xtype: 'container', // this component contains answers to the main comment 
       items: [ 
        { 
         xtype: 'container', 
         items: [ 
          { 
           id: 'firstSubCommentItem' 
           xtype: 'comment', // first answer 
          }, 
          { 
           xtype: 'container', 
           items: [ 
            { 
             id: 'secondSubCommentItem' 
             xtype: 'comment' // answers to the first comment and so on 
            } 
           ] 
          } 
         ] 
        } 
       ] 
      } 
     ] 
    } 
] 

Fiddle

は、なぜあなたはvertical box layoutを使用していない： だから、私たちのコメントパネルには、このアイテムを持っているのだろうか？