PDA

View Full Version : Button inside form panel not rendering properly



susmitr
18 Jan 2013, 8:38 AM
I am trying to put buttons inside a Extjs 4.1.1 form panel in a MVC 4 RAZOR application. The panel is rendering properly in Mozilla but not rendering in IE8.

Please find the .js code below:


Ext.require([
'Ext.form.*'
]);

Ext.onReady(function () {



var formPanel = Ext.create('Ext.form.Panel', {
frame: true,
title: 'Create Facility',
width: 400,
bodyPadding: 5,
renderTo: 'extjs-form',
url: 'Facility/Create',
buttonAlign: 'center',
layout: {
type: 'fit', // Arrange child items vertically
// align: 'stretch', // Each takes up full width
padding: 5
},

fieldDefaults: {
labelAlign: 'left',
labelWidth: 150,
anchor: '100%'
},

items: [{
xtype: 'textfield',
name: 'Facility_Type_Name',
fieldLabel: 'Facility Type Name',
allowBlank: false
}, {
xtype: 'textfield',
name: 'Facility_Name',
allowBlank: false,
fieldLabel: 'Facility_Name'
}

]
,
buttons: [{
text: 'Add',
handler: function () {

formPanel.getForm().submit({
success: function (a, b) {
Ext.Msg.alert('Success', 'ok');
},
failure: function (a, b) {
Ext.Msg.alert('Failure', '');
}
});
}
},
{
text: 'Reset',
handler: function () {
formPanel.getForm().reset();
}
}]
});
});

Please find the html of view below:

<table>
<tr>
<td valign="top">
<a id="showhidetrigger" href="#">
<img src="../../Images/slider.png" alt="slider" id="imgSlide" /></a>
</td>
<td id="extjs-form">
</td>
</tr>
</table>
Please find the screenshot below. Can yo please suggest whats going wrong here. Or RAZOR + IE8 is creating problem here?
41372

susmitr
20 Jan 2013, 10:42 PM
Thanks. Solved the issue. Some other css file is creating the problem.