PDA

View Full Version : <strong> tag in template on Panel not working



shellgrit
19 Jul 2010, 1:54 AM
I have a <strong> tag in two templates:


The first in a list that works,
The second on a panel that doesn't work!


Ext.regModel('Species', {
fields: [
'speciesCommon',
'speciesScientific',
'speciesImage',
'speciesDescription',
'speciesStatus',
'speciesSize'
]
});

var speciesList = new Ext.data.Store({
model: 'Species',

getGroupString : function(record) {
return record.get('speciesCommon')[0];
},

data: [
{speciesCommon: 'Greater Sand Plover',
speciesScientific: 'Charadrius leschenaultii',
speciesImage: 'greatersandplover',
speciesDescription: 'Coastal mudflats and sandy intertidal zones',
speciesStatus: 'Summer Migrant',
speciesSize: '21'},
{speciesCommon: 'Lesser Sand Plover',
speciesScientific: 'Charadrius mongolus',
speciesImage: 'lessersandplover',
speciesDescription: 'Coastal mudflats and sandy intertidal zones',
speciesStatus: 'Summer Migrant',
speciesSize: '19'},
{speciesCommon: 'Oriental Plover',
speciesScientific: 'Charadrius veredus',
speciesImage: 'orientalplover',
speciesDescription: 'Sparsely vegetated plains of arid inland and coastal mudflats and beaches of northern Australia',
speciesStatus: 'Summer Migrant',
speciesSize: '25'},
{speciesCommon: 'Double-banded Plover',
speciesScientific: 'Charadrius bicinctus',
speciesImage: 'doublebandedplover',
speciesDescription: 'Coastal mudflats and sandy intertidal zones, also open bare margins of inland freshwater and saline marshes - winter visitor to south-east Australia returning to New Zealand for summer to breed',
speciesStatus: 'Winter Migrant',
speciesSize:'19'},
{speciesCommon: 'Red-capped Plover',
speciesScientific: 'Charadrius ruficapillus',
speciesImage: 'redcappedplover',
speciesDescription: 'Bare mudflats and margins of inland and coastal saline wetlands',
speciesStatus: 'Resident Species',
speciesSize: '15'},
{speciesCommon: 'Hooded Plover',
speciesScientific: 'Thinornis rubricollis',
speciesImage: 'hoodedplover',
speciesDescription: 'Sandy ocean beaches of southern Australia and open edges of salt lakes in south-west Australia',
speciesStatus: 'Resident Species',
speciesSize: '21'},
{speciesCommon: 'Black-fronted Dotterel',
speciesScientific: 'Elseyornis melanops',
speciesImage: 'blackfronteddotterel',
speciesDescription: 'Pairs or small family groups on dry margins of freshwater wetlands, large or small',
speciesStatus: 'Resident Species',
speciesSize: '17'},
{speciesCommon: 'Red-kneed Dotterel',
speciesScientific: 'Erythrogonys cinctus',
speciesImage: 'redkneeddotterel',
speciesDescription: 'Feeds in shallow margins of inland freshwater wetlands, including temporary shallows after rain',
speciesStatus: 'Resident Species',
speciesSize: '18'},
{speciesCommon: 'Whimbrel',
speciesScientific: 'Numenius phaeopus',
speciesImage: 'whimbrel',
speciesDescription: 'Coastal mudflats and sandy intertidal zones',
speciesStatus: 'Summer Migrant',
speciesSize: '42'},
{speciesCommon: 'Eastern Curlew',
speciesScientific: 'Numenius madagascariensis',
speciesImage: 'easterncurlew',
speciesDescription: 'Coastal mudflats and sandy intertidal zones',
speciesStatus: 'Summer Migrant',
speciesSize: '63'}
]
});

Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){

var list = new Ext.List({
tpl: [
'<tpl for=".">',
'<div class="browseList">',
'<img src="thumbnails/{speciesImage}.png" align="left" />',
'<p><strong>{speciesCommon}</strong></p>',
'<p>{speciesSize}cm - {speciesStatus}</p>',
'</div>',
'</tpl>'
],
itemSelector: 'div.browseList',
singleSelect: true,
store: speciesList,
listeners: {
itemtap: function(view, index, item, e){
var rec = view.store.getAt(index);
main.setCard(1);
detail.update({
speciesCommon: rec.get('speciesCommon'),
speciesImage: rec.get('speciesImage'),
speciesDescription: rec.get('speciesDescription'),
speciesStatus: rec.get('speciesStatus'),
speciesSize: rec.get('speciesSize')
});
}
}
});

var detail = new Ext.Panel({
tpl: [
'<tpl for=".">',
'<div class="browseDetail">',
'<p><strong>{speciesCommon}</strong></p>',
'<p>{speciesSize}cm - {speciesStatus}</p>',
// '<img src="illustrations/{speciesImage}.jpg" /><br />',
'<p>{speciesDescription}</p>',
'</div>',
'</tpl>'
],
itemSelector: 'div.browseDetail',
scroll: 'vertical',
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
ui: 'light',
items: [{
text: 'Back',
ui: 'back',
handler: function(){
main.setCard(0);
}
}]
}]
});

var main = new Ext.Container({
fullscreen: true,
layout: 'card',
items:
[list, detail]
}).show();

}

});
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Australian Shorebirds</title>
<link rel="stylesheet" href="sencha-touch-beta-0.91/resources/css/ext-touch.css" type="text/css">
<script type="text/javascript" src="sencha-touch-beta-0.91/ext-touch-debug.js"></script>
<script type="text/javascript" src="src/index.js"></script>
<style type="text/css">
.browseList {font-size: 80%;}
.browseDetail {font-size: 80%; text-align: center;}
</style>
</head>
<body></body>
</html>Any suggestions would be appreciated.

Neil

evant
19 Jul 2010, 2:04 AM
What do you mean by "doesn't work"? Have a look with the DOM inspector and see what styles are applied.

shellgrit
19 Jul 2010, 2:15 AM
What I mean is that in the list speciesCommon shows in bold type, but on the panel it does not.

I'll have a look at the DOM inspector and see what I can find out.

Neil

shellgrit
19 Jul 2010, 3:22 AM
Hi Evan,

I've had a look with the DOM Inspector and 'font-weight: bolder;' is struck out for this element.

Even if I add 'font-weight: bold' to the class (browseDetail) this also gets struck out, yet the 'font-size: 80%' and 'text-align: center' both work fine.

Neil

evant
19 Jul 2010, 3:24 AM
The item that isn't struck out is the one that's overriding it, should show up somewhere in the style area.

shellgrit
19 Jul 2010, 3:37 AM
Thanks Evan,

It seems that the <strong> tag is being set to 'font-weight: normal' somewhere in the Sencha styles. I have fixed it by setting it to bold in my style sheet.

Neil