I am stuck with one problem with one problem in stop the window from closing using ESC button.
The window gets closed as soon as I click the ESC button from my keyboard. I want the window should not close, instead it should prompt a message box asking 'YOU REALLY WANTS TO close' with two button yes or cancel
If person click yes button the the window should destroy and else the window should be as it is.
but don't know why the window is getting close on ESC press.
I am prompting message as the user click the esc button using below code
listeners: {
show : function(win) {
Ext.create('Ext.util.KeyNav', win.getEl(), {
"esc" : function(e){
alert('hi.. closing');
win.hide();
},
scope: win
});
}
}
now I want the message box to be appeared and based on the person answer things to be happend.
any help ??
There is very convenient onEsc function in window's config. Use it this way:
onEsc: function() {
var me = this;
Ext.Msg.confirm(
'Closing confirmation',
'YOU REALLY WANTS TO close',
function(btn) {
if (btn === 'yes')
me.hide();
}
);
},
Here is live example.
Try using the beforeclose event.
Related
I have a v-combobox component in my app. I have it to where I can type something in the input then #blur a check happens to see if the typed Item exists in the list or not. If it does not exist a modal opens up asking the user if they want to add it to the list.
I have it if the user clicks yes it is added to the list the problem I am having is if they click cancel and the dialog is closed focus should go back to the combobx input
When I try and set the focus I get the blue animation bar but no input cursor in the input of the combo box
I have set up a codesandbox example of my issue
CodeSandbox Example of Issue
I was wondering If i could get some help or pointers on why Im not getting the full focus to be able to type after clicking cancel on the dialog .
You can try to use $nextTick like this:
closeConfirmationDialog() {
// const comboBox = this.$refs[this.forInput];
// comboBox.$el.querySelector("input").focus();
this.showDialog = false;
this.cancelDialog = true;
this.$nextTick(() => {
this.$refs.categories.focus();
});
}
I'm utilizing <v-dialog> component to display a form for my web app. I want to implement an unsaved changes dialog to popup when the user aborts their changes without saving and either close/keep the dialog open depending on a button press. Unfortunately, I'm having a bunch of trouble figuring out exactly how to prevent the default closing actions done by the framework.
So from what I can tell, you can close a dialog 3 different ways:
Setting the v-model property to false.
Clicking outside of the v-dialog modal unless the persistent prop is set to true.
Pressing the escape key.
Let's not worry about the 2nd way to close the dialog I referenced above and assume it is set to true.
Approach #1:
My first approach was to only allow the user to exit the dialog if they hit a cancel button on the form. I quickly hit a snag when I tried to disable the use of the escape button.
Here's what I have tried so far: In my App.vue mounted function:
mounted () {
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
console.log('The escape key was pressed.')
e.preventDefault()
e.returnValue = false
e.stopImmediatePropagation()
}
})
}
This should work. The log message is displayed in the console, but the dialog still closes after the escape key is pressed. I know I should be using key codes here, but this is for readabilities sake. I've also tried keyup and keypress with no success. There has to be something wonky happening in either the Vue.js or Vuetify framework that's messing this up.
Approach #2:
After I failed miserably trying to disable the escape key, I had to try something different. I tried adding this code inside the watch function to try and keep the dialog open if they cancelled:
dialog (val) {
if (val) {
console.log('Dialog is true')
} else if (!val && !confirm('Unsaved changes, do you still want to exit?')) {
console.log('User Wants to Keep Dialog Open')
this.dialog = true
} else {
console.log('Dialog is False')
this.close()
}
}
When I try and close the dialog, the confirm message pops up, and I hit the cancel button. Then, for some reason, the confirm dialog opens again. So, I hit cancel again, then the dialog dismisses like nothing ever happened. Here's what the console reads:
User Wants to Keep Dialog Open
Dialog is true
User Wants to Keep Dialog Open
Dialog is true
I understand why the dialog watch method is being called again, what I don't understand is why the confirm dialog is showing again. That code should never be executing after cancelling the confirm message the first time. The log message shows that there's no way that code should be executing again. Something must be happening behind the scenes that I don't realize.
Anyone have experience with preventing the v-dialog component from closing? Or any help with my two approaches? Thanks in advance.
It's a property on the dialog:
<v-dialog persistent
That will force them to keep it open unless you call the closure programatically by toggling the model.
i'm using jquery datatable with responsive
the (+) responsive sign show correct when screen size decrease
i had event row click on the table
$('#datatables tbody').on('click', 'tr', function (e) {//Code});
My problem that the responsive button fires both function
the responsive (Default) function that expand the row
and my row click event
is there a way to Prevent that
Edit : Same happens with any attached button on the row if the button is clicked it execute both button click event and row click event
I fixed the problem with UGLY workaround
first i added empty td index 0 so that the responsive button show on it
second i changed the event from tr click to td click
then check for the td index
$('#datatables tbody').on('click', 'td', function (e) {
var tdIndex = this.cellIndex;
if (tdIndex == 0)
{//For Responsive Click leave Empty
}
else { //Normal Code}
i still waiting a better solution
Try https://datatables.net/extensions/responsive/examples/child-rows/whole-row-control.html
if that does not help please assign a class to the column like:
"columns": [
{ "data": "MyColumn", "className": "toggle-btn-add" }
]
and call it like:
$('#datatables tbody').on('click', 'td.toggle-btn-add', function (e) {//Code});
Hope this helps
I have a button in acrobat form with below script in the Mouse Down.
try
{
app.saveAs("/c/temp/11.pdf");
}
catch(err)
{
app.alert(err.message);
}
when I click on the button I get message box says
app.saveAs is not a function.
What is wrong?
You want doc.saveAs() See tutorial: https://acrobatusers.com/tutorials/how-save-pdf-acrobat-javascript
I want to open a dialog box when clicking on a cell.I am using dgrid/editor.
editor({field: "column1",label: "col1",editor: "text",editOn: "click"})
I am getting text box when using the above code.I want a dialog box.Please tell me how to get a dialog box.I am using OndemandGrid with JSONReststore to display the grid.
You don't need use editor to trigger a dialog, use click event on a cell is ok:
var grid = new declare([OnDemandGrid,Keyboard, Selection])({
store: Observable(new Memory({data: []}))
}, yourGridConatiner);
grid.on(".dgrid-content .dgrid-cell:click", function (evt) {
var cell = grid.cell(evt);
var data = cell.row.data;
/* your dialog creation at here, for example like below */
var dlg = new Dialog({
title: "Dialog",
className:"dialogclass",
content: dlgDiv //you need create this div using dojo.create or put-selector
});
dlg.show();
});
If you want show a pointer while mouse over that cell, you can style it at renderCell method with "cursor:pointer"
From the wiki:
editor - The type of component to use for editors in this column; either a string specifying a type of standard HTML input to create, or a Dijit widget constructor to instantiate.
You could provide (to editor) a button that pops up a dialog when clicked, but that would probably mean two clicks to edit a cell: one to focus or enter edit mode or otherwise get the button to appear and one to actually click the button.
You could also not bother with the editor plugin and attach a click event handler to the cell and pop up a dialog from there. You would have to manually save the changes back to your store if you went that route.
If I understand you right - you could try something like this:
function cellFormatter1(value) {
//output html-code to open your popup - ie. using value (of cell)
}
......
{field: "column1",label: "col1", formatter: cellFormatter1 }