Question

我使用三个面板对象作为嵌套。每个面板都有一个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'
})

评论组件将包含有关一条评论的所有信息（作者，文本，添加按钮，删除按钮等）。所以我们的评论面板将包含以下内容：

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？

Extjs Html元素在嵌套面板对象中的排序问题

1 个答案: