Checkboxgroup and Fieldcontainer not getting rendered in Ext-js 4 with Window Popup.

[NKrishnawat]

I am running into a strange problem when I use checkboxgroup and fieldContainer in IE6. IE6 does not render checkbox group (id: transitionTypeId) and Filed containers (Refer "Effective Date" and "Request Date" in Viewport.js),

Plz see the attached screenshot.

Code just works fine on Chrome and IE8 (Without javascript issues) which makes me wonder if its ExtJs issue or I have done something stupid !




/* * File: app/view/ui/portal.js


* Date: Mon Dec 05 2011 10:49:19 GMT-0800 (Pacific Standard Time)
*
* This file was generated by Ext Designer version 1.2.2.
* http://www.sencha.com/products/designer/
*
* This file will be auto-generated each and every time you export.
*
* Do NOT hand edit this file.
*/
Ext.require([
'Ext.ux.form.field.BoxSelect'
]);


var advanceSearchPanel = function() {

/***********************************************************************
* if (location.search.substring(1) == "") { window.location.href =
* "/portal/index.html?a=1"; } else { window.location.href =
* "/portal/index.html"; }
**********************************************************************/

Ext.create('Ext.Window',{
title: 'Advanced Search Options',
width : 550,
resizable: true,
items: Ext.create('Ext.form.Panel', {
id : 'advanceSearchForm',
layout: 'anchor',
autoShow : true,
bodyPadding : 5,
bodyStyle : 'background-color:#DFE9F6',
width : 540,

// The form will submit an AJAX request to this URL when submitted
url: 'save-form.php',

// Fields will be arranged vertically, stretched to full width
layout: 'anchor',
defaults: {
anchor: '100%'
},
items: [
{
xtype: 'fieldset',
padding: 10,
title: 'General',
renderTo: Ext.getBody(),
anchor: '100%',
items: [
{
xtype: 'boxselect',
fieldLabel: 'Client(s)',
displayField : 'clientName',
queryMode: 'remote',
minChars: 2,
size: 10,
//store: 'clientLookupStore',
typeAhead: true,
multiSelect: true,
anchor : '100%',
emptyText: 'Select multiple clients'
},
{
xtype: 'boxselect',
id : 'accountSearchId',
fieldLabel : 'Account(s)',
displayField : 'portfolioNumber',
queryMode: 'remote',
minChars: 2,
size: 10,
//store: 'accountLookupStore',
typeAhead: true,
multiSelect: true,
anchor : '100%',
emptyText: 'Select multiple accounts'
},
{
xtype: 'checkboxgroup',
id : 'transitionTypeId',
fieldLabel: 'Transition Type',
height: 30,
layout: {
type: 'hbox'
},

items: [
{
xtype: 'checkboxfield',
labelWidth: 160,
boxLabel: 'New Acct.',
checked: true,
flex: 1
},
{
xtype: 'checkboxfield',
boxLabel: 'Changes',
checked: true,
flex: 1
},
{
xtype: 'checkboxfield',
boxLabel: 'Closing',
checked: true,
flex: 1
}
]
},
{
xtype: 'boxselect',
id : 'managingOfficeId',
fieldLabel: 'Managing Office',
displayField : 'officeName',
queryMode: 'remote',
minChars: 2,
size: 10,
//store: 'officeStore',
typeAhead: true,
multiSelect: true,
anchor : '100%'
}
]
},{
xtype: 'fieldset',
height: 107,
padding: 10,
title: 'Date Filter',
anchor: '100%',
items: [
{
xtype: 'fieldcontainer',
height: 30,
activeItem: 0,
layout: {
align: 'stretch',
type: 'hbox'
},
fieldLabel: 'Effective Date',
items: [
{
xtype: 'datefield',
id: 'fromEffDateSearchId',
fieldLabel: 'between',
labelAlign: 'right',
labelSeparator: ' ',
labelWidth: 50
},
{
xtype: 'datefield',
id: 'toEffDateSearchId',
fieldLabel: 'and',
labelAlign: 'right',
labelSeparator: ' ',
labelWidth: 30
}
]
},
{
xtype: 'fieldcontainer',
height: 30,
activeItem: 0,
layout: {
align: 'stretch',
type: 'hbox'
},
fieldLabel: 'Request Date',
items: [
{
xtype: 'datefield',
id: 'fromReqDateSearchId',
fieldLabel: 'between',
labelAlign: 'right',
labelSeparator: ' ',
labelWidth: 50
},
{
xtype: 'datefield',
id: 'toReqDateSearchId',
fieldLabel: 'and',
labelAlign: 'right',
labelSeparator: ' ',
labelWidth: 30
}
]
}
]
},
{
xtype: 'fieldset',
padding: 10,
title: 'Portfolio Contacts',
anchor: '100%',
items: [
{
xtype: 'boxselect',
fieldLabel: 'CATT Person',
displayField : 'employeeName',
queryMode: 'remote',
minChars: 2,
size: 10,
//store: 'employeeLookupStore',
typeAhead: true,
multiSelect: true,
anchor : '100%',
emptyText: 'Select multiple CATT Persons'

},
{
xtype: 'boxselect',
fieldLabel: 'CSE',
displayField : 'employeeName',
queryMode: 'remote',
minChars: 2,
size: 10,
//store: 'employeeLookupStore',
typeAhead: true,
multiSelect: true,
anchor : '100%',
emptyText: 'Select multiple Client Service Executives'
},
{
xtype: 'boxselect',
fieldLabel: 'CSA',
displayField : 'employeeName',
queryMode: 'remote',
minChars: 2,
size: 10,
//store: 'employeeLookupStore',
typeAhead: true,
multiSelect: true,
anchor : '100%',
emptyText: 'Select multiple Client Service Associate'
},
{
xtype: 'boxselect',
fieldLabel: 'CO',
displayField : 'employeeName',
queryMode: 'remote',
minChars: 2,
size: 10,
//store: 'employeeLookupStore',
typeAhead: true,
multiSelect: true,
anchor : '100%',
emptyText: 'Select multiple CO'
},
{
xtype: 'boxselect',
fieldLabel: 'PM',
displayField : 'employeeName',
queryMode: 'remote',
minChars: 2,
size: 10,
//store: 'employeeLookupStore',
typeAhead: true,
multiSelect: true,
anchor : '100%',
emptyText: 'Select multiple Portfolio Managers'
},
{
xtype: 'boxselect',
fieldLabel: 'PA',
displayField : 'employeeName',
queryMode: 'remote',
minChars: 2,
size: 10,
//store: 'employeeLookupStore',
typeAhead: true,
multiSelect: true,
anchor : '100%',
emptyText: 'Select multiple Portfolio Analysts'
}
]
}
],
dockedItems : [
{
xtype : 'toolbar',
height : 39,
dock : 'bottom',
layout :
{
pack : 'center',
type : 'hbox'
},
items : [
{
xtype : 'button',
style : 'background-color: #BCCFE5;',
text : 'Search'
},
{
xtype : 'button',
style : 'background-color: #BCCFE5;',
text : 'Reset'
} ]
} ],
renderTo: Ext.getBody()
})}).show();
};

Ext.define('portal.view.Viewport', {
extend: 'Ext.container.Viewport',


layout: {
type: 'border'
},


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'toolbar',
border: 0,
itemId: 'headerToolbar',
margins: '0 0 3 0',
region: 'north',
items: [
{
xtype: 'tbtext',
style: '{font-weight: bold;}',
text: 'Account Transitions'
},
{
xtype: 'tbseparator'
},
{
xtype: 'tbspacer',
width: 20
},
{
xtype: 'textfield',
itemId: 'searchOne',
width: 241,
fieldLabel: 'Search',
labelWidth: 45
},
{
xtype: 'button',
itemId: 'advanceSearch',
enableToggle: true,
pressed: (location.search.substring(1) == ""),
text: 'Search'
},
{
xtype: 'tbseparator'
},
{
xtype: 'component',
iconCls: 'icon-find',
autoEl: {
html: '<a href=# onclick="advanceSearchPanel();" style="text-decoration:underline">Advanced Search</a>'
}
},
{
xtype: 'tbfill',
id: '_hfill'
},
{
xtype: 'tbseparator',
itemId: '_hsep'
},
{
xtype: 'button',
itemId: 'headerUser',
text: 'User: nkrishnawat',
menu: {
xtype: 'menu',
itemId: 'headerUserMenu',
items: [
{
xtype: 'menuitem',
itemId: 'headerUserPreference',
text: 'Preferences'
}
]
}
}
]
},
{
xtype: 'container',
layout: {
type: 'border'
},
region: 'center',
items: [
{
xtype: 'tabpanel',
border: 0,
activeTab: 3,
flex: 1,
margins: '2 2 2 2',
region: 'center',
items: [
{
xtype: 'panel',
border: 0,
title: 'Transition Calendar'
},
{},
{},
{}
]
}
]
},
{
xtype: 'toolbar',
itemId: 'footerToolbar',
region: 'south',
items: [
{
xtype: 'button',
text: 'Help',
menu: {
xtype: 'menu',
items: [
{
xtype: 'menuitem',
text: 'Contact BPM Support'
},
{
xtype: 'menuitem',
text: 'Request a feature'
}
]
}
},
{
xtype: 'tbseparator'
}
]
}
]
});


me.callParent(arguments);
}
});

Suggestions ??

[skirtle]

I suspect it's your layouts. Make sure you have suitable widths, heights, anchors or layouts (as applicable) on all those components and containers. In the absence of suitable layouts some browsers will auto-size components and while it might appear to work in those browsers it isn't technically supported by the framework.

For example, I don't see a width (or anchor) on your checkboxgroup. Looks like the later components have similar issues.