I am implementing sortable/dorderable list functionality with Sencha Touch 2.0 . I am trying to replicate the functionality as it were in Sencha Touch 1.1 with Ext.util.Sortable class.
I am almost successful in getting the similar functionality with dragging around and with movement of other list items. However, in Sencha 1.1, there is a draggable.reset() functionality which mostly updates the boundaries as well as resets the offsets. I am unable to replicate this reset functionality with Sencha 2.0 draggable behavior.
Any ideas how to implement that? Following is the code in Sencha 1.1:
// We reset the draggable (initializes all the new start values)
draggable.reset();
// Move the draggable to its current location (since the transform is now
// different)
draggable.moveTo(region.left, region.top);
I changed moveTo() function with this:
draggable._element.setXY([region.left, region.top]);
But not the reset() functionality. I have tried to set the -webkit-transform directly to the draggable element but somehow that style isn't getting added to that element. Any help?
Fixed the issue. The reset() function is no longer required - just changed the record index in the Dataview store and refreshed the dataview in "dragend" event.
You can also do as shown in this example..
http://druckit.wordpress.com/2013/04/08/tap-and-drag-animation-domination-part-3-of-3-implementing-drag-and-drop-in-sencha-touch-2/
Related
I just updated my application from the old Dnd extension to Dnd5 and I'm now seeing multiple/many server AJAX calls (usually 5 or 6) when I hover over lazy-load nodes while dragging. I have only implemented the dragStart, dragEnter, and dragDrop callbacks, and I only see the dragEnter callback being called once when I hover. Is there some special handling or response required from the lazyLoad callback to prevent this? I should also point out that I also updated to the latest version of Fancytree (2.34.0) so perhaps something else has changed that is causing this? (My tree works fine otherwise.)
Thanks!
Seems you found a bug. This will be fixed in Fancytree 2.34.1
I am trying to build an interface of my RTS, I want to create basic HUD with some buttons and time/date grid.
I have created widget blueprint and designed as I needed.
This is how I am trying to create HUD, get its reference and put it into variable for next use.
This is how I am trying to add it to the viewport on the beginPlay.
Everything is happening inside PlayerController. No widget is shown on the display.
I tested and it works well using your way, UE4 version is 4.21.
Let me know if that doesn't work for you.
Using plain old javascript version of ag-grid.
I would like to destroy the ag-grid that is in a div from a button click event.
How do i destroy the grid?
There is a method named destroy().
As per documentation:
destroy()
Gets the grid to destroy and release resources. If you are using Angular (version 1 or 2) you do not need to call this, as the grid links in with the AngularJS 1.x lifecycle. However if you are using Web Components or native Javascript, you do need to call this, to avoid a memory leak in your application.
Have a look at the Plunk - Destroy grid I created.
gridOptions.api.destroy();
As you can see, by calling this function, the grid gets destroyed.
As described in the documentation, it not only clears the DOM, but also takes care of memory leaks.
For some reason the following html doesnt work inside safari on iphone 4.
Test Link</div>
it works on safari inside a regular browser. I am using senchatouch2 framework.
Thanks
The only way you can add events to dom elements in Sencha touch 2.0 that I know of, is to use their element events api. this is an example of it. Alot of events are available like tap, double tap and so on.
var el = Ext.get("test");
el.addListener( 'tap', function(e){
alert('it works!');
});
This goes after the panel is rendered.
I propose that you do not use such inline event handlers.
Not only is it better to separate markup and behavior, but you should let sencha touch handle the messy business of unifying events across browsers.
At the very least give your tag an id and do Ext.get('id').on('tap', function(){...})
But still better look into MVC features to avoid such low-level code altogether.
Clicking on an element which has a Javascript handler makes the element go have a 'grey overlay'. This is normally fine but I'm using event delegation to handle the touchdown events of many child elements. Because of the delegation the 'grey overlay' is appearing over the parent element and looks bad and confusing.
I could attach event handlers to the individual elements to avoid the problem but this would be computationally very wasteful. I'd rather have some webkit css property that I can override to turn it off. I already have visual feedback in my app so the 'grey overlay' is not needed.
Any ideas?
-webkit-tap-highlight-color
To disable tap highlighting, set the
alpha value to 0 (invisible)
$('body').bind('touchstart', function(e){
e.preventDefault()
})
For those reading this question, another CSS property which will not only remove the overlay but also prevent the touch device from interacting with the user to assess a tap intention (which delays the timing of the event trigger significantly), is to use the cursor property.
a.notTappable {
cursor:default
}
Also, in the case the asker described where you have descendants of a parent and you only want the descendants to be tappable and you wish to IGNORE ALL MOUSE EVENTS OF THE PARENT, the following solution will you give you the best performance (by completely disabling the bubbling up to the parent). Read the webkit spec here.
.parent {
pointer-events:none;
}
.parent .descendant {
pointer-events:default;
}
I only mention this because the performance difference here is significant.