Itemtap on popup list doesnt fire when layout 'fit' used

[busaware1]

Not sure if this is a bug - it appears so:
>>

REQUIRED INFORMATION
Ext version tested:

• Sencha Touch 2.0.0

Browser versions tested against:

• chrome 18.0.1025.162 m

Description:

• Popup panel with list. Itemtap event doesnt fire when layout is'fit'. Need layout 'fit' to display list on iphone otherwise it comes up blank.

Steps to reproduce the problem:

• popup with list and itemtap event set layout to 'fit' then comment out layout

The result that was expected:

• item tap event should fire

The result that occurs instead:

• item tap event only fires when layout 'fit' not in place

Test Case:
comment the layout: 'fit' line to see it working

Ext.define('MyApp.view.MyMain', {
    extend: 'Ext.Panel',
    xtype: 'MyMain',
    requires:
    ['MyApp.view.MyPopup'
    ],
    config :
    {
        fullscreen: true,
        html: 'Hello World.'
        ,
        items:
        [
            {
                xtype: 'textfield',
                itemId: 'myfield',
                name: 'myfield',
                label: '1/ enter value 2/move to next field',
                labelWidth: '50%'
            },
            {
                xtype: 'textfield',
                itemId: 'firstname',
                name: 'firstname',
                label: 'first'
            },
            {
                xtype: 'textfield',
                itemId: 'lastname',
                name: 'lastname',
                label: 'last'
            }
        ]
    }
    
    ,
    initialize: function () {
        console.log('initialize MyMain');
        this.callParent();
    }
    
});

[mitchellsimoens]

Can I see the MyApp.view.MyPopup class? I cannot reproduce in 2.0.1 RC with this code:

var panel = new Ext.Panel({
    centered : true,
    width    : 300,
    height   : 300,
    layout   : 'fit',
    items    : [
        {
            xtype    : 'list',
            itemTpl  : '{text}',
            store    : {
                fields : ['text'],
                data   : [
                    { text : 'One' },
                    { text : 'Two' }
                ]
            },
            listeners : {
                itemtap : function() {
                    console.log('itemtap fired');
                }
            }
        }
    ]
});

Ext.Viewport.add(panel);

[busaware1]

Hi,
thx - I'm not sure what has happened to my original post but I did provide a link/URL to the full example.
Here it is.

http://www.senchafiddle.com/#EV7qM

thanks

[mitchellsimoens]

The code there is the same as in your first post and doesn't have a popup list or fit layout or itemtap event listener.

[busaware1]

hi - thats very weird - when I cick on this URL I see multiple tabs for each of the files in the senchafiddle tool - just tried on my iphone and even see the other code files.
anyways I have attached the zip of the application - includes the app.js , views and controller.
thx

[mitchellsimoens]

So I load your app code, I enter a value in the first text field and tab to the next one which is first. I get a floating panel with a list in it. I tap on an item and it populates both the first and last fields. I am using 2.0.1 RC using Chrome 18 and iOS Simulator (iPad 5.1)

[busaware1]

Hi,
see in /views/MyPopup.js

on all of the below:


IOS 4.1 iphone - M_webkit 4.0.5
IOS 4.2.1 iphone - M_webkit 5.0.2
IOS 5 iphone simulator - M_webkit 5.1


when line layout 'fit' is commented out causes a blank list
when line layout 'fit' is used list of names comes up but itemtap doesnt fire.




IOS 4.3.5 ipad - M_webkit 5.0.2
when line layout 'fit' is commented out list of names comes up and itemtap does fire
NOTE: when line layout 'fit' is used list of names comes up but itemtap doesnt fire.

seems like an iPhone issue for a number of versions of the browser - haven't tried on older ipad version of browser.


thanks

[Jamie Avins]

Lists cannot have a 'fit' layout because they scroll. They either need to be within a container that gives them size or they need to have a fixed size.

[busaware1]

thanks Jamie,

this led me to look further at the height/width settings and it turns out that the '70%' for height causes the issue e.g. when I have this code in place (code in red) then I have the problem with item tap not firing in the IOS/webkit versions listed above.
Take these lines out and just use a fixed amount (code lines in blue) and its fine.
Should the percentages work?
thx

Ext.define('MyApp.view.MyPopup', {
    extend: 'Ext.List',
    xtype: 'MyPopup',

    config: {
        modal: true,
        hideOnMaskTap: true,

        // Make it hidden by default
        hidden: true,
        centered: true,
        // Set the width and height of the panel
        width: (Ext.os.deviceType == 'Phone') ? 260 : 400,
        height: (Ext.os.deviceType == 'Phone') ? '70%' : 400,
height: (Ext.os.deviceType == 'Phone') ? 350 : 400,
        // need this next line to display on iPhone but this disables itemtap on the list
       // layout: 'fit', 
        items:
        [
        {
        xtype: 'titlebar',
        docked: 'top',
        title: 'Pick an item'
    },
    {
    xtype: 'list',
    itemId: 'mylist',
    store: 'MyStore',
// need height otherwise wont display
    height: ((Ext.os.deviceType == 'Phone') ? '70%' : 400) - 70, 
 height: ((Ext.os.deviceType == 'Phone') ? 350 : 400) - 70, 

    itemTpl: '<div class="cities">{thing1} {thing2}</div>'

}
           ]
           }
           ,
           initialize: function () {


    console.log('initialize Popup');
    this.callParent();
}


});

[Jamie Avins]

I would think the should, we will look into it.