FireFox issue in Extjs 3.3.1

[siriteja9]

While using display:none and display:block in a div to show and hide the respective forms,the combo boxes in the form are getting shrinked and the form alignment is completely distracted.....This issue occured in firefox but works fine in IE..:-/.
Please help me ASAP.......:((

[streha]

How to help without any code?

[siriteja9]

<div id="action" style="position:relative;display:none; padding-top:10px;padding-left:15px;"></div>

I am using the above div to hide the page on load ....

Onclicking a button i am displaying the form.
document.getElementById('action').style.display='block';

While using the display: none and block the combo box is getting shrinked in firefox.
Can any one provide me a solution for this........

[streha]

Ok budy if I am right the problem is about the Combos and U gave me the code of the div ??? For what?

Have U tried to use the
visibility:hidden;Do Ur Combos have an width argument?

greets

[siriteja9]

hi streha...

I already tried with visibility:hidden...but if u use this code the div which i am hiding will take space in the browser..

if u want the js code here it is..........





var newConnectionFirst = new Ext.FormPanel({
title: 'Connection Information',
labelWidth: 75,
frame:true,
bodyStyle:'text-align:left; padding:5px 5px 0',
id: 'servicerequest',
width: 550,
renderTo: 'action',
items: [{
xtype:'fieldset',
id: 'ServiceRequestInfo',
labelWidth: 125,
title: 'Service Request Information',
labelAlign: 'top',
autoHeight:true,
items :[{
layout:'column',
items:[{
columnWidth:.5,
layout: 'form',
items: [{
xtype: 'combo',
fieldLabel: 'Purpose <span class="mandatoryField">*</span>',
hiddenName: 'purpose',
//hiddenValue:'0',
id: 'purposeId',
displayField:'purposeLabel',
valueField: 'purposeValue',
emptyText:'- Select Purpose -',
forceSelection: true,
//editable:false,
store: purpose,
triggerAction: 'all',
mode: 'local',
allowBlank:false,
submitValue: true,
anchor:'90%',
listeners: {
render: function(c) {
Ext.QuickTips.register({
target: c.getEl(),
text: 'Select valid Purpose with respect to your connection'
});
}
}
},{
xtype: 'combo',
fieldLabel: 'Phase <span class="mandatoryField">*</span>',
hiddenName: 'phase',
displayField:'phaseLabel',
valueField:'phaseValue',
submitValue: true,
forceSelection: true,
//editable:false,
store: phase,
mode: 'local',
triggerAction: 'all',
emptyText:'- Select Phase -',
selectOnFocus:true,
allowBlank:false,
anchor:'90%',
listeners: {
render: function(c) {
Ext.QuickTips.register({
target: c.getEl(),
text: 'Select valid Phase with respect to your connection'
});
}
}
},{
xtype:'textfield',
fieldLabel: 'Name of the Person/Organization <span class="mandatoryField">*</span>',
name: 'personname',
id:'personname',
//vtype:'nameValidation',
maskRe:/^[a-zA-Z0-9\s.]+$/,
allowBlank:false,
maxLength:50,
anchor:'90%',
listeners: {
render: function(c) {
Ext.QuickTips.register({
target: c.getEl(),
text: 'Enter either customer name or Organisation name you are belonging to'
});
}
}

}]
},{
columnWidth:.5,
layout: 'form',
items: [{
xtype: 'combo',
fieldLabel: 'Category <span class="mandatoryField">*</span>',
hiddenName: 'category',
displayField:'categoryLabel',
valueField: 'categoryValue',
forceSelection: true,
//editable:false,
id : 'categoryId',
store: category,
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'- Select Category -',
selectOnFocus:true,
allowBlank:false,
anchor:'90%',
listeners: {
render: function(c) {
Ext.QuickTips.register({
target: c.getEl(),
text: 'Select valid Category with respect to your connection'
});
},
select:{fn:function(combo, value) {
if(combo.getValue().trim()=="CM_LT_DM")
{
var comboCity = Ext.getCmp('changeLoadUOM');
comboCity.clearValue();
comboCity.store.filter('categoryId', combo.getValue());
}
else
{
var comboCity = Ext.getCmp('loadUnit');
comboCity.clearValue();
comboCity.store.filter('categoryId', combo.getValue());
}

}
}
}
},{
xtype: 'combo',
fieldLabel: 'Customer Type <span class="mandatoryField">*</span>',
hiddenName: 'consumertype',
displayField:'consumerTypeLabel',
valueField:'consumerTypeValue',
id: 'consumerTypeId',
submitValue: true,
forceSelection: true,
//editable:false,
store: consumerType,
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'- Select Customer Type -',
selectOnFocus:true,
allowBlank:false,
anchor:'90%',
listeners: {
render: function(c) {
Ext.QuickTips.register({
target: c.getEl(),
text: 'Select valid Customer Type with respect to your connection'
});
}
}
}]
}]
}]

}, {
xtype:'fieldset',
id: 'connectionAddress',
labelWidth: 125, //TODO Label size
title: 'Connection Address',
autoHeight:true,
labelAlign: 'top',

items: [{
layout:'column',
items:[{
columnWidth:.5,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: 'House No./ Plot No.,Street <span class="mandatoryField">*</span>',
name: 'houseNumber_connectionAddress',
id:'checking_Id',
allowBlank:false,
maskRe:/^[a-zA-Z0-9-.,()&/\s]+$/,
maxLength:50,
anchor:'90%',
listeners: {
render: function(c) {
Ext.QuickTips.register({
target: c.getEl(),
text: 'Enter valid House No./ Plot No.,Street for your connection'
});
}
}
},
/*{
xtype:'textfield',
fieldLabel: 'Landmark',
name: 'landMark_connectionAddress',
vtype:'hyphen',
maxLength:50,
anchor:'90%',
listeners: {
render: function(c) {
Ext.QuickTips.register({
target: c.getEl(),
text: 'Enter Landmark near to your connection address'
});
}
}
},*/
{
xtype: 'combo',
fieldLabel: 'District <span class="mandatoryField">*</span>',
hiddenName: 'district_connectionAddress',
displayField:'name' ,
valueField:'cid',
store: districts,
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'- Select District -',
selectOnFocus:true,
allowBlank:false,
forceSelection: true,
//editable:false,
anchor:'90%',
listeners:{select:{fn:function(combo, value) {
var comboCity = Ext.getCmp('combo-city');
comboCity.clearValue();
comboCity.store.filter('cid', combo.getValue());
}},
render: function(c) {
Ext.QuickTips.register({
target: c.getEl(),
text: 'Select District for your connection address'
});
}
}
},{
xtype: 'combo',
fieldLabel: 'DC/Zone <span class="mandatoryField">*</span>',
hiddenName: 'dczone_connectionAddress',
forceSelection: true,
//editable:false,
displayField: 'dcZoneLabel',
valueField: 'dcZoneValue',
id:'combo-dcZone',
//name:'combo-dcZone',
lastQuery : '',
submitValue: true,
store: dcZone,
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'- Select DC/Zone -',
selectOnFocus:true,
allowBlank:false,
anchor:'90%',
listeners: {
render: function(c) {
Ext.QuickTips.register({
target: c.getEl(),
text: 'Select DC / Zone with respect to your District'
});
}
}
},{
xtype:'textfield',
fieldLabel: 'State',
name: 'state',
value:'Madhya Pradesh',
readOnly:'true',
fieldClass: "x-item-disabled",
editable:false,
anchor:'90%'
},{
xtype:'numberfield',
fieldLabel: 'Phone Number <span class="mandatoryField">**</span>',
name: 'phoneNumber_connectionAddress',
id: 'phoneNumber',
allowNegative:false,
allowDecimals : false,
minLength : 10,
maxLength : 10,
anchor:'90%',
listeners: {
render: function(c) {
Ext.QuickTips.register({
target: c.getEl(),
text: 'Enter your phone number with respect to your Contact Type'
});
}
}

}
]
},{
columnWidth:.5,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: 'Area / Colony <span class="mandatoryField">*</span>',
name: 'area_connectionAddress',
allowBlank:false,
vtype:'hyphen',
maxLength:50,
anchor:'90%',
listeners: {
render: function(c) {
Ext.QuickTips.register({
target: c.getEl(),
text: 'Enter Area / Colony for your connection'
});
}
}
},{
xtype: 'combo',
fieldLabel: 'City <span class="mandatoryField">*</span>',
hiddenName: 'city_connectionAddress',
displayField:'name',
valueField:'dcId',
id:'combo-city',
name: 'combo-city',
//forceSelection: true,
editable:false,
store: city,
typeAhead: true,
mode: 'local',
triggerAction: 'all',
lastQuery : '',
emptyText:'- Select City -',
selectOnFocus:true,
allowBlank:false,
anchor:'90%',
listeners: {
select:{fn:function(combo, value) {
var comboDCZone = Ext.getCmp('combo-dcZone');
comboDCZone.clearValue();
comboDCZone.store.filter('dcId', combo.getValue());
}},
render: function(c) {
Ext.QuickTips.register({
target: c.getEl(),
text: 'Enter City with respect to your District'
});
}
}
},{
xtype:'numberfield',
fieldLabel: 'Pincode <span class="mandatoryField">*</span>',
name: 'pincode_connectionAddress',
blankText:'This should be numeric',
allowNegative:false,
allowDecimals : false,
minLength : 6,
maxLength : 6,
anchor:'90%',
allowBlank:false,
listeners: {
render: function(c) {
Ext.QuickTips.register({
target: c.getEl(),
text: 'Enter valid pincode for your connection address'
});
}
}

},{
xtype:'combo',
fieldLabel: 'Phone Type <span class="mandatoryField">**</span>',
displayField:'phoneTypeLabel',
valueField:'phoneTypeValue',
submitValue: true,
id: 'phoneType_ConnAddress',
hiddenName: 'phoneType_connectionAddress',
emptyText: '- Select Contact Type -',
forceSelection: true,
//editable:false,
//valuefield:'contactid',
store : phoneTypeStore,
/* store:new Ext.data.JsonStore({
fields : ['contact', 'contactid'],
data : [
{contact : 'Factory/Premises phone',contactid: 'id1'},
{contact : 'Registered office phone', contactid: 'id2'},
{contact : 'Residence phone',contactid: 'id3'},
{contact : 'Mobile No. Customer/Manager Incharge', contactid: 'id4'}
]
}),*/
triggerAction:'all',
mode:'local',
anchor:'90%',
listeners: {
render: function(c) {
Ext.QuickTips.register({
target: c.getEl(),
text: 'select valid Contact type for your connection'
});
}
}
},{
xtype:'textfield',
fieldLabel: 'E-Mail Address <span class="mandatoryField">**</span>',
name: 'email_connectionAddress',
id:'email',
vtype:'email',
anchor:'90%',
listeners: {
render: function(c) {
Ext.QuickTips.register({
target: c.getEl(),
text: 'Enter your contact E-Mail Address'
});
}
}
}]
}]
}]
},
{
xtype:'fieldset',
listeners:{
expand:function(){
checkBoxValue=1;
mandateField(false);
},
collapse:function(){
checkBoxValue=0;
mandateField(true);
}
},
labelAlign: 'top',
checkboxToggle:true,
id: 'toggleCheck_FirstPage',
labelWidth: 125,
title: 'Check if Communication Address is different from Connection Address',
autoHeight:true,
collapsed: true,
items: [{
layout:'column',
items:[{
columnWidth:.5,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: 'House No./Plot No.,Street <span class="mandatoryField">*</span>',
name: 'houseNumber_communicationAddress',
id:'houseNumber1',
allowBlank:false,
maskRe:/^[a-zA-Z0-9-.,()&/\s]+$/,
maxLength:50,
anchor:'90%',
listeners: {
render: function(c) {
Ext.QuickTips.register({
target: c.getEl(),
text: 'Enter valid House No./ Plot No.,Street for your communication address'
});
}
}
},
/*{
xtype:'textfield',
fieldLabel: 'Landmark',
name: 'landmark_communicationAddress',
id:'landmark1',
vtype:'hyphen',
maxLength:50,
anchor:'90%',
listeners: {
render: function(c) {
Ext.QuickTips.register({
target: c.getEl(),
text: 'Enter Landmark near to your communication address'
});
}
}
},*/
{
xtype: 'combo',
fieldLabel: 'District <span class="mandatoryField">*</span>',
hiddenName: 'district_communicationAddress',
id: 'district1',
displayField:'name' ,
valueField:'cid',
store: districts,
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'- Select District -',
selectOnFocus:true,
forceSelection: true,
//editable:false,
anchor:'90%',
listeners:{select:{fn:function(combo, value) {
var comboCity = Ext.getCmp('combo-city1');
comboCity.clearValue();
comboCity.store.filter('cid', combo.getValue());
}},
render: function(c) {
Ext.QuickTips.register({
target: c.getEl(),
text: 'Select District for your communication address'
});
}
}
},
{
xtype:'numberfield',
fieldLabel: 'Pincode <span class="mandatoryField">*</span>',
name: 'pincode_communicationAddress',
minLength : 6,
maxLength : 6,
allowNegative:false,
allowDecimals : false,
id:'pincode1',
anchor:'90%',
listeners: {
render: function(c) {
Ext.QuickTips.register({
target: c.getEl(),
text: 'Enter valid pincode for your communication address'
});
}
}
},{
xtype:'combo',
fieldLabel: 'Phone Type',
displayField:'phoneTypeLabel',
hiddenName: 'phonetype_communicationAddress',
emptyText: '-Select Contact Type-',
forceSelection: true,
//editable:false,
valueField:'phoneTypeValue',
submitValue: true,
store : phoneTypeStore,
/*store:new Ext.data.JsonStore({
fields : ['contact', 'contactid'],
data : [
{contact : 'Factory/Premises phone',contactid: 'id1'},
{contact : 'Registered office phone', contactid: 'id2'},
{contact : 'Residence phone',contactid: 'id3'},
{contact : 'Mobile No. Customer/Manager Incharge', contactid: 'id4'}
]
}),*/
triggerAction:'all',
mode:'local',
anchor:'90%',
listeners: {
render: function(c) {
Ext.QuickTips.register({
target: c.getEl(),
text: 'select valid Contact type for the communication'
});
}
}
}
]
},{
columnWidth:.5,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: 'Area/Colony',
name: 'colony_communicationAddress',
id:'colony1',
vtype:'hyphen',
maxLength:50,
anchor:'90%',
listeners: {
render: function(c) {
Ext.QuickTips.register({
target: c.getEl(),
text: 'Enter Area / Colony for your communication address'
});
}
}
},{

xtype: 'combo',
fieldLabel: 'City <span class="mandatoryField">*</span>',
hiddenName: 'city_communicationAddress',
displayField:'name',
valueField:'dcId',
id:'combo-city1',
name: 'combo-city1',
store: city,
//forceSelection: true,
editable:false,
typeAhead: true,
mode: 'local',
triggerAction: 'all',
lastQuery : '',
emptyText:'- Select City -',
selectOnFocus:true,
anchor:'90%',
listeners: {
render: function(c) {
Ext.QuickTips.register({
target: c.getEl(),
text: 'Enter City with respect to your District'
});
}
}
},{
xtype:'textfield',
fieldLabel: 'State',
name: 'state',
value:'Madhya Pradesh',
readOnly:'true',
fieldClass: "x-item-disabled",
editable:false,
anchor:'90%'
},{
xtype:'numberfield',
fieldLabel: 'Phone Number',
name: 'phoneNo_communicationAddress',
id:'phoneno1',
allowNegative:false,
allowDecimals : false,
minLength : 10,
maxLength : 10,
anchor:'90%',
listeners: {
render: function(c) {
Ext.QuickTips.register({
target: c.getEl(),
text: 'Enter your phone number with respect to your Contact Type'
});
}
}
}]
}]
}]
}, {
xtype:'fieldset',
id: 'connectionInfo',
labelWidth: 125, //TODO Label size
title: 'Connection Information',
autoHeight:true,
labelAlign: 'top',
items: [{
layout:'column',
items:[{
columnWidth:.5,
layout: 'form',
items: [{
xtype: 'combo',
fieldLabel: 'Building Type <span class="mandatoryField">*</span>',
hiddenName: 'buildingType',
displayField:'buildingTypeLabel',
valueField: 'buildingTypeValue',
submitValue:true,
emptyText:'- Select Building Type -',
store: buildingType,
forceSelection: true,
//editable:false,
mode: 'local',
allowBlank:false,
triggerAction: 'all',
selectOnFocus:true,
anchor:'90%',
listeners: {
render: function(c) {
Ext.QuickTips.register({
target: c.getEl(),
text: 'select valid Building Type for your connection'
});
}
}
},{
columnWidth:.5,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: 'Nearest Pole No. <span class="mandatoryField">*</span>',
//vtype:'alphanum',
maskRe:/^[a-zA-Z0-9\s-]+$/,
name: 'nearestpole',
allowBlank:false,
allowNegative:false,
maxLength:20,
allowDecimals : false,
maxLength:20,
anchor:'90%',
listeners: {
render: function(c) {
Ext.QuickTips.register({
target: c.getEl(),
text: 'Enter valid nearest Pole Number'
});
}
}
}]
}]
},{
columnWidth:.5,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: 'Premise Description',
name: 'premisedescription',
id:'premisedescription',
//allowBlank:false,
maskRe:/^[a-zA-Z\s]+$/,
anchor:'90%',
listeners: {
render: function(c) {
Ext.QuickTips.register({
target: c.getEl(),
text: 'Describe something regarding your premises '
});
}
}
},{
columnWidth:.5,
layout: 'form',
items: [{
xtype:'numberfield',
fieldLabel: 'Nearest Customer No.',
name: 'nearestcustomer',
minLength:10,
maxLength:10,
allowNegative:false,
allowDecimals : false,
anchor:'90%',
listeners: {
render: function(c) {
Ext.QuickTips.register({
target: c.getEl(),
text: 'Enter valid customer number near to your connection'
});
}
}
}]
}]
}]
}]
},{
xtype:'fieldset',
id: 'tempConnectionInfoFirstPage',
labelWidth: 125,
title: 'Temporary Connection Information',
labelAlign: 'top',
autoHeight:true,
items :[{
layout:'column',
items:[{
columnWidth:.5,
layout: 'form',
items: [startDate]
},{
columnWidth:.5,
layout: 'form',
items: [{
xtype:'datefield',
fieldLabel: 'End Date <span class="mandatoryField">*</span>',
name: 'enddt',
id: 'enddt',
anchor:'90%',
format: 'd/m/Y',
editable:false,
vtype: 'daterange',
startDateField: 'startdt',
listeners:{
render: function(c) {
Ext.QuickTips.register({
target: c.getEl(),
text: 'Select End date for temporary connection'
});
if(pageName=="temporaryConnectionForLT" || pageName=="temporaryConnectionForHT")
{
Ext.getCmp('enddt').allowBlank=false;
}
}
}
}]
}]
}]
/*items :[{
layout:'column',
items:[{
columnWidth:.5,
layout: 'form',
items: [{
xtype: 'numberfield',
fieldLabel: 'No. of days for which Temporary Connection is required <span class="mandatoryField">*</span>',
hiddenName: 'tempConnectionDate',
id:'connectionDate_CommonTemp',
editable:false,
minLength:1,
maxLength:3,
allowNegative:false,
allowDecimals : false,
anchor:'90%',
listeners:{
render: function(c) {
Ext.QuickTips.register({
target: c.getEl(),
text: 'Enter number of days required for your temporary connection'
});
if(pageName=="temporaryConnectionForLT" || pageName=="temporaryConnectionForHT")
{
Ext.getCmp('connectionDate_CommonTemp').allowBlank=false;
}
}
}
}]
}]
}]*/

},{
xtype:'fieldset',
id: 'gettingPageName',
labelWidth: 125,
title: 'Page Name',
labelAlign: 'top',
autoHeight:true,
items :[{
layout:'column',
items:[{
columnWidth:.5,
layout: 'form',
items: [{
xtype: 'textfield',
fieldLabel: 'pagename',
id:'pageNameId',
value:'',
anchor:'90%'

},{
xtype: 'textfield',
fieldLabel: 'CommAddrCheckBox',
name: 'commAddrCheckBox',
id:'CommAddrCheckBoxId',
value:'',
anchor:'90%'

}]
}]
}]
}],listeners : {
render : function() {
Ext.getCmp('gettingPageName').hide();
if(pageName == "temporaryConnectionForLT" || pageName == "temporaryConnectionForHT")
{
Ext.getCmp('tempConnectionInfoFirstPage').show();
}else{
Ext.getCmp('tempConnectionInfoFirstPage').hide();
}
}
},
buttonAlign: 'center',
buttons: [{
text: 'Proceed',
id: 'submit'
},{
text: 'Reset',
id: 'Reset',
handler: function() {
Ext.MessageBox.confirm('Confirm', 'Are you sure you want to Reset all the Fields?', function(btn, text){
if(btn=='yes'){
newConnectionFirst.getForm().reset();
}
});

}
}]

});

[siriteja9]

:((please help me ASAP...its urgent....:((

Thanks in advance..

[streha]

So I have changed the following things
- comment out all combostores
- delete all listeners
- 1. put your form in an panel and render it to the viewport (I don`t know how you do this couse U told nothing about)
- 2. render your form to document.body
and everything works fine

27984

I am running Win7 64 and firefox 3.6.3. I have tried it @IE also and the result was the same.

I am afraid that this will be all possible help without taking the look at your css

greets

[siriteja9]

hi streha...
i am not using viewport at all and i need to populate some data in the combos.so i have to use the store.

regarding the css.. i am using the default ext-all css.

i have to just hide and show 2 forms.. for that i am using the display:none and block property of css..

Please help me ASAP its Urgent...:((
reply soon...

thanks and regards in advance..

[streha]

hi siriteja9
have U solved your problem?

[siriteja9]

Hi Streha,
I have tried all possibilities that i know..but couldn't get the proper solution for that...:((

If u have any solution, please help me...

Thank u.