Results 1 to 4 of 4

Thread: Panel.getActiveItem not working

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    3
    Vote Rating
    0
      0  

    Default Panel.getActiveItem not working

    Sencha Touch version tested:
    • 0.9 rev 1.1.1

    • sencha-touch.css used
    Platform tested against:
    • iOS 3.x (iPad - very old version)
    • iOS 4 (iPhone 3GS)
    • Chrome 16.0.912.63 - for troubleshooting sake
    Description:
    • Panel.getActiveItem() & Panel.setActiveItem(#) not working when integrated with Nestedlist.detailCard. It was working fine for the first time when one item was selected from list and slide to panel which allows users to navigate pictures/information by swiping left and right. Got back to items listing, select second item from list, slide left to panel (showing details/pictures of item#2), getActiveItem() started not working when swipe/tap/doubletap are used. Working only for 'click'
    • Error (from : Chrome's debugger)Uncaught TypeError: Cannot read property 'id' of null
      detailCard.body.select.on.swipeindex.js:376
      (anonymous function)
      (anonymous function)sencha-touch.js:6
      Ext.gesture.Gesture.Ext.extend.firesencha-touch.js:6
      Ext.gesture.Swipe.Ext.extend.onTouchMovesencha-touch.js:6
      Ext.gesture.Manager.Ext.AbstractManager.onTouchMovesencha-touch.js:6
      (anonymous function)sencha-touch.js:6
      sencha-touch.js:6

    • Uncaught TypeError: Cannot read property 'isComponent' of undefined
      Ext.lib.Container.Ext.extend.createComponentsencha-touch.js:6
      Ext.lib.Container.Ext.extend.lookupComponentsencha-touch.js:6
      Ext.lib.Container.Ext.extend.prepareItemssencha-touch.js:6
      Ext.lib.Container.Ext.extend.addsencha-touch.js:6
      Ext.layout.CardLayout.Ext.extend.setActiveItemsencha-touch.js:6
      Ext.Container.Ext.extend.setActiveItemsencha-touch.js:6
      detailCard.body.select.on.tapindex.js:360
      (anonymous function)
      (anonymous function)sencha-touch.js:6
      Ext.gesture.Gesture.Ext.extend.firesencha-touch.js:6
      Ext.gesture.Tap.Ext.extend.fireTapEventsencha-touch.js:6
      Ext.gesture.Tap.Ext.extend.onTouchEndsencha-touch.js:6
      Ext.gesture.Manager.Ext.AbstractManager.onTouchEndsencha-touch.js:6
      (anonymous function)
    Test Case:
    Code:
            var nestedList = new Ext.NestedList({
                title: 'bla',
                fullscreen: true,
                displayField: 'text',
                getTitleTextTpl: function() {
                    return '{' + this.displayField + '}';
                },
                getItemTextTpl: function() {
                    return '{' + this.displayField + '}';
                },
                getDetailCard: function(recordNode, parentNode) {
                    var cxxxx = new Ext.data.Store({
                        model: 'Details',
                        proxy: {
                            type: 'ajax',
                            url:  'testa.php'
                        }
                    });
    
    
                    var formBase   = {
                            scroll: 'vertical',
                            url:    '#',
                            standardSubmit : false,
                            items: [{
                                xtype: 'fieldset',
                                title: '',
                                instructions: '',
                                defaults: {
                                    required: false,
                                    labelAlign: 'left',
                                    labelWidth: '20%'
                                },
                                items: [
                                {
                                    xtype: 'panel',
                                    name : 'img',
                                    html : 'XXXX'
                                }, {
                                    xtype: 'textareafield',
                                    name : 'summary',
                                    label: '',
                                    placeHolder: '?????',
                                    disabled: true,
                                    maxLength: 60,
                                    maxRow:    20
                                }]
                            }],
                            dockedItems: [{
                                    xtype: 'toolbar',
                                    dock: 'bottom',
                                    items: [{
                                        xtype: 'spacer'
                                    }, {
                                        text: 'Next',
                                        ui: 'action',
                                        handler: function() {
                                            showDetails();
                                        }
                                    }]
                            }]
                    };
    
    
                    var listToolbar = new Ext.Toolbar({
                            title: '',
                            layout: 'hbox',
                            dock: 'bottom',
                            items: [{
                                    xtype    : 'spacer'
                            }, {
                                    text     : 'Next',
                                    ui       : 'action',
                                    handler  : function() {
                                            detailCard.setActiveItem(0,{type: 'slide', direction: 'right'});
                                    }
                            }]
                    });
    
    
                    var panelDetails = new Ext.Panel({
                            id          : 'panelDetails',
                            layout      : 'card',
                            dockedItems : [ listToolbar ],
                            items       : [ listDetails ]
                    });
    
    
                    var listDetails = new Ext.List({
                            xtype     : 'list',
                            fullscreen: false,
                            grouped   : false,
                            scroll    : 'vertical',
                            itemTpl   : '<div class="list-item-title">{a}</div>' + '<div class="list-item-narrative">{b}</div>',
                            onItemDisclosure: function (r1) {
                                    showPanel();
                            },
                            store     : cxxxx
                    });
    
    
                    function load1(c) {
                            var cn = new Ext.Container({
                                    id        : c,
                                    width     : '100%',
                                    height    : '100%',
                                    cls       : 'card',
                                    html      : '<img src="loading.gif"/>'
                            });
    
    
                            detailCard.add(cn);
                            if (c==2) {
                                    detailCard.setActiveItem(c);
                            }
                    }
    
    
                    var showPanel = function() {
                            //adding cards
                            load1(1);
                            load1(2);
                            load1(3);
                            load1(4);
                            detailCard.doLayout();
                            detailCard.body.select('img').on({
                                    swipe: function(e, t) {
                                            var cc = detailCard.getActiveItem().id;
                                            detailCard.setActiveItem(cc);
                                    },
                                    scope: {
                                            scale: 1
                                    }
                            });
                    }
    
    
                    var showDetails = function() {
                            try {
                                    detailCard.add(panelDetails);
                                    detailCard.setActiveItem(1,{type: 'slide', direction: 'left'});
                                    cxxxx.load();
                            } catch(e){console.log(e);}
                    };
    
    
                    var detailCard = new Ext.Panel({
                            id              : 'images-view',
                            frame           : true,
                            autoHeight      : false,
                            title           : '',
                            scroll          : 'vertical',
                            layout          : 'card',
                            cardAnimation   : 'slide',
                            items           : [ formBase ]
                    });
                    return detailCard;
                },
                store: store
            });
    See this URL : nilSteps to reproduce the problem:
    • Navigate the nestedlist with items
    • Select item#1 -> show details
    • Press 'Next' (bottom)
    • Navigate pictures, swipe left/right (OK)
    • Back to main list (use Nestedlist "Back" button)
    • Select item#2 -> show details
    • Repeat above action after the selection
    • Not working with swipe (even with a few pictures/cards)
    • Alter with tap, doubletap (not working)
    The result that was expected:
    • Supposed to be able to swipe left/right for pictures scrolling (container/panel)
    The result that occurs instead:
    • getActiveItem returning NULL when swipe is used (for the 2nd time)
    Screenshot or Video:
    • nil
    Debugging already done:
    • none
    Possible fix:
    • nil, using click at the moment

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,370
    Vote Rating
    1515
      0  

    Default

    Have you tried this in Sencha Touch 2? Development has been moved on to Sencha Touch 2.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    3
    Vote Rating
    0
      0  

    Default

    Thanks. Just got 2.0 downloaded, I will try it out and let you know the outcome once I have it.

  4. #4
    Sencha User
    Join Date
    Jan 2012
    Posts
    3
    Vote Rating
    0
      0  

    Default

    Was kinda busy with other projects last week, just got some time to look at this just now.

    Quite a list of things to change to 2.0 - took me days

    Anyway, just to update you about the outcome - tested with all mentioned platforms above.
    It works fine with 2.0, thank you.
    Found few things:
    * 2.0 fixed nested list overlap back button with title.
    * Scrolling has changed, especially with a docking bar
    * Sliding animation not working for added panel, could be code change in 2.0, gotta find out later.

    Again, thanks for your advice.

Posting Permissions

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