Extjs, как добавить HTML Div в качестве элемента

Question

Как я могу разместить компонент div как дочерний элемент и иметь доступ к нему с помощью Exjs?

Вот что я пробовал:

Ext.define('mycomponent.mywindow', {
    extend: 'Ext.window.Window',
    id: 'mywindow',
    xtype: 'mywindow',

    modal: true,
    bodyPadding: 10,
    height: 400,
    width: 575,
    closeAction: 'destroy',
    resizable: false,

    items: [
        {
            html: '<div id="mydiv">Hi there</div>'
        },
        {
           ...
        }
    ],

    initComponent: function () {
        this.callParent(arguments);
    }
});

Этот div будет иметь редактируемое содержимое.

Этот код отображает de div, но как его стилизовать и как получить к нему доступ?Кроме того, есть ли xtype: div или что-то?

Answer 1

Это можно сделать двумя способами.Один с прямой исходной строкой html, в то время как другой использует Ext.Xtemplate.Ext.Xtemplate считается хорошим, поскольку он обеспечивает хороший контроль над событиями, данными и проверками.

Вот простой код POC:

Ext.application({
    name : 'Fiddle',

    launch : function() {
        //Ext.Msg.alert('Fiddle', 'Welcome to Sencha Fiddle!');
        Ext.Viewport.add({
            xtype: 'panel',
            title: "hello",
            items: [
                {
                    html: `<div contenteditable="true">I am raw implementation</div>`,
                    listeners: {
                        input: {
                            fn: function() {
                                console.log("Changed one")
                            },
                            element: "element",
                            selector: "div"
                        }
                    }
                }, {
                    xtype: "container",
                    data: {
                        initialValue:"I am with template<script>alert(2);</script>"
                    },
                    tpl: `<div id="editor" contenteditable="true">{initialValue:htmlEncode}</div>`,
                    listeners: {
                        click: {
                            fn: function() {
                                console.log("clicked")
                            },
                            element: "element",
                            selector: "#editor"
                        },
                        input: {
                            fn: function() {
                                console.log("Changed two");
                            },
                            element: "element",
                            selector: "#editor"
                        }
                    }
                }]
        })
    }
});

Вот рабочая скрипка: https://fiddle.sencha.com/#view/editor&fiddle/2srn

Поскольку вы пытаетесь создать что-то очень близкое к dom, это может столкнуться с проблемами XSS, поэтому вы видите htmlEncode в xtemplate.Если вы хотите иметь определенные теги при отбрасывании других тегов, что, как я полагаю, является примером использования для перехода в contenteditor div, посмотрите на https://www.sencha.com/forum/showthread.php?67547-Template-XSS-and-encodeHtml, который объясняет, как вы можете написать свои собственные функции, которые можно использовать вЭкземпляры Ext.XTemplate.