I have a TextFiled component, where add clear trigger. like this one:
this.config.triggers = {
clear: {
cls : (Ext.baseCSSPrefix + 'form-clear-trigger'),
handler : function() {
this.setValue();
}
}
}
...
So, and I handle an event focus
this.text= Ext.create('TwinText', {
width: 400,
emptyText: 'dddd',
listeners: {
scope: this,
focus: this.show,
},
editable : false
});
Now, when I click on trigger clean, the focus event was fired. How can I suspend this?
You can add the click event to your Textfield component instead of using focus.
Ex. in the TwinText definition add:
initEvents: function () {
this.callParent(arguments);
this.mon(this.inputEl, 'click', this.onClick, this);
},
onClick: function (e) {
this.fireEvent('click', this, e);
}
then listen for the "click" event instead of "focus".
Related
I am dabbling with customerElements:
customElements.define('state-button',
class extends HTMLElement {
constructor(...args) {
super(...args);
this.state = 0;
let o=this;
this.t = {
0:"<button class='btn btn-info'>"+(o.innerHTML)+"</button>",
1:"<button class='btn btn-warning'>Are you sure???</button>",
2:"<button class='btn btn-danger'>Last chance....</button>"
};
this.addEventListener("click", this.handleClick,{capture:false});
}
connectedCallback() {
this.setAttribute("data-toggle", "modal");
this.setAttribute("data-target", "#confirmModal");
this.setAttribute("data-jc_id", this.getAttribute("data-id"));
this.render();
}
render() {
console.debug("state", this.state);
this.innerHTML=this.t[this.state];
}
handleClick(event) {
this.state = (this.state+1) % 3;
this.render();
}
setState(state) {
this.state = state;
this.render();
}
}
);
This is just me testing how it works. The button is supposed to change state AND open modal Bootstrap4 window. But the modal never gets triggered.
If I add super.click(); inside handleClick() it will change state twice (as the event is triggered again).
If I do not addEventListener the Bootstrap 4 modal window triggers just fine. So it appears my event is stopping other events.
return true; at the end of handleClick has no effect.
What am I missing?
I found a way around it to the same effect. But I am sure it is not the correct way of doing it.
When I add the eventlistener this.addEventListener("click", this.handleClick,{once:true}); it will be removed once triggered. This will cause the bootstrap 4 modal window to trigger as well.
Then at the end of handleClick I just add the click event as above again.
As I said - it is a workaround.
I am still interested in why my event stops other click events....
I want to change ok cancel option of bootbox to yes & no. I have tried my solutions but still show the default one. Here is my button.
<button class="btn btn-primary but-style-left" ng-click="saveForLaterClick(this)">{{ResourceData.Cancel}}</button>
This is my .js file code
$scope.saveForLaterClick = function (e) {
confirmClaimMessage($scope.ResourceData.RenewalProductAreYouSureWantToContinueText, function (e) {
if (e) {
window.open("#/Renewal", "_self");
}
});
}
function confirmClaimMessage(text, callback) {
bootbox.confirm(text, function (e) {
callback(e);
});
I am expecting this
bootbox.confirm({
message: $scope.ResourceData.RenewalProductAreYouSureWantToContinueText,
buttons: {
confirm: {
label: $scope.ResourceData.PoppupYesText
},
cancel: {
label: $scope.ResourceData.PoppupNoText
}
},
callback: function (e) {
if (e) {
window.open("#/Renewal", "_self");
}
}
});
Please help me!
I have this tag:
<a ui-sref="MyModule">My Module</a>
When I click on the link, this will be executed:
$scope.$on("$locationChangeStart", function (event) {
if (!confirm('You have unsaved changes, continue?')) {
event.preventDefault();
}
});
But still my view will switch to MyModule interface.
try using this:-
$scope.$on("$stateChangeStart", function (event) {
if (!confirm('You have unsaved changes, continue?')) {
event.preventDefault();
}
});
You are using UI-router. which is state based.
I need to come out from page after entering escape button , when the page takes much time for loading. I need to exit that loading when it takes longer time
For loading I am using
dispatcher.dispatch({
type:'Loader',
showLoader: true
})
You will have to add an event listener i.e. keyup or keydown. When any key is pressed, just compare its keyCode with escape button's keycode i.e. 27.
In react, event listener should be added in componentDidMount and removed in componentWillUnmount.
Here is an example. You can modify logic according to your requirements.
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
loading: true,
}
this.onKeyUp = this.onKeyUp.bind(this)
}
componentDidMount() {
document.body.addEventListener('keyup', this.onKeyUp)
}
componentWillUnmount() {
document.body.removeEventListener('keyup', this.onKeyUp)
}
onKeyUp(e) {
if (/27/.test(e.keyCode)) {
this.setState({ loading: false })
}
}
render() {
if (this.state.loading) {
return <div>Loading</div>
}
return <div>Loaded</div>
}
}
Hope it helps.
I am trying to make a modal appear on top of another modal (like a stack of modals) automatically when the user clicks on the backdrop of a modal or presses the escape button (in this case a dialog box to ask whether you want to progress further).
The problem is that I am not able to figure out how I can call the event's preventDefault() function as I feel that it is the solution to my problem. Currently, what happens is that on clicking the backdrop, the current modal vanishes and the second modal takes it's place instead of appearing above the current modal, putting it in the backdrop.
Here is my code snippet :
The beginning -
(function () {
'use strict';
angular
.module('controller.main', [])
.controller('Main', ['$location', '$state', '$uibModal', 'user', 'auth', 'model', function ($location, $state, $uibModal, user, auth, model) {
var vm = this;
The code in question that is supposed to do the expected task -
vm.openConfirmCancelDB = function (size)
{
$uibModal.open({
animation: vm.animationsEnabled,
templateUrl: '/views/confirmCancelProcessModal.html',
controller: 'Cancel',
controllerAs: 'cancel',
size: size,
backdrop: 'static',
resolve: {}
});
};
vm.openLogin = function (size)
{
var OLP = $uibModal.open(
{
animation: vm.animationsEnabled,
templateUrl: '/views/login.html',
controller: 'Modal',
controllerAs: 'modal',
size: size,
//backdrop: 'static',
resolve: {
inUser: function () {
var user = {};
return user;
}
}
});
OLP.result.then(function()
{
//event.preventDefault();
},
function ()
{
vm.openConfirmCancelDB('sm');
});
};
vm.register = function (size)
{
console.log(vm.registerform);
var RP = $uibModal.open(
{
animation: vm.animationsEnabled,
templateUrl: '/views/register.html',
controller: 'Registration',
controllerAs: 'modal',
//backdrop: 'static',
size: size,
resolve: {
inUser: function () {
var user = {
email: vm.email,
password: vm.password
};
return user;
}
}
});
RP.result.then(function()
{
//event.preventDefault();
},
function ()
{
vm.openConfirmCancelDB('sm');
});
};
openConfirmCancelDB() is the function that helps in opening the dialog box. The problem is how I can call preventDefault() function in order to get the current modal to stay in the backdrop while the dialog box appears on top of this modal. How can I go about accessing the event and its preventDefault function? Also, any other method that can help solve my problem is also fine with me.