I using the following:
var list = [];
lin = new gui.AWindow();
Len = list.length;
lin.add(Len+1);
list[Len] = "close button";
multiple times to generate new rows of buttons in the window. I want the event handlers when the button is clicked to give its row number.
qx.Class.define("gui.AWindow",
{
extend : qx.ui.window.Window,
events :
{
"execute" : "qx.event.type.Data"
},
members :
{
add : function()
{
closeButton = new qx.ui.toolbar.Button("CLOSE");
lin.add(closeButton,{row: Pos+1, column: 0});
closeButton.addListener("execute", function(e)
{
this.debug(e.getData());
}, this);
}
},
construct : function()
{
this.base(arguments, "gui");
// hide the window buttons
this.setShowClose(false);
this.setShowMaximize(false);
this.setShowMinimize(false);
//adjust size
this.setWidth(250);
this.setHeight(300);
var layout = new qx.ui.layout.Grid(0, 0);
this.setLayout(layout);
}
});
If you use a qx.data.Array instead of using a standard JS list then you can use the indexOf method to find the index of the button in the array.
In your event handler you can use qx.event.type.Event.getTarget() method to get a reference to the widget that fired the event and pass that to the indexOf method.
Related
Anyone please tell me how can i select next consecutive row from first page to second page of my kendo grid and reverse back to the previous page ? Kendo Grid API just only gives me information on 'select' and from there I have no clue at all how to implement my desired selection. What I have now is only selecting the row of the selected/active cell. Any insight/references are also appreciated. So far I haven't came across with any examples or article.
var data = $("#grid").data('kendoGrid');
var arrows = [38,40];
data.table.on("keydown", function (e) {
if (arrows.indexOf(e.keyCode) >= 0) {
setTimeout(function () {
data.clearSelection();
data.select($("#grid_active_cell").closest("tr"));
},1);
}
});
http://dojo.telerik.com/eSUQO
var data = $("#grid").data('kendoGrid');
var arrows = [38,40];
var navrow_uid; ** add this tracking variable;
data.table.on("keydown", function (e) {
if (arrows.indexOf(e.keyCode) >= 0) {
setTimeout(function () {
data.clearSelection();
// break this up
// data.select($("#grid_active_cell").closest("tr"));
// fetch next row uid and compare to tracker
var nextrow = $("#grid_active_cell").closest("tr");
var uid = nextrow.data('uid');
if (navrow_uid == uid ) {
console.log("last navigable row");
data.dataSource.page(1+data.dataSource.page());
// best option here would be to set auto-page flag for databound event handler
} else {
data.select(nextrow);
navrow_uid = uid;
}
},1);
}
});
You will want to add a grid data bound handler, and have that check the aut-page flag to see if you need to select first or last row of page.
I am using openlayers 3. From the values contained in a vector GeoJSON, I want to fill a dropdown menu. When selecting a value from the dropdown menu, I want to zoom in on the entity.
My problem now is that I want to generate my HTML from the attributes of my GeoJSON. So I tried this simple code but it doesn't work :
var menu = document.getElementById('menuDropDown');
vector2.getSource().forEachFeature(function() {
menu.innerHTML = feature.get('NOM').join(', ');
});
EDIT:
I'm able to populate a dropdown menu from a list:
var list = ['a','b','c'];
var mySelect = $('#mySelect');
$.each(list, function(val, text) {
mySelect.append(
$('<option></option>').val(val).html(text)
);
});
What i want to do it's to populate this list from the attribute of my vector
So i try this:
// vector2 it's a GeoJSON who is integrate on my map
vector2.getSource().getFeatures().forEachFeature(function(feature) {
list.push(feature.get('NOM'));
});
Firstly I'm assuming you have to pass some parameter to your callback:
vector2.getSource().forEachFeature(function(feature) {
Then you can append an item to a dropdown like so:
var item = document.createElement('option');
item.setAttribute('value', feature.get('NOM'));
var textNode = document.createTextNode(feature.get('NOM'));
item.appendChild(textNode)
menu.appendChild(item);
All together:
var menu = document.getElementById('menuDropDown');
vector2.getSource().forEachFeature(function(feature) {
var item = document.createElement('option');
item.setAttribute('value', feature.get('NOM'));
var textNode = document.createTextNode(feature.get('NOM'));
item.appendChild(textNode)
menu.appendChild(item);
});
I have resolve my problem:
vector2.getSource().on('change', function(evt){
var source = evt.target;
var list = [];
source.forEachFeature(function(feature) {
list.push(feature.get('NOM'));
});
// console.log("Ecrit moi les noms : " + list);
Thanks you to those who took the time to respond
I'm desesperatly seeking for a way to fill in the compose message when it opens, in a boostraped (restartless) TB add-on.
This is something that I did in my non-bootstraped add-on RemindIt
Thanks to Superjos I was able to manage the different listeners, and get the compose message filled with my custom message when it opened.
But... this works only for new (non recycled) windows. If I close a compose window, then click on "new message", it is recycled (I guess) and the "load" event is not fired.
I tried different tricks (see for example onComposeInit2), but at the end, I'm not able to alter compose message for non new windows, even if it looks like my addon is calling the editing method (this is what one can see in the log).
Any ideas ?
See my test/bootstrap.js code :
function log(s){
Components.classes["#mozilla.org/consoleservice;1"]
.getService(Components.interfaces.nsIConsoleService).logStringMessage("test: "+s);
}
// Thanks (a lot ! ) to Superjos :
// https://stackoverflow.com/questions/25989864/get-sender-and-recipients-in-thunderbird-extension-upon-sending-message
var winListener={
onOpenWindow: function(win){
compose=win.docShell.
QueryInterface(Components.interfaces.nsIInterfaceRequestor).
getInterface(Components.interfaces.nsIDOMWindow);
compose.addEventListener('compose-window-init', winListener.onComposeInit, true);
},
onComposeInit: function(event){
var document=event.currentTarget.document;
var edit=document.getElementById("content-frame");
edit.addEventListener("load",winListener.onComposeLoad,true);
log("compose init "+event.currentTarget);
event.currentTarget.removeEventListener(event.type,winListener.onComposeInit , true);
},
onComposeLoad: function(event){
var edit=event.currentTarget;
var editor=edit.getHTMLEditor(edit.contentWindow);
log("compose load");
winListener.alterMessage(editor);
},
alterMessage: function(editor){
var msg="Hello<br>";
editor.insertHTML(msg);
log("alter message "+editor);
},
onComposeInit2: function(event){
var document=event.currentTarget.document;
var edit=document.getElementById("content-frame");
edit.addEventListener("load",winListener.onComposeLoad,true);
log("compose init "+event.currentTarget);
var editor=edit.getHTMLEditor(edit.contentWindow);
if( editor!=null ){
// the editor is ready, remove load event listener
edit.removeEventListener("load",winListener.onComposeLoad,true);
// and call the method to alter message
winListener.alterMessage(editor);
}
//edit.addEventListener("focus",winListener.onFocus,true);
event.currentTarget.removeEventListener(event.type,winListener.onComposeInit2 , true);
},
/*
onFocus: function(event){
event.currentTarget.removeEventListener("focus",winListener.onFocus,true);
var edit=event.currentTarget;
var editor=edit.getHTMLEditor(edit.contentWindow);
winListener.alterMessage(editor);
log("focus");
},
onComposeClose: function(event){
var document=event.currentTarget.document;
var edit=document.getElementById("content-frame");
edit.addEventListener("focus",winListener.onFocus,true);
log("close");
}
*/
}
function startup(aData, aReason) {
log("startup");
var windowMediator = Components.classes['#mozilla.org/appshell/window-mediator;1'].
getService(Components.interfaces.nsIWindowMediator);
windowMediator.addListener(winListener);
}
function shutdown(aData, aReason) {
log("shutdown");
var windowMediator = Components.classes['#mozilla.org/appshell/window-mediator;1'].getService(Components.interfaces.nsIWindowMediator);
windowMediator.removeListener(winListener);
}
function install(aData, aReason) {
log("install");
}
function uninstall(aData, aReason) {
log("uninstall");
}
I found the solution from this http://forums.mozillazine.org/viewtopic.php?f=19&t=450474
There is a compose-window-reopen event that is fired when the window is reopen.
I dont know why the blur method is not receiving the passed data when using on and a selector.
Here is the code, just foucs any input, and press tab, and you will see that the isTab parameter is not being setted. Why?
Fiddle:
http://jsfiddle.net/fz5yA/9/
Html:
<div id="Container">
</div>
JavaScript:
var Container = $("#Container");
Container.on({
keydown : function(e){
var Item = $(this);
console.log(e.keyCode);
if(e.keyCode == 9) {
Item.trigger("blur",[true]);
return false;
}
},
blur : function(e, isTab)
{
console.log("IsTab:" + isTab);
}},".Item");
for(var i = 0 ; i < 10 ; i++)
{
Container.append("<input class='Item'/>");
Container.append("<br/>");
}
The system generated blur event just has one argument, not two. There is no isTab argument passed to that event handler in the normal way that the system creates that event. You can see that in the jQuery doc.
If you change the event name of your manually triggered event to something that isn't the normal blur event and you fix the way you are passing the argument in .trigger(), then the extra argument will work. Change to this and you will see the extra argument:
Container.on({
keydown : function(e){
var Item = $(this);
console.log(e.keyCode);
if(e.keyCode == 9) {
console.log("aaa");
Item.trigger("myEvent", true); // Changed event name and fixed the syntax in this line
return false;
}
},
myEvent : function(e, isTab) // Changed event name here
{
console.log("IsTab:" + isTab);
}},".Item");
Demo here: http://jsfiddle.net/jfriend00/fz5yA/17/
How can I create a rotator with "FormCode" mode while being able to start that rotator automatically when the page loads? In other words, to start the rotator automatically while enabling end user to stop/start/move next/move back.
I need a complete sample code for the call.
I've used the following JavaScript/JQuery code for FormCode management:
<script type ="text/javascript">
//
function
startRotator(clickedButton, rotator, direction)
{
if
(!rotator.autoIntervalID)
{
refreshButtonsState(clickedButton, rotator);
rotator.autoIntervalID = window.setInterval(
function
()
{
rotator.showNext(direction);
}, rotator.get_frameDuration());
}
}
function
stopRotator(clickedButton, rotator)
{
if
(rotator.autoIntervalID)
{
refreshButtonsState(clickedButton, rotator)
window.clearInterval(rotator.autoIntervalID);
rotator.autoIntervalID =
null
}
}
function
showNextItem(clickedButton, rotator, direction)
{
rotator.showNext(direction);
refreshButtonsState(clickedButton, rotator);
}
// Refreshes the Stop and Start buttons
function
refreshButtonsState(clickedButton, rotator)
{
var
jQueryObject = $telerik.$;
var className = jQueryObject(clickedButton).attr("class"
);
switch
(className)
{
case "start"
:
{
// Start button is clicked
jQueryObject(clickedButton).removeClass();
jQueryObject(clickedButton).addClass(
"startSelected"
);
// Find the stop button. stopButton is a jQuery object
var stopButton = findSiblingButtonByClassName(clickedButton, "stopSelected"
);
if
(stopButton)
{
// Changes the image of the stop button
stopButton.removeClass();
stopButton.addClass(
"stop"
);
}
}
break
;
case "stop"
:
{
// Stop button is clicked
jQueryObject(clickedButton).removeClass();
jQueryObject(clickedButton).addClass(
"stopSelected"
);
// Find the start button. startButton is a jQuery object
var startButton = findSiblingButtonByClassName(clickedButton, "startSelected"
);
if
(startButton)
{
// Changes the image of the start button
startButton.removeClass();
startButton.addClass(
"start"
);
}
}
break
;
}
}
// Finds a button by its className. Returns a jQuery object
function
findSiblingButtonByClassName(buttonInstance, className)
{
var
jQuery = $telerik.$;
var ulElement = jQuery(buttonInstance).parent().parent();
// get the UL element
var allLiElements = jQuery("li", ulElement);
// jQuery selector to find all LI elements
for (var
i = 0; i < allLiElements.length; i++)
{
var
currentLi = allLiElements[i];
var currentAnchor = jQuery("A:first", currentLi);
// Find the Anchor tag
if
(currentAnchor.hasClass(className))
{
return
currentAnchor;
}
}
}
//]]>
And the following code for the calls:
<
a href="#" onclick="stopRotator(this, $find('<%= MyRotator.ClientID %>
')); return false;"
class="stopSelected" title="Stop">Stop
'), Telerik.Web.UI.RotatorScrollDirection.Left); return false;"
class="start" title="Start">Start
However, I cannot start the rotator on the page load. Tried to use this code in the in the MyRotator_DataBoud event, but did not work either:
protected void rrMyRotator_DataBound(object sender, EventArgs
e)
{
Page.RegisterClientScriptBlock(
"MyScript", " startRotator(this, $find('<%= MyRotator.ClientID %>'), Telerik.Web.UI.RotatorScrollDirection.Left);"
);
}
There are a couple of examples available in the Telerik online demos for this functionality and they have code you can use. See http://demos.telerik.com/aspnet-ajax/rotator/examples/clientapicontrol/defaultcs.aspx and http://demos.telerik.com/aspnet-ajax/button/examples/slideshow/defaultcs.aspx