javascript - Ext js add to the Ext msg a "don't ask anymore" checkbox
问题描述
How can I add to my Ext.Msg a checkbox with a text "don't ask anymore" so that the user doesn't have to always confirm that he wants to do a specific action (in my case send a message)?
This is my code:
Ext.Msg.show({
title: 'Send Message',
message: 'Are you sure you want to send the message?'
buttons: Ext.Msg.YESNO,
fn: function(btn) {
if (btn === 'yes') {
...
} else if (btn === 'no') {
...
}
}
});
解决方案
I see here several ways, the most trivial is using cookies to remember the user decision IN THE BROWSER. Another solution is to remember the decision on server side, in this case there will be no dependency on the browser. In the following sample I have used cookies and wrapped the Ext.msg.show(...) in another singleton class.
Ext.define('CustomMsg', {
singleton: true,
cookiePrefiex: 'DontShowMessageBox',
cookieToolbarId: 'CookieToolbar',
show: function (messageBoxId, config) {
var cookieName = this.getCookieName(messageBoxId),
me = this;
if(Ext.util.Cookies.get(cookieName) === 'true') {
return;
}
var msgBox = Ext.Msg.show(config);
this.addCookieToolbar(cookieName, msgBox);
msgBox.on('hide', function(msgBox) {
this.removeCookieToolbar(msgBox);
}, this, {single: true});
},
addCookieToolbar: function(cookieName, msgBox) {
msgBox.add({
xtype: 'toolbar',
itemId: this.cookieToolbarId,
items: [{
xtype: 'checkbox',
fieldLabel: "don't ask anymore",
listeners: {
change: function (checkbox, newValue) {
Ext.util.Cookies.set(cookieName, newValue);
}
}
}]
});
return this;
},
removeCookieToolbar: function(msgBox) {
var cookieToolbar = msgBox.getComponent(this.cookieToolbarId);
if(cookieToolbar) {
msgBox.remove(cookieToolbar);
}
return this;
},
getCookieName(checkBoxId) {
return this.cookiePrefiex + '-' + checkBoxId;
}
});
You can also create your own MessageBox at the base of Ext.panel.Panel, in this case you will not have to implement the toolbar injection mechanism.
推荐阅读
- java - 如何通过 HikariCP 使用 SSH 连接来连接 MySQL?
- excel - 使用可变文件名在另一个 Excel 工作簿中运行 Sub
- kotlin - 无法调用 SetOnClickListener
- amazon-web-services - 为特定环境运行弹性 beanstalk .ebextensions 配置
- android - 如何处理文档的位图照片,使其看起来像扫描图像?
- reactjs - 我的 React 组件在 props 数据可用之前渲染,使用钩子
- python - 如何更新 Tkinter 进度条?
- sql - 可从两个字符串中识别的主键
- javascript - 直接调用 Firebase Cloud 函数时出现内部错误
- c++ - 使用 Friend 函数解析字符串并将值返回给类