3 small form problems

[dotnetCarpenter]

Hi all!

I'm having some small problems that I hope someone with more Ext knowledge that me can help with.
If I use setText() on a button the padding goes away. I have added the buttons to a Ext.LayoutDialog with addButton.
compile() on an Ext.Template has the wrong scope and throws an error. Example:
var formHTML = new Ext.Template(
"<div style='{style}'>",
"<div class='x-box-tl'>",
"<div class='x-box-tr'>",
"<div class='x-box-tc'></div>",
"</div>",
"</div>",
"<div class='x-box-ml'>",
"<div class='x-box-mr'>",
"<div class='x-box-mc'>",
"<h3 style='margin-bottom:5px;'>{headline}</h3>",
"<div id='{formId}'></div>",
"</div>",
"</div>",
"</div>",
"<div class='x-box-bl'>",
"<div class='x-box-br'>",
"<div class='x-box-bc'></div>",
"</div>",
"</div>",
"</div>");
formHTML.disableFormats = true;
formHTML.compile();
Ext.form.Form won't render/can't find dynamically added HTML element. If I use the above template and give it an id, using that id (as a string) will throw an error when I use the render function.
Any help is appreciated!
Cheers, Jon.

[jsakalos]

Re. 2: I guess it's quotes issue. Try replace single quotes with double and vice-versa.

[brian.moeskau]

The quotes and double-quotes are fine -- as long as they are nested consistently, you can use them either way. Question: are you using this template to emulate the x-box markup from the form examples? You might try something like this instead:

HTML (still need your template for this bit obviously, but the wrapper div is the important part...)


<div id='my-form'>
<h3 style='margin-bottom:5px;'>{headline}</h3>
<div id='{formId}'></div>
</div>


JS:


//this will automagically apply all that x-box markup to 'my-form'
Ext.fly('my-form').boxWrap();

[jsakalos]

Hmmm,

why this tempate fails to compile?

[tryanDLS]

The quotes do make a difference. I just swapped the singles and doubles and it compiles. Not sure if this is a new change or not - still checking.

[jsakalos]

Thanks. I also thought that quotes are the issue but I was too lazy to test;)

[dotnetCarpenter]

Question: are you using this template to emulate the x-box markup from the form examples?

Yes I was. Thanks for showing (the undocumented) boxWrap method.

[dotnetCarpenter]

Thanks for the help!

I still think there are some changes that should be applied to EXT.

First: Binding a form to a dynamic created element doesn't work in a tab.


// where dialog is an Ext.LayoutDialog
var tabs = dialog.getTabs();
tabs.addTab('0','','<div id="chooseDateTime"></div>')
var firstForm = new Ext.form.Form({ labelAlign: 'top' });
firstForm.add(new Ext.form.DateField({
...
firstForm.render('chooseDateTime');

Second: As tryanDLS mention a Template will only compile if the outer quotes are double, it shouldn't matter (brian you say that it doesn't so I guess it fixed in the SVN).

Third: Possible a bug in how paddings are applied to buttons when the setText() method is used in a Ext.LayoutDialog

Anyway, thanks - I'll get back to cracking code! :)

[brian.moeskau]

Second: As tryanDLS mention a Template will only compile if the outer quotes are double, it shouldn't matter (brian you say that it doesn't so I guess it fixed in the SVN).

Sorry, I was only referring to quoting in JavaScript in general, which is perfectly valid either way -- I just assumed that Template would support either valid way of quoting strings, but I had not actually tried it myself. I guess it only supports single-quoted templates currently. Not sure if there's a reason for this or if it was an oversight.