Results 1 to 2 of 2

Thread: Broken toolbar styling

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    39
    Vote Rating
    4
      0  

    Exclamation Broken toolbar styling

    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...

    Code:
    <!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>

  2. #2
    Sencha User
    Join Date
    Aug 2011
    Posts
    39
    Vote Rating
    4
      0  

    Default

    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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •