Is there a possibility to get the normal html5 change event for the sencha touch slider as well? Sencha touch 2 offers a change event which is only fired once the slider is dropped.
I want to use it for turning on and off the lights smoothly, the slider should be continuous. Is there an easy way to do this?
We did this in pure html, we limited the events by adding steps of 10 to a 0-100 slider. I hope i have not to build my own component.
thank you
You can use the drag event on Ext.field.Slider.
Related
I have several display objects in createjs and event using easeljs i want to prevent from mouse and touch event passing through them.
i want like a easy one liner like .mouseEnabled or .mouseChildren is there something will will prevent any other interaction for the objcts below this. i can try adding all events to a backdrop movieclip which tint background color and prevent default and stopPropogation will that help?
so how to i prevent from any type of interaction taking place in canvas just by placing a displayobject that's like wall which will not allow the other displayobjects from getting click, mouseover or touch events.
You can add obj.mouseEnabled= obj.mouseChildren = false; to any you don't want to receive events.
If you just want to block events with a child on top, simply add a mouse handler to it.
cover.on("click", function(){});
You don't need stopPropagation, since that will only prevent events from bubbling in the current hierarchy (ie, surfacing an event to its direct parent). Events do not "pass through" objects that have mouse handlers on them.
Hope that helps!
I would like to create a carousel that scrolls automatically until the user scrolls / touches the ScrollView itself.
The auto-scrolling itself works fine with using scrollView.scrollTo but how could I detect if the user is interacting with the ScrollView? I took a look at the onScroll event but this does not seem to distinct between a user generated event and an event that was generated by calling scrollTo.
Also I'd like to know if it is possible to get the current scroll position from the ScrollView directly instead of reading it everytime from the onScroll event.
I'm very thankful for any tips and suggestions.
By digging into ScrollView's source code you can notice a few undocumented callbacks that will help you achieve what you're after, namely onTouchStart and onTouchEnd. These two callbacks are triggered only when user interacts with the ScrollView and not when you scroll programmatically.
You will probably want to clear your auto-scroll interval on onTouchStart and restart it after a delay on onTouchEnd.
Regarding your next question, the answer is no. As far as I know, no getter is currently exposed to retrieve the current scroll position. Therefore, you need to rely on the event passed to onScroll, retrieve event.nativeEvent.contentOffset['x' or 'y'], and store it in your component's state.
Note that if you're doing some heavy animations that need to follow scroll position closely (e.g. animated header or parallax image), it would be a good idea to use the native driver for Animated.event. You can learn more about it on React Native's blog.
I'm trying to create a simple animation example on the Windows Phone 8, but I imagine this should apply for WPF, WinRT, etc. anywhere XAML is used.
How do you animate the opacity of an to change from 0 to 1 when a 's click event is fired?
I've seen many examples of animations, but the button is always animating it's own properties, not the properties of a different control. I know I'm missing something small but I'm stumped -- no matter what I try I get XAML parse exceptions. I can get this to work with C#, but not with XAML.
Here is easy way to handle storyboard animation on any component and control by another component
http://msdn.microsoft.com/en-us/library/windows/apps/dn263220.aspx
I'm building an App for Android, iOS and Blackberry with Sencha Touch 2.0.1.
I have a Form-Panel with about 10 selectfields and some sextfields. If i ran the app on Android 2.3 or higher, the selectfields are shown as pickers. So far so good.
When the user starts filling out the form starting with textfields, he can go through the form using the next-button on the virtual keyboard. The problem is, that the selectfields are ignored by the next-button. The user has to tap on the selectfields.
I can't figure out how to get prev- and next-Buttons for the picker-elements. So that I can go through the form only with the next-Button instead of pressing "done" and tapping on the next Selectfield. It would be far more comfortable for the user.
So support of the sencha-forum isn't really helpful, see below:
http://www.sencha.com/forum/showthread.php?219636-Native-select-field-for-Android
http://www.sencha.com/forum/showthread.php?205581-Can-I-use-iOS-native-picker-instead-of-ST2-picker
According to this, there are prev- and next buttons available for a picker:
http://www.sencha.com/forum/showthread.php?205159-Ext.picker.Date-with-no-prev-and-next-buttons&p=803794
But I can't find them:-(
I think, there are two solutions to the problem:
Accessing the native Picker as proposed in the first link above. The question is how?
Implementing an own Picker-Element with an Prev- and Next-Button. This seems to be a huge efford for such a basic task.
I can't really believe, that this is such a big deal in a big framework like Sencha Touch.
Anyone facing the same problem and has a working solution?
My only idea for you would to put your picker on the page as normal, then add two buttons on the page - a Prev and Next buttons using Sencha. Then add onTop handlers for those buttons, that use the picker's .setActiveItem() method to set the picker to the next or previous item. Hopefully that will get you on your way.
http://docs.sencha.com/touch/2-0/#!/api/Ext.picker.Picker-method-setActiveItem
Is there a way to have a fixed non animated header in a sencha app and still retain page animation and browsing history?
I need my header to not animate on a page slide. The way i tried it is:
-main container (v box)
--header container
--card container(card layout)
---card
---card2
---card3
Etc
And I manually switch the cards inside the card container with setActiveItem(index)
The header is never animated in/out but I dont have history now so the only way to have a back button is manually hard coding it with setActiveItwm(prevIndex)
Its an unfortunate and dirty solution maybe somebody else has a better one.
Yes I achieved it using sencha architect to test. From memory I created a base container that had layout vbox. Inside that I had a top tabpanel and under that a tabpanel. I then set the flex on the top panel to 0.2 and the tabpanel to 0.8. That way my header will always be 20% height on any device. I hope this helps.
You require Ext.navigation.View
Use Ext.navigation.View and create basic navigation between views...then hide the navigation view you can do that by making the navigationBar property as hidden:true
Next have a common navigation header as you have mentioned above...
Going forward using a button lets say would be by using
button.up('navigationview').push({xtype: 'card2'});
This button will be somewhere in your card which takes you to next card
Similarly for going back on button click
button.up('navigationview').pop();
button.up('navigationview').pop(2);//Will take you two views back and so on
These buttons will be on your common header