I've rendered the buttons to multiple Highcharts, but I need to know which button I click..
Example
API
Inside a callback this refers to the clicked button. You can also set its id if you use attr() method.
var custombutton = charts[i].renderer.button('button', 450, 10, function() {
// not working
alert(this.element.id);
}, null, hoverState, pressedState).attr({
id: 'button-' + i
}).add();
example: http://jsfiddle.net/kh5jY/9517/
Related
So I wanted to manipulate/customize UIkit confirm modal's styles on my own but I am not able to do it in angular
UIkit.modal.confirm('My message!', {
labels: {
cancel: 'No',
ok: 'Yes'
}
});
this i did but I wanna change the modal's background color, buttons color,font style,font color and I wanna make the confirm modal appear in the middle
I did things like adding 'cls' below the label object like
UIkit.modal.confirm('My message!', {
labels: {
cancel: 'Abort mission',
ok: 'Everthing is fine'
},
cls:'my-class'
});
and wrote a css for it in the corresponding css it didn't made a change
and i tried
var confirmBtn = document.querySelector('.uk-modal-footer .uk-button-primary'); confirmBtn.style.backgroundColor = '#ff0000'; var cancelBtn = document.querySelector('.uk-modal-footer .uk-button-default'); cancelBtn.style.backgroundColor = '#00ff00';
It's not working and also the 'promise' i.e. using of 'then' function is not working for the two buttons yes and no if I do any of these things
I'm developping an application and i want to open a large modal.
UIkit.modal.confirm('html content', function(){ myFunction() });
In this way it generates a default modal.
<div class="uk-modal-dialog" style="min-height:0;"><div>
But i want that generates to me a modal with 80% width or a large modal. like this for exemple :
<div class="uk-modal-dialog" style="min-height:0; width:80%"><div>
what i have to do?
Sorry for my english.
In UIKIT version 2 you can do this :
const $modal= UIkit.modal.confirm(COMBINEDMSGTEXT,
function () {
//ur costom code
}, {
labels: {
"Cancel": "Text",
"Ok": "Text"
}
});
//if you console log $modal you will notice you have access to selector and element
const el = $modal.element; // this will return the main selector with the class uk-open
el.children().css("width", "52%"); // the right div you need to target is actually a child element.
In UIKIT 3 , just use directly modal.$el and you will access the seletor wanted.
I have created a tab panel in extjs4.2 , and what i'm trying to do is access the values in the form of a tab while being in the other tab. For example the user is on tab A and have access to the values in tab B. How can access the other tab?
tabPanel = Ext.create('Ext.tab.Panel', {
region: 'center',
activeTab: 0,
autoScroll: true,
items: [
{
id:"panel_A",
title: "${tr.A}",
html: "<iframe src= '"+A_url +"' width='100%' height='100%' id='frm_A' name='frm_A' frameborder=0 />",
},{
id:"panel_B",
title: "${tr.B}",
//disabled:tabs_status,
//hidden:hidden,
html: "<iframe src='"+B_url +"' width='100%' height='100%' id='frm_B' name='frm_B' frameborder=0 />",
}]
});
viewport = new Ext.Viewport({
layout:'border',
items:[tabPanel]
});
In this part on a click of a button i'm able to access the current frame.
new Ext.Toolbar.Button({
id:"btn_show",
text: "${tr.Show}",
tooltip: "${tr.Show}",
handler: function(){view(frmid);}
}),
function view(frmid) {
var A_key = window.frames[frmid].RECORD.getKey();
/* var B_key = window.frames[...].RECORD.getField("HISTORY").getRealValue();*/
}
To select Ext.ComponentView you can use Ext.ComponentQuery.
Provides searching of Components within Ext.ComponentManager (globally) or a specific Ext.container.Container on the document with a similar syntax to a CSS selector. Returns Array of matching Components, or empty Array.
More about selectors for DOM Elements and ExtJS Components in this answer.
Basic example of how you can access another tab of a tabpanel:
Working fiddle
// If you button is child / parent button of a tabpanel its efficient to use down() / up() methods
// Since we get button component reference as listener function arguments we can select parent tabpanel component,
// and after it select child component panel (because panel is default xtype for tabpanel items and textfield after it
panelBTextFieldValue = button.up('tabpanel').down('panel[id=panel_B] textfield[name=panel_B_text_field]').getValue();
// If your button is somewhere else you can use Ext.ComponentQuery.query()
panelBTextFieldValue = Ext.ComponentQuery.query('tabpanel[id=myPanel] panel[id=panel_B] textfield[name=panel_B_text_field]').getValue();
// or just if selector textfield[name=panel_B_text_field] specific enought for whole your application
panelBTextFieldValue = Ext.ComponentQuery.query('textfield[name=panel_B_text_field]').getValue();
What i am trying to do is dynamically add container to panel on click of button.
1st instance of container gets added and can be seen in the panel.items.length
2nd instance onwards the panel.items.length doesn't change. but the panel can be seen in dom and on screen.
Just wanted to know why the panel.items.length is not increasing. Is it a bug?
Fiddler link https://fiddle.sencha.com/#fiddle/p3u
Check for the line :
console.log(qitems);
below debugger; it is set to questionsblock.items.length that i am talking about.
Remove the itemId from QuestionTemplate and remove renderTo from the new instance.
Your click handler should look like this:
listeners: {
'click': function(button) {
var questionPanel = button.up('form').down('#questionsblock'),
qitems = questionPanel.items.length,
questiontemplate = Ext.create('QuestionTemplate', {
qid: qitems,
questiontype: 'text'
});
console.log(qitems);
questionPanel.add(questiontemplate);
questionPanel.doLayout();
}
}
Check this fiddle: https://fiddle.sencha.com/#fiddle/p47
Is there a way to revert/reset the edited row in the dojo-dgrid ?
I can see the grid.revert() which does clear the dirty items and calls the refresh method, which will refresh the whole grid. I don't want this whole grid-refresh.
Is it possible to reset/revert only that single edited row, upon clicking a Revert/Cancel Icon on the Actions-column (which will be the last column in the grid as mentioned here and here)
If you're wrapping your store with Observable, you can use notify() to update a single row.
For example, you can create the following code for onClick event of your Revert/Cancel button:
renderCell: function(object, data, cell){
var btnRevert = new Button({
label: "Revert",
// ...
onClick: function(evt){
var dirty = that.grid.dirty,
id = object.id;
if(dirty.hasOwnProperty(id)){
// remove dirty data
delete dirty[id];
// ..and notify the store to update
myStore.notify(object, object.id);
}
}
}, cell.appendChild(put("div")) );
return btnRevert;
}
Here is a jsfiddle with an example: revert example