PDA

View Full Version : Separate Forms conflicting



sissonb
17 Apr 2012, 3:19 PM
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
17 Apr 2012, 3:37 PM
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
17 Apr 2012, 3:38 PM
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
17 Apr 2012, 5:41 PM
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
17 Apr 2012, 5:54 PM
Both forms have the same id:

id:"rightSideCompare",

Scott.

sissonb
17 Apr 2012, 5:54 PM
Opps, that was just a copy paste error when i was making the example. I've updated the example and added a video.

scottmartin
17 Apr 2012, 6:15 PM
I will have another look.. FYI, numeric ID's are not allowed.

Regards,
Scott.

scottmartin
17 Apr 2012, 6:21 PM
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
17 Apr 2012, 6:29 PM
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
17 Apr 2012, 7:20 PM
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.