If there is a html form with a button, with normal html, we would be able to retrieve form element from the onclick event object as follows.
ev.target.form
As Dojo contains a its normalize event object, how can we retrieve event generated form element when a button is clicked ? (I require this as my dom tree contains duplications of same form element)
Thank you,
nimp
dojo.connect(dojo.byId("formsContainner"), "click", function(evt){
dojo.stopEvent(evt); // assuming you don't want to actually go to a new page
var n = evt.target;
while(n.tagName != "form"){
if(n.tagName == "body") break;
n = n.parentNode;
}
if(n.tagName == "form"){
myFormMethod(n);
return;
}
console.error('no form for button - clicked on something else')
});
Related
at the moment i programm a database based Chat System.
The friendlist of every User gets loadet in a TreeView after the login.
means:
After the login I request the names of the useres friends by the following Funktion,
String namesSt[] = get.getUserFriendNameByUserID(currentUserID);
To use the given Names to load them as TreeItem into my Friendlist / TreeRootItem "rootItem"
for (int counter = 0; counter < namesSt.length; counter++) {
System.out.println(namesSt[counter]);
TreeItem<String> item = new TreeItem<String> (namesSt[counter]);
item.addEventHandler(MouseEvent.MOUSE_CLICKED,handler);
rootItem.getChildren().add(item);
}
When I now add my rootItem, I see the Names in the TreeView.
But if I click on a name, the given MouseEventHandler doesn´t get called.
Further I just want to request the text of the Element which trigger the MouseEvent, so that i can submit these name to a spezial funktion.
How can i realice such an MouseEvent?
How is it possible to call it from the dynamicly created TreeItem?
Thank you for any help :)
cheerse
Tobi
TreeItems represent the data, not the UI component. So they don't generate mouse events. You need to register the mouse listener on the TreeCell. To do this, set a cell factory on the TreeView. The cell factory is a function that creates TreeCells as they are needed. Thus this will work for dynamically added tree items too.
You will need something like this:
TreeView<String> treeView ;
// ...
treeView.setCellFactory( tv -> {
TreeCell<String> cell = new TreeCell<>();
cell.textProperty().bind(cell.itemProperty());
cell.addEventHandler(MouseEvent.MOUSE_CLICKED, event -> {
if (! cell.isEmpty()) {
String value = cell.getItem();
TreeItem<String> treeItem = cell.getTreeItem(); // if needed
// process ...
}
});
return cell ;
}
how do I find out if my custom widget has focus in Dojo?
i have dojo editor i wnat to know if the editor has already focus or not?
you can use the module dijit/focus to find out the focus
FROM DOJO DOCS
Tracking active widgets
At any point in time there is a set of (for lack of a better word)
“active” or “focused” widgets, meaning the currently focused widget
and that widget’s ancestors. “Ancestor” can mean either DOM ancestor
(ex: TextBox –> Form), or a logical parent-child relationship (ex:
TooltipDialog –> DropDownButton).
For example, if focus is on a TextBox inside a TabContainer inside a
TooltipDialog triggered by a DropDownButton, the stack would be
TextBox –> ContentPane –> TabContainer –> TooltipDialog –>
DropDownButton.
The activeStack[] parameter indicates this set of widgets, and an app
can monitor changes to activeStack[] by:
require([ "dijit/focus" ], function(focusUtil){
focusUtil.watch("activeStack", function(name, oldValue, newValue){
console.log("Focused widget + ancestors: ", newValue.join(", "));
});
});
the question in title has a different answer than the one in the descriptions.
there are two ways achieving the question in the title, by using dojo's focusUtil ("dijit/focus"). both ways give you something that you could find the widget using it and the dijit's registry ("dijit/registry").
focusUtil.curNode: gives you the DOM Node that currently has the focus. the function below, you could get the widget reference.
function getWidgetByNode(node){
var result;
while (!result && node){
result = registry.byNode(node);
if (node.parentElement)
node = node.parentElement;
else
node = null;
}
return result;
}
var focusedWidget = getWidgetByNode(focusUtil.curNode)
focusUtil.activeStack: gives you an array of the widgets (parent to child) that has the focus. so the last item in the array is the direct widget which has the focus. index values are widget ids, so you should get the widget by the following code
var focusedWidgetId = focusUtil.activeStack[focusUtil.activeStack.length-1];
var focusedWidget = registry.byId(focusedWidgetId);
now if you want to know if the currently focused widget is some specific one, it depends on what you have in hands from that specific widget:
widget itself: like the return values of above samples. now you have to compare if these are the same thing. you can not compare two widget objects using the == operator. you could compare their ids like this:
myWidget.id == focusedWidget.id
widget's id: this way you just easily get the id of the current node from focusUtil and compare it with the id you have liek this:
myWidgetId == focusedWidgetId
references:
http://dojotoolkit.org/reference-guide/1.9/dijit/focus.html
http://dojotoolkit.org/reference-guide/1.9/dijit/registry.html
require([ "dijit/focus" ], function(focusUtil){
var activeElement = focusUtil.curNode; // returns null if there is no focused element
});
check blow url here you can see some examples
http://dojotoolkit.org/reference-guide/1.8/dijit/focus.html#dijit-focus
a) For dojo 1.6: call dijit.getFocus(). This will return an object containing the currently focused dom node, among other things (selected text, etc.). To get the corresponding widget, simply do:
var activeElement = dijit.getEnclosingWidget(dijit.getFocus().node);
This is the full reference for dijit.getFocus(), from the source code:
// summary:
// Called as getFocus(), this returns an Object showing the current focus
// and selected text.
//
// Called as getFocus(widget), where widget is a (widget representing) a button
// that was just pressed, it returns where focus was before that button
// was pressed. (Pressing the button may have either shifted focus to the button,
// or removed focus altogether.) In this case the selected text is not returned,
// since it can't be accurately determined.
//
// menu: dijit._Widget or {domNode: DomNode} structure
// The button that was just pressed. If focus has disappeared or moved
// to this button, returns the previous focus. In this case the bookmark
// information is already lost, and null is returned.
//
// openedForWindow:
// iframe in which menu was opened
//
// returns:
// A handle to restore focus/selection, to be passed to `dijit.focus`.
b) For dojo 1.7 and up, use dijit/focus:
require([ "dijit/focus" ], function(focusUtil) {
var activeElement = focusUtil.curNode; // returns null if there is no focused element
});
I can markup a Heading or ListItem to have a moveTo attribute and that transition works perfectly.
Is there a way perform a transition to a named view programmatically say, on a button click?
Somewhere on the net I found below code, but its not working. I need something similar to this -
function moveTo(){
var w = dijit.byId('currentView');
w.performTransition('#newView',1,"fade",null);
}
This code sample registers an onclick event handler on a button with the id "ButtonID". After pressing the button, a lookup in the dijit registry will be performed to find the displayed view.
You can call the function performTransition(...) on any dojox.mobile.View.
require(["dijit/registry"], function(registry) {
dojo.ready(function() {
// Button Listener
registry.byId("ButtonID").on("click", function(){
var oldView = dijit.registry.byId("ID_View1");
oldView.performTransition("ID_View2", 1, "slide", null);
});
});
But:
Changing "moveTo" parameters programmatically is much more difficult than performing transitions between views. You have to do some nasty things to override the moveTo Attribute of a widget like for example a Backbutton in a dojox.mobile.Heading
var heading1 = dijit.registry.byId("ID_Heading");
heading1.destroyDescendants();
heading1.moveTo = viewId;
heading1.backButton = false;
heading1._setBackAttr("Zurück");
enter code herevar text ='Fill' ;
if(value != undefined && value !=''){
text = Ext.Date.format(value,'Y-m-d');
}
return ' '+text+' '
this above code is link to a new page when clicking 'Fill' link . i need that 'Fill' link to be as a button. How do i define a button instead of a text as a link using extjs
The code is simple with JavaScript:
var btnLink = new Ext.Button({
text: 'Fill',
handler: function(){
//you can put here any controls
window.open("http://your-link-here.com", "_self")
}
});
This will act as href opening link on the same page, and if you want to open it on a new window you can try window.open(url) instead..
My implementation of LinkButton for ExtJS. It can be used as a link directly (set 'stopEvent' to false) or as a button (use subscription to 'click' event)
LinkButton for ExtJs
I have a GTK notebook with multiple tabs. Each tab label is a composite container containing, among other things, a button I want to use to close the tab. The button has a handler for the "clicked" signal.
When the signal is called, I get the button widget and "EventArgs" as a parameter.
I need to determine the page number based on the button widget, but myNotebook.PageNum(buttonWidget) always returns -1. I've even tried buttonWidget.Parent which is the HBox which contains the widget.
Any ideas on what I can do or what I am doing wrong?
One easy work around is to pass the page number to your button's Clicked event as you construct the buttons.
for (int page = 0; page < n; page++){
int the_page = page;
NotebookPage p = new NotebookPage ();
...
Button b = new Button ("Close page {0}", the_page);
b.Clicked += delegate {
Console.WriteLine ("Page={0}", the_page);
};
}
The "the_page" is important, as it is a new variable that will be captured by the delegate.