1. #1
    Sencha User mes-x's Avatar
    Join Date
    Mar 2010
    Posts
    27
    Vote Rating
    1
    mes-x is on a distinguished road

      0  

    Default ExtJS 4.1: Render Widget into XTemplate

    ExtJS 4.1: Render Widget into XTemplate


    Hi,

    is there a way, to add widgets into a renderTpl?
    For example: having a renderTpl which defines a complex structure of div-containers and table-cells. In some table cells, i want to insert a gridpanel, in others i want to add a numberfield, in others a multislider, ...

    What is best practice to do this in ExtJS 4.1? Or is it just not possible?

    thanks for any info and best regards!
    Manuel


    ps.: just for the record: i'm building a custom control which looks like a table and holds some widget in it. Some rows are collapsible, some not, ...

  2. #2
    Ext JS Premium Member burnnat's Avatar
    Join Date
    Jun 2011
    Posts
    416
    Vote Rating
    61
    burnnat is a jewel in the rough burnnat is a jewel in the rough burnnat is a jewel in the rough burnnat is a jewel in the rough

      0  

    Default


    You can try using skirtle's CTemplate extension to do this.

  3. #3
    Sencha User mes-x's Avatar
    Join Date
    Mar 2010
    Posts
    27
    Vote Rating
    1
    mes-x is on a distinguished road

      0  

    Default


    Thank you very much for your quick answer! This seems to be exactly what i need.

    So there is no built-in feature for that? How are other components doing this (for example: a container)?
    I would like to know the "new" ExtJS 4.1 way of rendering. With 4.0 i just used the renderTo property of widgets. I guess the CTemplate extension is doing the same?

    best regards
    Manuel

  4. #4
    Ext JS Premium Member burnnat's Avatar
    Join Date
    Jun 2011
    Posts
    416
    Vote Rating
    61
    burnnat is a jewel in the rough burnnat is a jewel in the rough burnnat is a jewel in the rough burnnat is a jewel in the rough

      1  

    Default


    There is no built-in feature to do this in arbitrary XTemplates, which is what the CTemplate extension is designed for.

    For the renderTpl of components, though, there is some added logic that allows the insertion of components to be handled by the layout subsystem. If you look at the renderTpl for Ext.container.Abstract, you'll see it is defined like so:
    Code:
    renderTpl: '{%this.renderContainer(out,values)%}',
    This is a reference to a function injected into the XTemplate by the container's layout. You can find the relevant code in Ext.layout.container.Container:
    Code:
        setupRenderTpl: function (renderTpl) {
            var me = this;
    
            renderTpl.renderBody = me.doRenderBody;
            renderTpl.renderContainer = me.doRenderContainer;
            renderTpl.renderItems = me.doRenderItems;
            renderTpl.renderPadder = me.doRenderPadder;
        }
    As you can see, this attaches various layout functions for use within the renderTpl, including the renderContainer method. That method grabs the renderTpl from the layout subclass (such as Ext.layout.container.Auto), and that renderTpl in turn references renderBody, which calls the doRenderItems method which is what actually injects the markup for the sub-components.

    I had forgotten that your question was specifically dealing with the renderTpl, not just any old XTemplate. While the CTemplate extension works fine, I imagine there will be performance penalties if you try to use it with the rendering/layout subsystem, since rendering and layout is highly optimized in 4.1, batching together DOM reads and writes to avoid document reflows, etc. So if you're working with a renderTpl, I'd try to re-use some of the layout stuff that's already out there to keep things nice and performant.

  5. #5
    Sencha User
    Join Date
    Mar 2010
    Posts
    25
    Vote Rating
    1
    BigSeanDawg is on a distinguished road

      0  

    Default


    I created a layout that will read the renderTpl, and inject the child components into specified dom elements. The main advantage over CTemplate is that the component hierarchy is maintained, so everything that goes along with that still works (e.g. auto-destroy of child components, component queries still work, etc).

    Find the extension here:
    http://www.sencha.com/forum/showthread.php?185214-HTML-focused-DOM-Layout-for-auto-height-web-applications-(Ext-4.1)