Page 1 of 5 123 ... LastLast
Results 1 to 10 of 45

Thread: HtmlLayout - Use Ext components in plain HTML

  1. #1
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    118
      0  

    Default HtmlLayout - Use Ext components in plain HTML

    HtmlLayout is a small extension of the standard ContainerLayout. It allows you to use components inside plain HTML while still maintaining the container structure. This has the advantage that the components will still be managed (e.g. destroying the container doesn't leak memory for the contained components).

    The extension:
    Code:
    Ext.ns('Ext.ux.layout');
    Ext.ux.layout.HtmlLayout = Ext.extend(Ext.layout.ContainerLayout, {
        renderItem: function(c, position, target){
            if(c.renderTarget){
                target = Ext.DomQuery.selectNode(c.renderTarget, Ext.getDom(target));
            }else if(c.applyTarget){
                var el = Ext.DomQuery.selectNode(c.applyTarget, Ext.getDom(target));;
                if(!c.rendered){
                    c.el = el;
                }
                target = el.parentNode;
            }
            Ext.ux.layout.HtmlLayout.superclass.renderItem.call(this, c, undefined, target);
        }
    });
    Ext.Container.LAYOUTS['ux.html'] = Ext.ux.layout.HtmlLayout;
    Example usage:
    Code:
    Ext.onReady(function() {
        var panel = new Ext.Panel({
            title: 'HtmlLayout test',
            autoHeight: true,
            layout: 'ux.html',
            html: '<table><tr><td>Please enter your name </td><td></td><td> and password </td><td><input type="password" /></td><td>.</td></tr></table>',
            defaultType: 'textfield',
            items: [{
                name: 'username',
                renderTarget: 'td:nth(2)'
            },{
                name: 'password',
                applyTarget: 'input[type=password]'
            }]
        }).render(Ext.getBody());
    });

  2. #2
    Sencha Premium Member steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,676
    Vote Rating
    9
      0  

    Default

    nice one! It also shows how to integrate a custom layout.

    Do you ever sleep?
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  3. #3
    Ext User
    Join Date
    Oct 2007
    Posts
    22
    Vote Rating
    0
      0  

    Default

    Hmm, going to give it a spin

  4. #4
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,487
    Vote Rating
    145
      0  

    Default

    Nice layout condor
    Aaron Conran
    @aconran

  5. #5
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
      0  

    Thumbs up

    neat trick!

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,608
    Vote Rating
    59
      0  

    Default

    Yes! nice piece of lateral thinking!

  7. #7
    Ext User
    Join Date
    Jan 2009
    Posts
    543
    Vote Rating
    0
      0  

    Default

    Just what I was looking for, thanks!

  8. #8
    Ext User
    Join Date
    Jan 2009
    Posts
    543
    Vote Rating
    0
      0  

    Default

    One quick question. Instead of placing the html inline in the code with the "html" config, how can I reference an html table from some other file? The reason I ask is that it is much cleaner (especially on a complex table) to have this in a separate file. Thanks.

  9. #9
    Ext User
    Join Date
    Aug 2009
    Posts
    1
    Vote Rating
    0
      0  

    Default

    very nice!

  10. #10
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    118
      0  

    Default

    @dbassett74: Instead of 'html' you could also use 'el', 'applyTo' or 'contentEl' (depending on what you are looking for exactly).

Page 1 of 5 123 ... LastLast

Posting Permissions

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