Results 1 to 7 of 7

Thread: Is there anyway to supress the autoEl of a component?

  1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    83
    Answers
    7

    Default Is there anyway to supress the autoEl of a component?

    I am bemused about the assumption that all Components must be wrapped in some tag (autoEl: default div)

    This is screwing up my css. Is there anyway to suppress the autoEl, or is there another base class I can use? I would have thought this was a common scenario:

    A parent component renders some markup (via a template), loads another component which is a template-generated html fragment (not an element/node) and injects the child html into one of its own tags/containers.

    I have some list items in the parent, i want to inject a reusable sub-menu into one of the list items, which is a href followed by a new ul. but with the autoEl div component wrapped around it, it blows my supplied css.

    Parent:

    Code:
    renderTpl: [
        '<ul class="info">',
          ''<li id="cultureMenu-li" class="lang"></li>'
    ...
    ]
    Child:
    Code:
    renderTpl: [
    '<a href="#" class="langitem">{currentCultureText}</a>',
            '<ul>',
        '<tpl for="otherCultures">',
            '<li><a href="/Locale/{code}">{text}</a>',
        '</tpl>',
        '</ul>'
    ]

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258
    Answers
    759

    Default

    That's not correct:

    Code:
    Ext.onReady(function() {
    
        Ext.create('Ext.Component', {
            html: 'Foo',
            renderTo: document.body
        });
    
    });
    It's just a div with some markup.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Sencha User
    Join Date
    Jun 2012
    Posts
    83
    Answers
    7

    Default

    OK but what if i just wanted the text Foo rendering not wrapped in a div?

  4. #4
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258
    Answers
    759

    Default

    You can't. A text node has to go inside some element, whether it be the body or something else.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  5. #5
    Sencha User
    Join Date
    Jun 2012
    Posts
    83
    Answers
    7

    Default

    Well yeah, in my case a parent component

  6. #6
    Sencha User
    Join Date
    Jun 2012
    Posts
    83
    Answers
    7

    Default

    http://api.jquery.com/insertAfter/

    a
    parent (div) wants to call a component that renders an href + a list into itself, after xy element

  7. #7
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    All components must have an outermost element, much of the framework would fall down if that assumption wasn't in place.

    However, from what you've said it sounds like you don't actually want a child component. Just inject your HTML into the parent component directly. There are dozens of methods for doing this kind of thing between the Element and XTemplate classes, though possibly a tpl (not renderTpl) used in conjunction with data or update would be most appropriate in your case.

    http://docs.sencha.com/ext-js/4-1/#!...-method-update

Posting Permissions

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