PDA

View Full Version : Border Layout not working in ie



santosh_bdp
24 Mar 2010, 3:03 PM
Hi,

i am working on border layout of ext and customized it a little bit according to my requirement, the problem is that the border layout is not working in ie(internet explorer), i have no clue whats wrong....i dunno if there is something i need to include in my code for it work in ie , all other browsers seems to be working perfectly fine, ....plz help..

Thanks in advance

conorarmstrong
24 Mar 2010, 3:32 PM
can we see the code?

also check you don't have any trailing commas. this is one of the main reasons from an app working in firefox but not in ie. without seeing code a precise answer is impossible

santosh_bdp
25 Mar 2010, 7:41 AM
Here is the code



Ext.onReady(function(){

// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var viewport = new Ext.Viewport({
layout: 'border',
items: [
// create instance immediately
new Ext.BoxComponent({
region: 'north',
margins:'115 0 0 0',
//height: 32, // give north and south regions a height
// autoEl: {
//tag: 'div',
// html:'<p>north - generally for menus, toolbars and/or advertisements</p>'
//}
}),
// lazily created panel (xtype:'panel' is default)

{
region: 'south',
split: true,
height: 200,
minSize: 100,
maxSize: 200,
collapsible: true,
deferredRender: false,
margins:'0 5 50 5',
cmargins:'0 5 50 5',
layout: 'fit', // specify layout manager for items
items: // this TabPanel is wrapped by another Panel
new Ext.TabPanel({
border: false, // already wrapped so don't add another border
activeTab: 0, // second tab initially active
tabPosition: 'top',
items: [

{
//contentEl: 'center1',
title: 'tab1',
autoScroll: true
},

{
//contentEl: 'center1',
title: 'tab2',
autoScroll: true
},

{
//contentEl: 'center1',
title: 'Arterial Traffic',
autoScroll: true
},

{
//contentEl: 'center1',
title: 'tab3',
autoScroll: true
},

{
// contentEl: 'center1',
title: 'tab4',
autoScroll: true
},

{
// contentEl: 'center1',
title: 'tab5',
autoScroll: true
},

{
//contentEl: 'center1',
title: 'tab6',
autoScroll: true
},

{
contentEl: 'center2',
title: 'Weather Station',
autoScroll: true
},

{
contentEl: 'center3',
title: 'tab7',
autoScroll: true
},

{
html: '<p>A TabPanel component can be a region.</p>',
title: 'tab8',
autoScroll: true
},

{
contentEl: 'center1',
title: 'tab9',
autoScroll: true
}

]
})
},
{
region: 'east',
title: 'east panel',
collapsible: true,
split: true,
width: 225, // give east and west regions a width
minSize: 175,
maxSize: 400,
margins: '0 5 0 0',
layout: 'fit', // specify layout manager for items
items: // this TabPanel is wrapped by another Panel
new Ext.TabPanel({
border: false, // already wrapped so don't add another border
activeTab: 0, // second tab initially active
tabPosition: 'bottom',
items: [{
html: '<p>A TabPanel component can be a region.</p>',
title: 'tab23',
autoScroll: true
},
{
html: '<p>A TabPanel component can be a region.</p>',
title: 'tab22',
autoScroll: true
},
new Ext.grid.PropertyGrid({
title: 'tab21',
closable: true,
source: {
"(name)": "Properties Grid",
"grouping": false,
"autoFitColumns": true,
"productionQuality": false,
"created": new Date(Date.parse('10/15/2006')),
"tested": false,
"version": 0.01,
"borderWidth": 1
}
})]
})
}, {
region: 'west',
id: 'west-panel', // see Ext.getCmp() below
title: 'settings',
split: true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins: '0 0 0 5',
autoScroll: true,
contentEl: 'MapLayers',

},
// in this instance the TabPanel is not wrapped by another panel
// since no title is needed, this Panel is added directly
// as a Container
({
region: 'center',
title:'center',// a center region is ALWAYS required for border layout
deferredRender: false,
contentEl: 'map',
// html: '<p>Some settings in here.</p>', // first tab initially active

})]
});
// get a reference to the HTML element with id "hideit" and add a click listener to it
Ext.get("hideit").on('click', function(){
// get a reference to the Panel that was created with id = 'west-panel'
var w = Ext.getCmp('west-panel');
// expand or collapse that Panel based on its collapsed property state
w.collapsed ? w.expand() : w.collapse();
});

});

fay
25 Mar 2010, 7:46 AM
also check you don't have any trailing commas.

That's exactly what it is, there are several trailing commas in the code. Run it through www.jslint.com (http://www.jslint.com) and you'll spot them.

santosh_bdp
25 Mar 2010, 8:13 AM
got it, thats what it was.. tail commas....i am very new to extjs..thanks a lot