Extjs How To Add Html Div As Item

How can I place a div component as children and having access to it using Exjs? This is what I tried: Ext.define('mycomponent.mywindow', { extend: 'Ext.window.Window', id:

Solution 1:

It can be done in two ways. One is with direct html source string while other is using Ext.Xtemplate. Ext.Xtemplate is considered good since it provides a good control over events, data as well as validations.

Here is simple poc code:

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

Here is working fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2srn

Since you are trying to build something very near to dom it might run into XSS issues so you see htmlEncode in xtemplate. If you want to have certain tags while drop other tags, which I believe is the use case for adopting to contenteditor div, you take a look at https://www.sencha.com/forum/showthread.php?67547-Template-XSS-and-encodeHtml which explains how you can write your own functions that can be used in Ext.XTemplate instances.