PDA

View Full Version : Border layout problem



rebeccapeltz
19 Nov 2010, 3:38 PM
I've got a factory that should produce a layout with a title and a search box. It seems to work in Chrome, but it doesn't work in IE7. Can anyone give me a clue as to what could be wrong? I'll try to attach pictures. Also, is there a better way to achieve this effect - a banner with a left justified search?

Factory Code



Ext.ns('Child');
Child.version = '1.0';
Child.TitleAndSearchFactory = function(resourceList){
//pass in resourceList as if acting like callback

var emptyPanel = new Ext.Panel({
border:false,
html: ' '
});
var mainTitlePanel = new Ext.Panel({
border:false,
html: 'Ambulatory A.I.D',
style: 'font-weight:bold;font-size:18px;text-align:center;'
});

var cbResource = new Ext.form.ComboBox({
//height: 80,
store: new Ext.data.ArrayStore({
fields: ['resourceCode', 'resourceName'],
data: resourceList
}),
displayField: 'resourceName',
valueField: 'resourceCode',
typeAhead: true,
mode: 'local',
hideTrigger: true,
triggerAction: 'all',
emptyText: 'Select a resource...',
selectOnFocus: true,
listeners: {
'select': function(cb, event){
alert(cb.value);
//alert(event);
}
}

});
var cbPanel = new Ext.Panel({
layout:'fit',
border:true,
//width:'80%',
frame:false,
items:[cbResource]
});
var searchPanel = new Ext.Panel({
id: 'searchPanel',
layout:'fit',
border: false,
frame: false,
items: [{
border: true,
id: 'searchTitle',
layout: 'fit',
width:'80%',
html: 'Resource',
style: 'font-weight:bold;font-size:14px;'
},
cbPanel]
});

var aidTitlePanel = new Ext.Panel({

layout: 'border',
height:100,
border:false,
items: [{
region: 'west',
border:false,
xtype: 'panel',
split: false,
width: '20%',
html:''
},{
region: 'center',
border:true,
width: '60%',
//height: 100,
xtype: 'panel',
items:[emptyPanel,
mainTitlePanel]
},{
region: 'east',
border: false,
xtype: 'panel',
split: false,
width: '20%',
items: [searchPanel]
}]
});

return aidTitlePanel
}


It get loaded in a viewport with some other panels:



var titlePanel = new Child.TitleAndSearchFactory(resourceArray);

var combinedTestPanel = new Ext.Panel({
id: 'combinedpanel',
//padding: '5',
//items: [titleAndSearchCmp, summaryPanelLO, actionPanelLO, scheduleGridPanel]
items: [titlePanel, testPanel, actionPanelLO, scheduleGridPanel]
})



var port = new Ext.Viewport({
id: 'port',
layout: 'fit',
items: [combinedTestPanel]

});

rebeccapeltz
22 Nov 2010, 10:21 AM
I resolved it using templates



Ext.ns('Child');
Child.version = '1.0';
Child.TitleAndSearchFactory = function(resourceList){
//pass in resourceList as if acting like callback

var cbResource = new Ext.form.ComboBox({
//height: 80,
store: new Ext.data.ArrayStore({
fields: ['resourceCode', 'resourceName'],
data: resourceList
}),
displayField: 'resourceName',
valueField: 'resourceCode',
typeAhead: true,
mode: 'local',
hideTrigger: true,
triggerAction: 'all',
emptyText: 'Select a resource...',
selectOnFocus: true,
listeners: {
'select': function(cb, event){
alert(cb.value);
//alert(event);
}
}
});

var titleTemplate = new Ext.Template('<br /><div style="font-weight:bold;font-size:18px;text-align:center;">Ambulatory A.I.D</div>');
var cbLabelTemplate = new Ext.Template('<div style="font-weight:bold;font-size:14px;">Resource</div>');

var aidTitlePanel = new Ext.Panel({

layout: 'border',
height: 100,
border: false,
items: [{
region: 'west',
border: false,
xtype: 'panel',
split: false,
width: '20%',
html: ''
}, {
region: 'center',
border: false,
width: '60%',
xtype: 'panel',
html: titleTemplate.apply()
}, {
region: 'east',
border: false,
xtype: 'panel',
split: false,
width: '20%',
items: [{
html: cbLabelTemplate.apply(),
border: false
}, {
items: cbResource,
border: false,
padding: 5
}]
// items:[p]
}]
});

return aidTitlePanel
}