PDA

View Full Version : Broken toolbar styling



MattUCG
6 Sep 2011, 11:19 AM
I have a small test application that dynamically adds panels to the viewport. The application creates one main 'listing' panel, and one 'details' panel for each object in the list (similar to a NestedList). When tapping any list item, the details panel for that item is shown. Each details panel has a toolbar docked to the top which contains a 'back' link.

The problem is that the toolbar on the details panel appears to be broken for all details panels other than the last one to be added. For example, If I have three items in the list, clicking either item 1 or 2 takes me to a page with a broken toolbar. Clicking item 3 takes me to a page with a working toolbar. After viewing a details panel with a working toolbar, the broken ones begin working. Very odd...


<!DOCTYPE html><html>
<head>
<title>Hello World</title>
<script src="http://cdn.sencha.io/touch/1.1.0/sencha-touch.js" type="text/javascript"></script>
<link href="http://cdn.sencha.io/touch/1.1.0/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">


MobileDemo = new Ext.Application({
name: "MobileDemo",


launch: function () {
console.log("MobileDemo.launch");
this.viewport = new this.Viewport();
this.homecard = this.viewport.getComponent('home');
this.issuecard = this.homecard.getComponent('issue');
this.issuecard.refreshLatestIssue();
}
});


MobileDemo.ArticleCard = Ext.extend(Ext.Panel, {
styleHtmlContent: true,
scroll: 'vertical',
dockedItems: [{
xtype: 'toolbar',
title: 'details',
items: [{
text: 'back',
handler: function(){
MobileDemo.homecard.setActiveItem('issue', { type: 'slide', direction: 'left'});
}
}]
}],
});


// register xtype
Ext.reg('articlecard', MobileDemo.ArticleCard);


MobileDemo.HomeCard = Ext.extend(Ext.Panel, {
iconCls: "home",
title: 'home',
layout: 'card',
items: [
{ xtype: 'issuecard', id: 'issue' }
],
listeners: {
beforeshow: function () {
MobileDemo.homecard.setActiveItem('issue');
}
}
});


// register xtype
Ext.reg('homecard', MobileDemo.HomeCard);


var InteractivePanel = Ext.extend(Ext.Panel, {
initComponent: function(){
InteractivePanel.superclass.initComponent.call(this);
this.addEvents('interact');
this.addListener({
el: {
tap: function(e){
this.fireEvent('interact', e.type, e);
},
scope: this
}
});
}
});


MobileDemo.IssueCard = Ext.extend(Ext.Panel, {
scroll: 'vertical',
defaults: {
styleHtmlContent: true,
scroll: false,
style: 'border-bottom: 1px solid #FFF'
},
dockedItems: [{
xtype: 'toolbar',
title: 'Current Movie List',
layout: {
pack: 'right'
}
}],
refreshLatestIssue: function(){
console.log("IssueCard.refreshLatestIssue");


localStorage.LatestIssue = JSON.stringify({"id":1,"items":[{"body":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mauris mi, viverra vitae rutrum sed, porttitor nec arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus leo tellus, luctus eu vehicula sed, ornare vel augue. Nullam mollis rutrum lorem. Aenean consequat condimentum ornare. Aenean sodales risus eget tellus ornare consectetur. Aliquam nunc purus, scelerisque et sodales at, dignissim non mi. Proin tristique risus et nisl cursus luctus. Sed sit amet lectus leo. Proin ante quam, venenatis vel porttitor non, ultricies at tellus.","id":1,"imagedata":null,"summary":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mi elit, et tempor dolor. Integer ut pellentesque dui. Nam iaculis egestas turpis vitae porttitor. Quisque facilisis venenatis mi, in euismod lacus blandit ac.","title":"Lawrence of Arabia"},{"body":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mauris mi, viverra vitae rutrum sed, porttitor nec arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus leo tellus, luctus eu vehicula sed, ornare vel augue. Nullam mollis rutrum lorem. Aenean consequat condimentum ornare. Aenean sodales risus eget tellus ornare consectetur. Aliquam nunc purus, scelerisque et sodales at, dignissim non mi. Proin tristique risus et nisl cursus luctus. Sed sit amet lectus leo. Proin ante quam, venenatis vel porttitor non, ultricies at tellus.","id":2,"imagedata":null,"summary":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mi elit, et tempor dolor. Integer ut pellentesque dui. Nam iaculis egestas turpis vitae porttitor. Quisque facilisis venenatis mi, in euismod lacus blandit ac.","title":"Citizen Kane"},{"body":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mauris mi, viverra vitae rutrum sed, porttitor nec arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus leo tellus, luctus eu vehicula sed, ornare vel augue. Nullam mollis rutrum lorem. Aenean consequat condimentum ornare. Aenean sodales risus eget tellus ornare consectetur. Aliquam nunc purus, scelerisque et sodales at, dignissim non mi. Proin tristique risus et nisl cursus luctus. Sed sit amet lectus leo. Proin ante quam, venenatis vel porttitor non, ultricies at tellus.","id":3,"imagedata":null,"summary":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mi elit, et tempor dolor. Integer ut pellentesque dui. Nam iaculis egestas turpis vitae porttitor. Quisque facilisis venenatis mi, in euismod lacus blandit ac.","title":"Gone With The Wind"}],"title":"Movie List"})
MobileDemo.issuecard.loadIssueFromLocalStorage();
},
loadIssueFromLocalStorage: function(){
console.log("IssueCard.loadIssueFromLocalStorage");


issueObj = JSON.parse(localStorage.LatestIssue);


MobileDemo.issuecard.removeAll();


var lastId;


for(i = 0; i < issueObj.items.length; i++){
lastId = issueObj.items[i].id;
panelHtml = '<h4>' + issueObj.items[i].title + '</h4>';
panelHtml += '<p style="min-height: 175px;">';
panelHtml += issueObj.items[i].summary;
panelHtml += '</p>';


newPanel = new InteractivePanel({
detailPanelId: issueObj.items[i].id,
html: panelHtml,
listeners: {
interact: function() {
MobileDemo.homecard.setActiveItem('articleDetails' + this.detailPanelId, { type: 'slide', direction: 'right'});
}
}
});


articleDetails = new MobileDemo.ArticleCard({
id: 'articleDetails' + issueObj.items[i].id,
html: '<h4>' + issueObj.items[i].title + '</h4>' + issueObj.items[i].body
});


MobileDemo.homecard.add(articleDetails);
MobileDemo.issuecard.add(newPanel);
}


MobileDemo.issuecard.doLayout();
MobileDemo.viewport.doLayout();
},
});


// register xtype
Ext.reg('issuecard', MobileDemo.IssueCard);


MobileDemo.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
cardSwitchAnimation: { type: 'slide', direction: 'up'},
tabBar:{
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [
{ xtype: 'homecard', id: 'home' },
],
});
</script>
</head>
<body></body>
</html>

MattUCG
7 Sep 2011, 4:59 AM
This is still a bug, but I've come up with a workaround if anyone cares. Rather than defining the toolbar statically, it is added to the panel dynamically before the panel is shown.