HtmlLayout - Use Ext components in plain HTML

[j-joey]

thanks condor, this will be very useful for me.

[jcmartinez]

Hi, I just implemented this solution in a tab. But I have a problem, because the Ext components are not rendering the first time I select the tab. I have to do this:

a) Select the tab where I have this component. I just see the HTML items.
b) I select another tab
c) I select the tab with the component, and I see the Ext components

Do I need to do something special when I integrate this component in a tab ?

I appreciate your help.

Regards

Juan Martinez

[Condor]

Did you configure the tabpanel with layoutOnTabChange:true?

[anestesiadorhvs]

I´m trying to render an inline form using your extension, so I´m using inline function and htmllayout together, however I can´t understand the way htmllayout renders Ext's componentes. I´ve been searching about applyTarget and renderTarget in ext's api and I can´t find them.

I show you my code

This is the html form I want to render:

<form id="form1" name="form1" method="post" action="enviar.asp">
 
  <input type="text" name="texto" id="texto" />
  <select name="select" id="select">
    <option value="1">uno</option>
    <option value="2">dos</option>
  </select>
   <input type="text" name="nombre" id="nombre" />
</form>

any sugestion?, thanks in advance and sorry about my english

[plalx]

renderTarget and applyTarget are config options that you specify on the items. These will be used by the HtmlLayout to find the element in which the item will be rendered or the element to which the item will be applied to. It is normal that you don't find anything in the docs about that since HtmlLayout is a ux.

In your example, if you want an Ext.form.TextField as the first input, you would use applyTarget: 'input[name=texto]' as a config option on the first item of the container that is using the HtmlLayout.


*** Btw, great layout Condor! ***

[anestesiadorhvs]

thanks a lot scarsick. I´m trying now with select tag....

[Condor]

For the select tag you probably want to use the transform config option, which HtmlLayout currently doesn't support.

You will need to create the combobox (with the transform config option) in the render event and add it to the container yourself.

[dbassett74]

If adding a Panel to a <td> element using renderTarget, how can I specify that the panel takes up 100% width/height of that <td>?

The following doesn't work:

    var commentsPanel = new Ext.Panel({
        anchor: '100% 100%',
        renderTarget: "td:nth(10)"
    });

[plalx]

Anchor won't do it since the HtmlLayout doesn't extend the AnchorLayout. Not sure if it's going to work or if it's going to create other problems, but you can always try using style: 'height: 100%; width: 100%;'.

[Condor]

HtmlLayout doesn't do sizing of it's child items.

Instead, you could configure the commentsPanel with the FitToParent plugin.