PDA

View Full Version : ComboBox visiblity issue in chrome



saranya V
19 May 2014, 2:06 AM
Hi i am using a combobox where initially i am hiding it. Based on other combo box selection value, i am showing the hidden combo. The problem is in chrome only fieldLabel is visible. The entire combo box is not visible. But it works fine in IE and firefox. Can anyone help me to fix this problem in Chrome?

Gary Schlosberg
23 May 2014, 6:06 PM
I couldn't find an existing bug like that. Does the issue occur if the combo is loaded initially visible (Is it related to the initial hidden state)? Can you isolate the behavior in a test case?
https://fiddle.sencha.com/#home

saranya V
25 May 2014, 9:25 PM
THis is the combo box definition. I am not using hidden property to hide the combo. In Afterrender listener i am calling disable and hide methods on this combo component. And when my Data type combo is selected with the desired type i am making this combo as visible and i am enabling the same.
{
xtype:'combo',
editable:false,
lazyRender:true,
//id: 'listParentResourceComboBox',
name: 'selParentResourceList', // combo to list parent resources
fieldLabel:'<span><b> Select Parent Resource </b></span><span style=color:red> * </span>',
mode: 'local',
store: parentResourceListStore,
displayField:'resourceType',
valueField:'id',
anchor:'96%',
allowBlank: false,
triggerAction:'all',
listeners:
{

afterrender: function (parentResCombo) {


parentResCombo.hide();
parentResCombo.disable();
parentResCombo.container.up('.x-form-item').hide();
},

valueset:function (field, value)
{
if(value!=null || value!=undefined)
{
field.enable();
field.show();
field.container.up('.x-form-item').show();
}
}
}
}

Data type combo box definition:
{
xtype:'combo',
editable:false,
lazyRender:true,
name: 'attributeType',
fieldLabel: "<b>Data Type </b></span><span style=color:red> * </span>" ,
id:'dataTypeValue',
mode: 'local',
store: dataTypesStrore,
displayField:'dataType',
anchor:'96%',
allowBlank:false,
triggerAction:'all',
listeners:
{
select: function(f,r,i)
{
var attrBasicForm=basicAttrFormObj.getForm();
toggleFieldsVisibility(this.getValue(),false);//Function to load class Type based on data type
if(r!=undefined)
{
var dataTypeValue=r.get("dataType");
if(dataTypeValue=="Master Attribute Reference")
{


attrBasicForm.findField('selParentResourceList').enable();
attrBasicForm.findField('selParentResourceList').show();
attrBasicForm.findField('selParentResourceList').container.up('.x-form-item').show();
attrBasicForm.findField('attributeList').enable();
attrBasicForm.findField('attributeList').show();
attrBasicForm.findField('attributeList').container.up('.x-form-item').show();
attrBasicForm.findField('labelNameMaster').enable();
attrBasicForm.findField('labelNameMaster').show();
attrBasicForm.findField('labelNameMaster').container.up('.x-form-item').show();
}
else
{
attrBasicForm.findField('selParentResourceList').disable();
attrBasicForm.findField('selParentResourceList').hide();
attrBasicForm.findField('selParentResourceList').container.up('.x-form-item').hide();
attrBasicForm.findField('attributeList').disable();
attrBasicForm.findField('attributeList').hide();
attrBasicForm.findField('attributeList').container.up('.x-form-item').hide();
attrBasicForm.findField('labelNameMaster').disable();
attrBasicForm.findField('labelNameMaster').hide();
attrBasicForm.findField('labelNameMaster').container.up('.x-form-item').hide();

}
}

}
}
}

saranya V
25 May 2014, 9:29 PM
The problem is in Chrome only the combo box label is visible when the select the desired data type. But in other browsers its working fine.