Separate Forms conflicting

[sissonb]

I have two instance of the same form on the page. These forms are separate from each other, but they are conflicting.

http://content.screencast.com/users/bens1/folders/Jing/media/b2ff426c-fdd6-44d0-96d9-c988dc60ad1a/2012-04-17_1616.swf&blurover=false

Why is this happening? Let me know if you need more info.

Example. http://screencast.com/t/eqeSdQ5aCTvK

Ext.application({
launch:function () {
Ext.create('Ext.container.Viewport', {
items:[
{
xtype:'form',
itemId:'a',
id:'a',
autoEl:'form',
items:[
{
xtype:"radio",
name:'NAME',
boxLabel:"Blah Blah Blah Blah "
},
{
xtype:"radio",
name:'NAME',
boxLabel:"BlahBlah Blah Blah Blah "
},
{
xtype:"radio",
name:'NAME',
boxLabel:"BlahBlah Blah Blah Blah "
}
]
},
{
xtype:'form',
itemId:"b",
id:"b",
autoEl:'form',
items:[
{
xtype:"radio",
name:'NAME',
boxLabel:"Blah Blah Blah Blah "
},
{
xtype:"radio",
name:'NAME',
boxLabel:"BlahBlah Blah Blah Blah "
},
{
xtype:"radio",
name:'NAME',
boxLabel:"BlahBlah Blah Blah Blah "
}
]
}
]
});
}
});

A normal form doesn't conflict
http://screencast.com/t/aaFhJYc3Q1


<form>
<input type="radio" name="hello"/>
<input type="radio" name="hello"/>
<input type="radio" name="hello"/>
</form>
<form>
<input type="radio" name="hello"/>
<input type="radio" name="hello"/>
<input type="radio" name="hello"/>
</form>

[scottmartin]

How are you defining these separate forms? Do you use id's? We will need to see your code to make sure you have have created separate instances of your define.

Regards,
Scott.

[sissonb]

Hey Scott, I updated my question to show the code. I was using my own variable called GUIID, but I just added an id property to the form and the issue is still there.

[sissonb]

So does extjs just see the page as one form? Forms seem to leak into the global space and conflict. I really don't want to prefix the name property. Is there anyway to fix?

[scottmartin]

Both forms have the same id:

id:"rightSideCompare",

Scott.

[sissonb]

Opps, that was just a copy paste error when i was making the example. I've updated the example and added a video.

[scottmartin]

I will have another look.. FYI, numeric ID's are not allowed.

Regards,
Scott.

[scottmartin]

You also have the same name assigned to all 6, so they are grouped together.

Try



Ext.application({
launch:function () {
Ext.create('Ext.container.Viewport', {
items:[
{
xtype:'form',
itemId:'1',
items:[
{
xtype:"radio",
name:'NAME',
boxLabel:"Blah Blah Blah Blah "
},
{
xtype:"radio",
name:'NAME',
boxLabel:"BlahBlah Blah Blah Blah "
},
{
xtype:"radio",
name:'NAME',
boxLabel:"BlahBlah Blah Blah Blah "
}
]
},
{
xtype:'form',
itemId:"2",
items:[
{
xtype:"radio",
name:'NAME1',
boxLabel:"Blah Blah Blah Blah "
},
{
xtype:"radio",
name:'NAME1',
boxLabel:"BlahBlah Blah Blah Blah "
},
{
xtype:"radio",
name:'NAME1',
boxLabel:"BlahBlah Blah Blah Blah "
}
]
}
]
});
}
});​


Scott.

[sissonb]

Shouldn't the form create a scope automatically like it does in HTML?


<form>
<input type="radio" name="hello"/>
<input type="radio" name="hello"/>
<input type="radio" name="hello"/>
</form>
<form>
<input type="radio" name="hello"/>
<input type="radio" name="hello"/>
<input type="radio" name="hello"/>
</form>

[scottmartin]

In reviewing the API:
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.field.Radio

name:: There is a comment that states this may be a bug:



It is currently (4.0.7) not possible to have 2 or more different forms with different radio groups sharing the same name. If you have checkbox or radio groups with the same name in your application, they will be merged causing the same events to be fired among other weird errors.

Source of the problem: all RadioGroup instances in all forms are handled by only one, shared instance of Ext.form.RadioManager.

Current workaround: Make sure that you use different name for your CheckboxGroup and RadioGroup even if they are in different forms/panels/components.


Scott.