Looks like we cannot reproduce this. Please provide another test case to reproduce this issue.
  1. #1
    Sencha User hectorgomis's Avatar
    Join Date
    Feb 2013
    Location
    Spain
    Posts
    42
    Vote Rating
    0
    hectorgomis is on a distinguished road

      0  

    Default Scroll outside of the page on ST2.1.1 with 3 toolbars and 1 listview

    Scroll outside of the page on ST2.1.1 with 3 toolbars and 1 listview


    Hi,

    I'm developing a app with ST2.1.1, and I think I found a bug with scroll in one case. When I paint on my view 2 toolbars on the top, 1 listview scrolled and 1 toolbar on the botton of the page, the scroll of the listview has a wrong size and the last 3 items of the list are hidded outside of the current view. The height of my listview is 100%, and I think that ST is taken the current height of the view without subtract the height of my 3 toolbars with maxheight fix size. Instead of 2 toolbars on the top, I did with 1 toolbar and 1 tabbar, and the application scroll is working ok.
    Here I attached 2 screenshots (first 3 toolbars, second 2 toolbars and 1 tabbar) and my view. I tested on Google Chrome. As you can see on the pics, first one has scroll outside and second one has scroll perfect.

    Screenshot 1 - 3 toolbars and 1 listview 100%

    Uno.jpg

    Screenshot 2 - 2 toolbars + 1 tabbar and 1 listview 100%

    Dos.jpg

    View of Screenshot 1
    Code:
    Ext.define('App.view.ClienteListado', {
        extend: 'Ext.Panel',
    
    
        config: {
            fullscreen: false,
            height: '100%',
            id: 'clienteListado',
            items: [
                {
                    xtype: 'toolbar',
                    docked: 'top',
                    id: 'tbTopClienteListado',
                    title: 'lang_tbTopClienteListado[iso]'
                },
                {
                    xtype: 'toolbar',
                    docked: 'top',
                    id: 'tbBusquedaClienteListado',
                    title: '',
                    items: [
                        {
                            xtype: 'searchfield',
                            placeHolder: 'lang_buscar[iso]'
                        }
                    ]
                },
                {
                    xtype: 'toolbar',
                    docked: 'bottom',
                    height: '10%',
                    id: 'tbClienteListado1',
                    layout: {
                        align: 'center',
                        pack: 'center',
                        type: 'hbox'
                    }
                },
                {
                    xtype: 'list',
                    id: 'lsClienteListado',
                    itemTpl: [
                        '<div>{nomCliente}{telefono1}</div><div>{direccion}</div><div>{telefono1}</div><div>{email}</div>'
                    ],
                    store: 'storeClientes'
                }
            ]
        }
    
    
    });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,646
    Vote Rating
    899
    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


    I had to add layout : 'fit' to the panel in your example to make the list even show and the scroll looks as expected for me:

    Code:
    Ext.define('App.view.ClienteListado', {
        extend : 'Ext.Panel',
    
        config : {
            id     : 'clienteListado',
            layout : 'fit',
            items  : [
                {
                    xtype  : 'toolbar',
                    docked : 'top',
                    id     : 'tbTopClienteListado',
                    title  : 'lang_tbTopClienteListado[iso]'
                },
                {
                    xtype  : 'toolbar',
                    docked : 'top',
                    id     : 'tbBusquedaClienteListado',
                    title  : '',
                    items  : [
                        {
                            xtype       : 'searchfield',
                            placeHolder : 'lang_buscar[iso]'
                        }
                    ]
                },
                {
                    xtype  : 'toolbar',
                    docked : 'bottom',
                    height : '10%',
                    id     : 'tbClienteListado1',
                    layout : {
                        align : 'center',
                        pack  : 'center',
                        type  : 'hbox'
                    }
                },
                {
                    xtype   : 'list',
                    id      : 'lsClienteListado',
                    itemTpl : '<div>{nomCliente}{telefono1}</div><div>{direccion}</div><div>{telefono1}</div><div>{email}</div>',
                    store   : 'storeClientes'
                }
            ]
        }
    });
    
    new Ext.data.Store({
        storeId : 'storeClientes',
        fields  : ['nomCliente', 'telefono1', 'direccion', 'email'],
        data    : [
            {
                nomCliente : 1,
                telefono1  : 12345,
                direction  : 'Somewhere',
                email      : '1@somewhere.com'
            },
            {
                nomCliente : 2,
                telefono1  : 12345,
                direction  : 'Somewhere',
                email      : '2@somewhere.com'
            },
            {
                nomCliente : 3,
                telefono1  : 12345,
                direction  : 'Somewhere',
                email      : '3@somewhere.com'
            },
            {
                nomCliente : 4,
                telefono1  : 12345,
                direction  : 'Somewhere',
                email      : '4@somewhere.com'
            },
            {
                nomCliente : 5,
                telefono1  : 12345,
                direction  : 'Somewhere',
                email      : '5@somewhere.com'
            },
            {
                nomCliente : 6,
                telefono1  : 12345,
                direction  : 'Somewhere',
                email      : '6@somewhere.com'
            },
            {
                nomCliente : 7,
                telefono1  : 12345,
                direction  : 'Somewhere',
                email      : '7@somewhere.com'
            },
            {
                nomCliente : 8,
                telefono1  : 12345,
                direction  : 'Somewhere',
                email      : '8@somewhere.com'
            },
            {
                nomCliente : 9,
                telefono1  : 12345,
                direction  : 'Somewhere',
                email      : '9@somewhere.com'
            },
            {
                nomCliente : 10,
                telefono1  : 12345,
                direction  : 'Somewhere',
                email      : '10@somewhere.com'
            },
            {
                nomCliente : 11,
                telefono1  : 12345,
                direction  : 'Somewhere',
                email      : '11@somewhere.com'
            },
            {
                nomCliente : 12,
                telefono1  : 12345,
                direction  : 'Somewhere',
                email      : '12@somewhere.com'
            },
            {
                nomCliente : 13,
                telefono1  : 12345,
                direction  : 'Somewhere',
                email      : '13@somewhere.com'
            },
            {
                nomCliente : 14,
                telefono1  : 12345,
                direction  : 'Somewhere',
                email      : '14@somewhere.com'
            }
        ]
    });
    
    Ext.Viewport.add(new App.view.ClienteListado());
    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 hectorgomis's Avatar
    Join Date
    Feb 2013
    Location
    Spain
    Posts
    42
    Vote Rating
    0
    hectorgomis is on a distinguished road

      0  

    Default


    OK, thanks!

Thread Participants: 1

Tags for this Thread