Results 1 to 2 of 2

Thread: How to place a div as item

  1. #1
    Sencha User
    Join Date
    Apr 2019
    Posts
    7

    Default Answered: How to place a div as item

    How can I place a div tag as an item of a window?
    Here is what I tried so far:

    HTML Code:
    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);
        }
    });
    This div will have editable content.
    That code displays de div, but, how to style it and how to access its contents? Also, is there any xtype: div or something?

  2. Here is a fiddle to answer your questions.

    The style was applied using inline style attribute but can also be styled by applying a class using an external stylesheet.

    I used the afterrender listener to show you how you can use regular JavaScript within Ext JS to access your added div element. This can be done from external scripts and triggering them from within Ext JS events or directly using the onclick event within your div definition.



    No, there is not a div xtype in Ext JS.

  3. #2
    Sencha MVP Team Member
    Join Date
    Sep 2016
    Location
    Kennewick, WA
    Posts
    150
    Answers
    15

    Default

    Here is a fiddle to answer your questions.

    The style was applied using inline style attribute but can also be styled by applying a class using an external stylesheet.

    I used the afterrender listener to show you how you can use regular JavaScript within Ext JS to access your added div element. This can be done from external scripts and triggering them from within Ext JS events or directly using the onclick event within your div definition.



    No, there is not a div xtype in Ext JS.
    Andy Allord
    Sencha MVP/Software Engineer

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •