Extjs Html Element's Sorting Issue in Nested Panel Objects

Question

I'm using three panel object as nested. There is a html element in every panel. I want to see first panel's html content above the other elements. But first panel's html content is viewing at the end of the container panel.

Here is my code and screenshot,

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'
                    }
                ]
            }
        ]
    }
]});

Where I'm doing mistake ? Thanks your help.

Answer 1

When you are nesting your answer components your main comment doesn't behave like component, it works as a html content. So you will want to use comments as a component.

Consider this is our Comment component:

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

Comment component will have all info about one comment (author, text, add button, delete button, etc.). So our Comments panel will have this items:

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

Why don't you use vertical box layout ?