PDA

View Full Version : [FIXED] Actionsheet in a card - how?



cyberwombat
15 Nov 2011, 12:55 PM
I have this view:



Ext.define('App.view.Welcome', {
extend: 'Ext.Container',
xtype: 'Welcome',


config: {
layout: 'vbox',
scrollable: true,
items: [
{
xtype: 'button',
text: 'Action Sheet',
model: false,
handler: function() {
var a = this;
if (!this.actions) {
this.actions = Ext.create('Ext.ActionSheet', {
height: 100,
items: [
{


text : 'Delete draft',
ui : 'decline',
handler: Ext.emptyFn
},
{
text : 'Save draft',
handler: Ext.emptyFn
},
{
xtype: 'button',
text : 'Cancel',
scope : this,
handler: function() {
this.actions.hide();
}
}
]
});
}
this.actions.show();
}
},
{
xtype: 'component',
cls: 'home',
html: [
'...'.join('')
}
]
}
});




But loading this only shows the modal - not the buttons. If I don't specify to add to viewport then I get this: ActionSheet#show showing a component that currently doesn't have any container. Please use Ext.Viewport.add() to add this component to the viewport.

If I add a ref to my main viewport then it throws no erros but still only modal.

If I look at the DOM I can see my action card with a height of auto. If I change the height using the dom inspector to say 100px it shows. However if I set the height in my view it has no effect even though it shows the change in the exact same place - i.e. same div.

My app is based on the senchacon app so it's loading a controller/view into a card viewport. Interestingly if I load the actionsheet in my very first card it works - just not any card I slide into. Any idea why? I've been banging my head against the wall for 3 days on this.

Is this a bug?

EDIT: It seems that the .x-layout-card is set to position relative which is causing the actionsheet to go off screen. Setting to absolute/static fixes that though now I lost my bottom tab bar (just the bar - the buttons are fine)

Suggestions?

rdougan
15 Nov 2011, 5:37 PM
This *should* work. I was writing a reply, with a working example, when I realized it did not.

I've fixed this in 2.0 and it'll be in the next release. Good job finding the bug. Thanks!

Edit:
By the way, you can basically add a floating item to *any* container, whether it is fit, card, box, or anything. A 'floating' container is when you set a top, left, bottom, right, model, or centered config on any component/container.

cyberwombat
15 Nov 2011, 5:39 PM
Oh thank god. I've been spending the last few hours trying to make an example I could post as an example - Im glad you tried it. Is it an easy fix I can apply?