1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    2
    Vote Rating
    0
    matgallacher is on a distinguished road

      0  

    Default Format problems when pushing a carousel into a navigation view

    Format problems when pushing a carousel into a navigation view


    I'm currently trying to create an application based on the navigation view example in the documentation but, rather than navigate to a single item the list pushes to an item in a carousel. Whilst this works in principle the formatting (as viewed in Chrome) is such that each item appears offset as you scroll through the carousel.

    The code below reproduces the behaviour in the navigation view example (I realise there are various issues with component ID's in this example but even with these removed I still cannot see any fix.

    Code:
        
    
    /*
        Replace the following in examples\navigationview\app\controller\Application.js
    
    onContactSelect: function(list, index, node, record) {
            var editButton = this.getEditButton();
    
    
            if (!this.showContact) {
                this.showContact = Ext.create('AddressBook.view.contact.Show');
            }
    
    
            // Bind the record onto the show contact view
            this.showContact.setRecord(record);
    
    
            // Push the show contact view into the navigation view
            this.getMain().push(this.showContact);
        },
    */
    
    onContactSelect: function(list, index, node, record) {        
            var editButton = this.getEditButton();
    
            if (!this.showContact) {
                // use a carousel rather an an individual view
                this.showContact = Ext.create('Ext.Carousel');
            }
    
            // create an array of items to populate the carousel with
            var contacts = Ext.getStore('Contacts');
            var items = [];
    
            for (var i = 0; i < contacts.getCount(); i++) {
                var item = Ext.create('AddressBook.view.contact.Show');
                item.setRecord(contacts.getAt(i));
                items.push(item);
            }
            this.showContact.setItems(items);
    
    
            // Push the carousel into the navigation view
            this.getMain().push(this.showContact);
        }
    My assumption is that I'm missing something in a layout specification or something similar the is my first application with Sencha and I'm at a loss as to what it might be!

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,404
    Vote Rating
    850
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You are caching a view and when you tap back you are removing the view and therefore by default destroying the view. Are you having problems in the initial push or after that?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    2
    Vote Rating
    0
    matgallacher is on a distinguished road

      0  

    Default


    Thanks for the quick response

    It occurs on the first push, I've tried to demonstrate the odd vertical offset on the formatting of the items below.

    Code:
    Item 1        Item 2        Item 3        Item 4        Item 5        Item 6
                                Appears here                              Appears here
                  Appears here                              Appears here
    Appears here                              Appears here
    I've done work to remove any warning raised by the framework, using an view that is not cached, even push a carousel with static items but any way I try I still get the vertical offset

    I'm not sure if you are able to replicate it using the code I provided (it should work just replacing the example code with that snippet) could be possible that it is just my browser?

  4. #4
    Sencha User
    Join Date
    Jan 2012
    Posts
    46
    Vote Rating
    0
    jsweere is on a distinguished road

      0  

    Default Similar issue

    Similar issue


    I have a similar issue. I'm wanting to create a carousel that is an item of a card which is a member of a navigation view. The first time I push to the card containing the carousel, the carousel works as expected. However, upon pressing the back button to go back to the main page, then pushing to the view again, it's like the carousel recognizes all of it's items ( three panels containing several items ) as one item. The indicator at the bottom of the carousel still shows three items, but each of those items looks as if they were all three stacked on top of each other. The carousel no longer swipes, and the rest of the items on the card break as well. Also, I have autoDestroy: false on the navigation view. This happens in Chrome, and when debugging on an Android. When I comment out the autoDestroy: false, it works fine in Chrome, but on the phone, the items of the carousel dont show up at all, and the title from that child page and the back button remain in the NavigationBar when returning to the main screen.