My Sencha Touch 2 app is very complex. So I'm not able to show the whole code snippets here and I will give a short description what I'm supposed to do. In my app i have the following global structure:
- MainContainer
- Toolbar Top
- Cardswitch
- Different Panels based on linked instances
- Toolbar bottom
One of the linked panels in the Cardswitch is the home panel. This panel has the following structure:
- MainContainer
- Panel left (layout vbox)
- three more panels
- Panel right (layout vbox)
- Panel with dataview
- (* my problem panel) Panel with dynamic generated segmented buttons
- Panel left (layout vbox)
Everything works fine. The dynamic buttons in the "problem panel" will be generated via a controller-launch-function based on a stores data. Each button is desinged and filled up with some html an custom images.
Now my Problem: Each Button also provides a tap function. This function should pop up an overlay based on the buttons position. So in my controller function, where the buttons are generated, i have some code similar to that:
...
var panel = this.getContent();
var overlay = Ext.create('MyApp.view.Overlay');
panel.add(overlay);
...
As you can see, my overlay is a separate class. var panel is the "problem panel" where the buttons are shown. The code for the tap function in the buttons items (which works well) is the following:
listeners: {
tap: function() {
//overlay.showBy(this);
overlay.show();
}
}
And the overlay's code:
Ext.define('MyApp.view.Overlay', {
extend: 'Ext.Panel',
alias: 'widget.Overlay',
config: {
centered: true,
height: 200,
hidden: true,
html: 'This is just a overlay',
id: 'pOverlay',
ui: 'light',
width: 200,
hideOnMaskTap: true,
modal: true
}
});
If i do a
panel.add(overlay);
and call in the tap function just
overlay.show();
everything fine and fast but the overlay doesn't pops up relative to the pressed button. So i want to use
overlay.showBy(button);
But if i do so, the overlay needs about over two seconds to pop up and is very slow (using chrome on Windows 7 @quadcore). I'm using sencha-touch 2.0.1.1 I expected when i add the overlay to the viewport, instead of adding it to the panel, and then call show:
//panel.add(overlay);
Ext.Viewport.add(overlay);
...
overlay.show();
It doesn't comes up that fast as i add it to the panel. I need the functionality of showBy() but much faster than it is in my application. What can i do? Are there any mistakes I've done in my whole application? Anything else? I hope you guy's can help me because I'm handling around with this simple Overlay for over three day's....
Edit: For testing I used my Home panel (which includes the problem panel) as initial view so that it isn't included in the Cardswitch Container. After that i've done a showBy() and it is much faster than before when the whole panel is included in the cardswitch. It doesn't pops up that fast like using only the show() function but it is okay. But that still isn't a solution for me because i need the panel embedded.
I also tried using a simple select field with two options. Select fields also uses an Overlay to display the options and the select field is as slow as my own overlay in my problem panel. :(
Edit 2: I found a similar description of that problem here: http://www.sencha.com/forum/showthread.php?203501-ShowBy-with-Flexed-panels-and-a-box-layout-popup-is-slow But the workarounds in that thread don't work for me. How can I make the overlay with the item list of an select field is shown in the middle of the screen instead of using showBy()?
