Actionsheet in a card - off screen

[cyberwombat]

My MVC view of a card layout:

Ext.define('SquareRoute.view.Settings', {
    extend: 'Ext.form.Panel',
    title: 'Settings',
    initialize: function() {
      this.down('actionsheet').show();
      this.callParent();
    },
    config: {


        html: '<div style="height:1000px"></div>',
        items: [


        {
            xtype: 'actionsheet',
            hideOnMaskTap: true,
            id: 'photography',
            docked: 'top',
            items: [


            {
                text: 'Take photo',
                ui  : 'confirm',


            },
            {
                text: 'Browse photo library',
                ui  : 'confirm',


            },
            {
                text: 'Cancel',
                handler: function() {
                     this.up('actionsheet').hide();
                }
            }
            ]
        },


        ]
    }
});

The actionsheet is below fold at bottom of the 1000px. 'docked' option does nothing. Suggestions?

[jay@moduscreate.com]

Action sheets are not designed to be docked to a container.

[rdougan]

Remove the docked configuration and change it to:

{
    xtype: 'actionsheet',
    top: 0,
    left: 0,
    right: 0,
    items: [...]
}

This means it will be floating at the top of your container.

[cyberwombat]

Aahhhhhh!!! thanks that did the trick!