Instead of clicking on a button and showing the slide navigation menu, how to show the menu by just sliding the screen. Say for example the menu button is positioned on the top left corner. When I swipe the screen from left to right the menu must open likewise it should close if I swipe from right to left.
You could add a swipe listeners to the Viewport and call the events accordingly
Ext.Viewport.bodyElement.on('swipe', function (event, node, options){
var button = Ext.ComponentQuery.query('button');
if (event.direction == 'right') {
button[0]._handler();
} else {
button[1].fireAction('tap');
}
});
Fiddle: https://fiddle.sencha.com/#fiddle/c1p
Obviously this fiddle has bugs and should only be used so you can have an idea of how to implement your solution.
See here solution for how to show the side menu by just sliding the screen in Sencha Touch 2.4.1
Sencha Touch - menu and edge swipes errors
Related
In my Codenameone app i have built a side menu, but i have 2 cosmetic issues with it.
When i swipe from the left and i lift my finger in the screen space, slightly further than the menu finishes, the menu snaps back. It doesn't snap back if i lift my finger in the space the menu will expand to. Is there a way to make the side menu stay on the screen when i swipe?
My main page has a vertically scrollable container. When i open the side menu, it doesn't disable my main page so i am still able to scroll my main page container by moving my finger on the space to the right of the menu. Are we able to disable the main page content by default when the menu is open?
For ref, my menu is along the design of this tutorial, with a very simple example being:
public void start() {
if (current != null) {
current.show();
return;
}
Form hi = new Form("Hi World", BoxLayout.y());
hi.add(new Label("Hi World"));
Toolbar t = new Toolbar();
hi.setToolbar(t);
t.setTitle("Title");
Label logoLabel = new Label("");
logoLabel.setTextPosition(Label.BOTTOM);
logoLabel.setText("label text here");
t.addComponentToSideMenu(logoLabel);
hi.show();
}
Thanks
The point of closing back seems to be hardcoded to a quarter of the screen here: https://github.com/codenameone/CodenameOne/blob/master/CodenameOne/src/com/codename1/ui/Toolbar.java#L1380
There might be other points in the code that implement this logic. It might be possible to change that to make that logic configurable via theme constants. But right now this is hard coded.
I created a list using table layout which contains checkbox and message.The list is scroll-able . When i scroll down everything works fine,Where as when i check the check box and scroll down the toolbar side menu is expanding.
My requirement is to open the toolbar sidemenu only on the sidemenu toogle button click other than any click on the screen side menu should be in close mode.
If a form has scrollable container (tabs for ex), opening and closing the sidemenu also scrolls the containers below.
Is there a way to disable that ?
Tabs aren't scrollable, they are swipable. You can disable the swiping of the tabs or disable the swiping of the components. The side menu is swipable only from the left most portion of the screen so the rest of the screen is safe to swipe through.
I'm working on a web app that uses lots of modal overlays with scrollable content in the modal . On touch devices, and in particular on Android, the mobile browser wants to scroll the body content behind the modal instead of the actual scrollable content area within the modal. Or, if the content does scroll, when it hits the top or bottom of the scrollable area, the scrolling then continues on the body. I don't want the body to scroll at all under any circumstances when the modal is visible/active.
I tried to prevent this with the following code but it seems to have no effect (in this case, $context is the document root):
$context.on('touchmove touchstart touchend', '[data-modal-content]', function(e) {
e.stopPropagation();
});
Anyone have other ideas/insight?
Is there anything wrong with the provided z-index of your elements? Maybe the Modal itself or an inner container isn't stacked on top of the body-text
Trying to RTLify (Convert to Right-to-Left) a sencha touch NestedList.
How do I change the default Animation direction when clicking an item?
How do I place the back button on the top-right side instead of top-left?
Figured it out.
nestedlist.getLayout().setAnimation({type:'slide',direction:'right'});
add this in your nestedlist config backButton:{ui:'forward', align:'right'}