In the documentation doesn´t seem to be any list of custom events available. Is there any place where I can find out those?
Besides regular javascript events, you can use the following custom events:
animationstart
animationend
transitionend
move
enter
leave
scrollwheel
tap
tapstart
tapend
tapmove
taphold
Related
The Ext.Component "renderTpl" property default value is:
'{%this.renderContent(out,values)%}'
Where can I find a detailed explanation about that mechanism?
Where is that "renderContent" method defined? Can't find any reference in the documentation.
It seems that certain methods are dynamically created:
The renderTpl contains calls to render things like docked items,
container items and raw markup (such as the html or tpl config
properties). These calls are to methods added to the Ext.XTemplate
instance by #setupRenderTpl. The #setupRenderTpl method adds methods
such as renderItems, renderContent, etc. to the template. These are
directed to "doRenderItems", "doRenderContent" etc..
That means that setupRenderTpl and renderContent are virtual methods added on the fly?
Where can I find more info. about this?
Thanks.
I would like to use Dropdown component and provide two options OK and reset buttons (as provided in Table example),
after some research I didn't find any mention about this functionality in Dropdown or Menu component api,
Does anyone implemented such functionality outside of Table components, any inputs how this is work?
The code implementing the OK and RESET options of that component are implemented specifically for the table dropdown here (https://github.com/ant-design/ant-design/blob/master/components/table/filterDropdown.tsx#L196-L222).
You can either implement it similarly (i.e. wrap the Menu with a div and handle the events yourself) or you could create an ant design github ticket and ask whether a) this should be part of the design specification and b) whether there should be a reusuable way to consume this
According to this issue in github such functionality can be reached via Popover with Menu + Buttons
You will want to bind to the change event via javascript/jQuery.
On $(document.ready() you can call a function that will do this binding.
Then you just check the value of the dropdown via a jQuery selector.
<script>
$(document).ready(function() {
$("dropdownSelector").change(function() {
var val = $(this).value();
//logic to do things
});
});
</script>
You can check out different ways to use jQuery selectors here: https://api.jquery.com/category/selectors/
I am building a Cordova/PhoneGap app. I am using Iscroll5 (https://github.com/mtr/angular-iscroll) for building a crossplatform pull-to-refresh feature. Seeing this example http://www.kamrat.com/test/iScroll5/iscroll5-pull-test.html, i want something similar but without using probe, as scrolling seems jumpy with this on. Is there any event or a way to know when the user preforms a touchend? Something like a beforeScrollEnd? Or is there a way to bind touchend to iscroll-element?
I been struggling for days to create this feature to work nicely but without any luck.
Simply add the touchend event to the HTML element, not the IScroll object.
So, if you have created your IScroll using
var scroll = new IScroll("#content");
Then just add your event like this:
document.getElementById("content").addEventListener("touchend", function () {
// do your refresh
}, false);
I wish to add a keydown listener to a number field in Sencha Touch 2 to dynamically check the field for errors rather than waiting until the form is submitted. The number field is a component on form. Looking at the official documentation, only the keyup event can be listened to.
Is it possible to listen to the standard javascript keydown event and define this custom listener in the initialization function of the form?
You can add a listener to the input field:
numberField.getComponent().input.on({
scope: this,
keydown: 'onKeyDown'
});
Then define what you want to do on the method 'onKeyDown'
onKeyDown: function(e, obj) {
//Your code here
}
Be careful, I've run into numerous problems trying to use keyboard functions on different devices, particularly with Android. After many struggles with this and the lack of standards on number fields I found building a number pad for data entry (as opposed to the various device keypads) was a better solution. Hope this helps.
Have you tried the addListener method?
numberField.addListener('keydown', function(){
alert("key down");
});
http://docs.sencha.com/touch/2.4.0/#!/api/Ext.mixin.Observable-method-addListener
I am using Jquery plugin http://timeago.yarp.com/ for showing time.
Issue is timeago will not take effect for dynamically generated items.
$(document).ready(function() {
$(".timeago").timeago(); // works perfectly fine for the items which are loaded on page load
//$(".timeago").live(timeago()); // gives me an error ie timeago is not defined
//$(".timeago").live($(".timeago").timeago()); // gives me an error too much recursion.
jQuery.timeago.settings.allowFuture = true;
});
From some google search I got to know something ie:
Using live is the same as using bind, except that it is limited only to the events click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup.
Now how can do it cause I dont have any click event? How can I bind this?
.live() and .bind() assign callbacks to event. In your case, you don't have an event to assign the function to and so it fails.
You can, in theory, assign your callback to a custom event. You will however have to manually trigger the event (using .trigger()) whenever your item is generated. For example:
$("abbr.timeago").live("timeago", function() {
$(this).timeago();
});
// ... and in the bit that generates your item
$new_item.trigger("timeago")
Demo: http://jsfiddle.net/ZjuW4/9
Of course, using .live() in this situation is purely academic and does not really serve a good purpose.
If you do have access to the code that's generating the items, you can simply chain in the call to .timeago() as the items are generated, i.e. http://jsfiddle.net/ZjuW4/3/
take a look in this topic
here was discussed how to put timeago on dynamically loaded items
for example the results of an ajax request.
Activate timeago on newly added elements only
PS: allowFuture does not have anything to do with putting timeago on newly created items on your page. it just allows dates in the future (f.e. "in 3 days", "next week")