I have added a button to a tab panel in the center region by calling
var add = tabSelection.addButton({
id : 'add',
text : 'Add',
hidden : true,
tooltip : 'Please highlight the correct value and click Add to create new contact',
handler : addContact
});
There are two radio buttons in the west region in an accordion layout, labeled 'internal' and 'external'. I want the tool tip to be changed dynamically by capturing the radio button click.
I am able to capture the radio button click and when I set the tooltip of the button accordingly,
add.setToolTip('Please highlight the correct value and click Add to create new internalcontact'); if internal client is clicked.
add.setToolTip('Please highlight the correct value and click Add to create new external contact'); when external is clicked.
You need to initialise tooltips for it to work:
Ext.QuickTips.init();
And use qtip instead of tooltip.
Also worked for me (on ExtJS 4.1):
Ext.getCmp('buttonId').setTooltip('Tooltip you want to insert');
Another solution without using id, for e.g. with a button tooltip:
var prev_button = new Ext.button.Button({
cls: 'prevButton',
listeners: {
mouseover: function(btn) {
btn.setTooltip('1 ' + granularity.getValue()
+ ' ' + _('before'));
}
}
});
Related
I am adding UIelement by using following code
legendBox = chart[unique].addUIElement(UILayoutBuilders.Column.setBackground( UIBackgrounds.Rectangle ))
.setPosition({ x: 0, y: 100 })
.setOrigin(UIOrigins.LeftTop)
Right now I am able to add series to it by following code
entry = legendBox.addElement(UIElementBuilders.CheckBox);
series.attach(entry);
Instead , can I add the button with some value ? On clicking of that button I need call an function with that value.
For example if I add button with value
<button val="22">Click<button>
Now when i click that button , I need a callback function returning 22.Is it possible ?
In your case, the entry variable is of type UICheckBox.
To apply a custom action when clicking it, the onSwitch method should do it.
series.attach(entry); is only required if you want the button to hide/restore the series, you can remove this code if you want that only your custom action is triggered.
entry = legendBox.addElement(UIElementBuilders.CheckBox)
entry.onSwitch((_, checked) => {
console.log('clicked', checked)
})
See also UIElementBuilders.ButtonBox if you want to add automatic bounce-back.
entry = legendBox.addElement(UIElementBuilders.ButtonBox)
entry.onSwitch((_, checked) => {
if (checked) {
console.log('button pressed')
}
})
$scope.ctrlstartDragging = function(id) {
var book = document.getElementById(id);
var domRect = book.getBoundingClientRect();
book.style.position = 'fixed';
book.style.top = domRect.top + 'px';
book.style.left = domRect.left + 'px';
book.style.width=(domRect.width) + 'px';
};
$scope.ctrlendDragging = function(id) {
var book = document.getElementById(id);
book.style.position = 'relative';
book.style.top = 'unset';
book.style.left = 'unset';
book.style.width='unset';
};
when I clear the input search after a filter is applied on external events
the last droped event into the calendar goes up to the top (as if $scope.ctrlstartDragging = function(id) is still applied immediately and automatically on it(the last droped event into the calendar).
to reproduce (link codePen at bottom):
1- drag and drop into the calendar event 4
2- look for 111 event from the input search
3- drag and drop into the calendar the 111 event found by the filter
4- clear the filter manually or by clicking on the clear button
as you can see the last droped into the calendar event 111 goes up to the top.
which should not to be it should be re-integrate within the list.
The ondragstart => $scope.ctrlstartDragging = function(id) still operating on that event and
The ondragend => $scope.ctrlendDragging = function(id) is unfired.
and to see more the problem :
1- refresh the browser
2- uncheck Remove after a drag box
3- drag and drop any event into the calendar
as you can see the last droped event into the calendar goes up to the top of the external events box.
my question is how to fire ctrlendDragging and unset/reset (top left width css styles) of a book to revert to their first primary css styles before we operate any dragging or moving ?
codePen
related:
SO Q1
SO Q2
many thanks.
drop: function() {
// reset
var reccupuredIndexForTitle=$(this).attr('id');
$scope.ctrlendDragging(reccupuredIndexForTitle);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
I made that as a workaround but I didn't see why ondragend don't fire and hence don't triggers $scope.ctrlendDragging
Working CodePen
After loading The heremap i set markers with custom image on it. Then After click in the marker i'm getting the bubble popup. I want to change the marker icon when click on it. How can i change the marker icon when click on it?
Code for showing bubble after click the marker as given below.
map.addObject(group);
// add 'tap' event listener, that opens info bubble, to the group
group.addEventListener('tap', function (evt) {
// event target is the marker itself, group is a parent event target
// for all objects that it contains
var bubble = new H.ui.InfoBubble(evt.target.getPosition(), {
// read custom data
content: evt.target.getData()
});
// show info bubble
ui.addBubble(bubble);
}, false);
In my application I'm changing the original color of the marker when it is clicked. Have you tried using a markerTemplate, meaning a variable where you store the svg for your marker as a string?
var markerTemplate = '<svg xmlns="http://www.w3.org/2000/svg" width="28px" height="36px">... fill="${COLOR}"/></svg>'
You can then use e.g. fill="${COLOR}" in this string and in your EventListner replace this placeholder with a new color markerTemplate.replace('${COLOR}', 'rgba(231, 0, 0, 0.7)');
Hope this helps
I am developing an web application. In this i provided a functionality means "autocomplete textbox". In this control, I need to show up 4 columns whenever user press keys in textbox, i need to collect these keys and send it to the service which will give us result as xml. then i convert xml to dataset and binded with datagird. for this i used jquery. after the result displayed ( i mean the result in datagrid which is placed in div), then i need to hide the div when the user clicks outside of the div or press escape key...
for this i used onblur event. but, when i click on the result then, i could not fire the click event for the div..
here is my jquery events...
function showList() {
if(document.getElementById("txt1").value.length > 3) {
$("#divList").hide("slow");
$("#divLoading").show();
$.ajax({
type : "POST",
url : "ajaxServerPage.aspx?streetname=" + document.getElementById("txt1").value,
success : function(responseText) {
$("#divLoading").hide();
$("#divList").show();
$('#divList').html(responseText);
//add button click events for buttons which are placed in table
$("#dataGridStreet .rowStyle").click(function(e) {
//Open_ModifyPopup($(this).attr("id"));
clickedRow($(this));
});
} // function(responseText)
});
}
}
How should I do this?
Thanks
Why reinvent the wheel: How about using a plugin to do it for you?
Is there a way to set a button inside the dojo dialog box and have it close the dialog box it is residing in?
Putting dijits inside of dijits doesn't work, and I can't beleive there isn't a way to do that.
Sure you can put a dijit widget inside another widget. And in a standard Dojo release there's even a test case Dijit Dialog focus & destroy included that demonstrates closing dialog with a button inside of it. Here's the relevant part:
var btn = new dijit.form.Button({ label: "Close" });
dlg.containerNode.appendChild(btn.domNode);
dojo.connect(btn, "onClick", function(){
console.log("destroying, while visible");
dlg.destroy();
});
Note, since Dojo 1.7 onwards, the connect module has been replaced with dojo/on. The equivalent of the above is therefore:
require(['dojo/on', 'dijit/form/Button'], function (on, Button) {
// etc
var btn = new Button({ label: "Close" });
dlg.containerNode.appendChild(btn.domNode);
on(btn, "onClick", function(){
console.log("destroying, while visible");
dlg.destroy();
});
});