PDA

View Full Version : [Solved] Only the last TextField works when converting html to TextField with applyTo



JanVenekamp
10 Nov 2010, 1:30 PM
I'm trying to transform an existing html form into a form with Ext.form.TextField objects. I use the following code:


<form id="myid">
<table>
<tr><td><input type="text" name="a" /></td></tr>
<tr><td><input type="text" name="b" /></td></tr>
<tr><td><input type="text" name="c" /></td></tr>
<tr><td><input type="text" name="d" /></td></tr>
</table>
</form>

Ext.onReady(function () {
var form = new Ext.form.BasicForm(Ext.get('myform'));

var inputs = form.getEl().select('input[type=text]');

inputs.each(function(input) {
var field = new Ext.form.TextField({
emptyText: '...',
applyTo: input,
allowBlank: false
});

form.add(field);
});

form.items.each(function(item) {
console.log(item.el.dom.id);
});
});This transforms al the <input> tags, but only the last one works. If you click on an other on the focus is set on the last.

The console.log output is like this:

ext-gen26
ext-gen26
ext-gen26
ext-gen26
ext-gen26
ext-gen26
ext-gen26
ext-gen26
ext-gen26All are the id of the last TextField (the working one).

Am I missing something really simple here?

Animal
10 Nov 2010, 1:41 PM
Give them unique IDs.

But really. What's all this <blah> stuff which you the have to query, and process and pull into ExtJS?

Why not just Use ExtJS?

JanVenekamp
10 Nov 2010, 2:09 PM
Tried to give the ids:

<form id="myid">
<table>
<tr><td><input type="text" name="a" id="a" /></td></tr>
<tr><td><input type="text" name="b" id="b" /></td></tr>
<tr><td><input type="text" name="c" id="c" /></td></tr>
<tr><td><input type="text" name="d" id="d" /></td></tr>
</table>
</form>But the issue remains. Output:


d
d
d
d
To answer your question in short: I'm trying to improve user experience to a page made staticly (as in no dynamic build up through javascript). Also I'm trying to understand the (inner) workings of Ext.

darthwes
10 Nov 2010, 5:25 PM
applyTo: input.id,

Dangerously close to getting the feeling that your not really trying...

JanVenekamp
10 Nov 2010, 7:20 PM
Ok thanks Wes, that made it work and made me realize why it wasn't working as expected. I was under the wrong assumption that Ext.CompositeElementLite.each gave a Ext.Element as first parameter, I totally missed this:


el : ElementThe current Element in the iteration. This is the flyweight (shared) Ext.Element instance, so if you require a a reference to the dom node, use el.dom.

This explains why all the elements afterwards seemed to have the same id. So I updated my code to the following, which will make it work, also on input elements without id.


Ext.onReady(function () {
var form = new Ext.form.BasicForm(Ext.get('myform'));

var inputs = form.getEl().select('input[type=text]');

inputs.each(function(input) {
var field = new Ext.form.TextField({
emptyText: '...',
applyTo: Ext.get(input.dom),
allowBlank: false
});

form.add(field);
});

form.items.each(function(item) {
console.log(item.el.dom.id);
});
});ps Not quite 'not really trying', I've done a lot of digging through the Ext JS source code of TextField before asking here, but I was clearly looking in the wrong direction!

JanVenekamp
10 Nov 2010, 7:28 PM
And this will of course also work...



applyTo: input.dom,