PDA

View Full Version : Simple form panel not rendered in IE (Works in FF)



sekarpdkt
13 Sep 2009, 5:42 AM
I already built a complex form with lots of panels with in it. It was working in FF. When I rolled out, it was observed that it is working in IE.

To simulate the issue, I restarted from scratch and got struck with this simple form. Works in FF, not in FF.

Any help?

Regards
Sekar



<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Route Finder WEB2.0 V1</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"> </script>
<script type="text/javascript" src="../../ext-all.js"> </script>

<script type="text/javascript" src="test.js"> </script>

<link rel="stylesheet" type="text/css" href="../../shared/examples.css" />
<style type="text/css">
.x-check-group-alt {
background: #D1DDEF;
border-top:1px dotted #B5B8C8;
border-bottom:1px dotted #B5B8C8;
}
body {
padding:0 2em 3em;
font: normal 12px arial, helvetica, sans-serif;
color: #282828;
}


</style>
</head>
<body style="margin-top:1em">
<center>
<div id="newLocation" style = "valign:center"></div>
</center>
</body>


js code




Ext.onReady(function(){

Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';

var circuitTypeComboPanel =
{
xtype: 'fieldset',
title: 'Type',
id: 'newCircuitTypePanel',
autoHeight: true,
collapsed: false, // initially do not collapse the group
collapsible: false, // Later we would like to collapse
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'first',
allowBlank:false
}
]
};

var circuitBandwidthComboPanel =
{
xtype: 'fieldset',
title: 'Bandiwidth',
id: 'newCircuitBandwidthPanel',
autoHeight: true,
collapsed: false, // initially do not collapse the group
collapsible: false, // Later we would like to collapse
items: [{
xtype:'textfield',
fieldLabel: 'Second Name',
name: 'second',
allowBlank:false
}
]
};

var circuitDefComboPanel =
{
xtype: 'fieldset',
title: 'Circuit Def',
id: 'newCircuitDefPanel',
autoHeight: true,
collapsed: false, // initially do not collapse the group
collapsible: false, // Later we would like to collapse
items: [{
xtype:'textfield',
fieldLabel: 'Mid Name',
name: 'mid',
allowBlank:false
}
]
};


var circuitTypeSelectionPanel = [{

xtype: 'fieldset',
title: 'Select Circuit Type',
id: 'newCircuitTypeSelection',
autoHeight: true,
collapsed: false, // initially do not collapse the group
collapsible: true, // Later we would like to collapse
//bodyStyle:'padding:5px 5px 5px 5px',
anchor : '100%',
items: [
{
layout: 'column',
border: false,
// defaults are applied to all child items unless otherwise specified by child item
defaults: {
columnWidth: '.31',
border: true,
bodyStyle:'padding:5px 5px 5px 5px'
},
items: [
circuitTypeComboPanel,
circuitBandwidthComboPanel,
circuitDefComboPanel
]
},

]
}];

var fp = new Ext.FormPanel({
title: 'Route finder request form',
frame: true,
standardSubmit: true,
labelWidth: 110,
anchor : '98%',
renderTo:'newLocation',
bodyStyle: 'padding:0 0px 0;',

items: [
circuitTypeSelectionPanel
],

buttons: [{
text: 'Launch',
handler: function(){
if(fp.getForm().isValid()){
fp.getForm().submit();
}
}
},{
text: 'Reset',
handler: function(){
fp.getForm().reset();
}
}]
});
});

computerangel
13 Sep 2009, 6:10 AM
corect all ur css path and js path and do not forgot to coret adrees in ext-all.css :) it will work on all Browsers ;)

sekarpdkt
14 Sep 2009, 4:53 AM
I have not added js and css in the zip. If you unzip them in to ext-js example directory, it will work.

Regards
S.Sekar

tubamanu
14 Sep 2009, 5:29 AM
added some changes to your code, for me it is working on IE6 and FF3.5



Ext.onReady(function(){

Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';

var circuitTypeComboPanel = new Ext.form.FieldSet({
title: 'Type',
id: 'newCircuitTypePanel',
autoHeight: true,
width: 300,
collapsed: false, // initially do not collapse the group
collapsible: false, // Later we would like to collapse
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'first',
allowBlank:false
}
]
});

var circuitBandwidthComboPanel = new Ext.form.FieldSet({
title: 'Bandiwidth',
id: 'newCircuitBandwidthPanel',
autoHeight: true,
width: 300,
collapsed: false, // initially do not collapse the group
collapsible: false, // Later we would like to collapse
items: [{
xtype:'textfield',
fieldLabel: 'Second Name',
name: 'second',
allowBlank:false
}]
});

var circuitDefComboPanel = new Ext.form.FieldSet({
title: 'Circuit Def',
id: 'newCircuitDefPanel',
autoHeight: true,
width: 300,
collapsed: false, // initially do not collapse the group
collapsible: false, // Later we would like to collapse
items: [{
xtype:'textfield',
fieldLabel: 'Mid Name',
name: 'mid',
allowBlank:false
}]
});


var circuitTypeSelectionPanel = new Ext.form.FieldSet({
title: 'Select Circuit Type',
id: 'newCircuitTypeSelection',
autoHeight: true,
collapsed: false, // initially do not collapse the group
collapsible: true, // Later we would like to collapse
//bodyStyle:'padding:5px 5px 5px 5px',
anchor : '100%'
});

var panelTest = new Ext.Panel({
layout: 'column',
border: 'none'
})
panelTest.add(circuitTypeComboPanel);
panelTest.add(circuitBandwidthComboPanel);
panelTest.add(circuitDefComboPanel);
circuitTypeSelectionPanel.add(panelTest);


var fp = new Ext.FormPanel({
title: 'Route finder request form',
frame: true,
standardSubmit: true,
labelWidth: 110,
anchor : '98%',
renderTo:'newLocation',
bodyStyle: 'padding:0 0px 0;',
buttons: [{
text: 'Launch',
handler: function(){
if(fp.getForm().isValid()){
fp.getForm().submit();
}
}
},{
text: 'Reset',
handler: function(){
fp.getForm().reset();
}
}]
});
fp.add(circuitTypeSelectionPanel);
fp.doLayout();
});

sekarpdkt
14 Sep 2009, 9:03 PM
It worked. Also it opened up the knowledge of lot more power of Panel and form panel.

Thanks.

Regards
S.Sekar