I was trying to set a fontawesome icon inside an Ext.MessageBox title and i managed to accomplish it using the code below:
Ext.Msg.show({
//iconCls: 'x-fa fa-times-circle',
title: '<span class="x-fa fa-exclamation"> Error Title</span>',
message: 'An error occured!!!!!',
buttons: Ext.MessageBox.OK,
width: 400
});
Reading the docs i found out that i could set the title using a config object for the Ext.panel.Title component.
But setting the config object like the example below was making the title invisible.
title: {
text: 'Error Title',
iconCls: 'x-fa fa-exclamation'
}
Also inspecting the view from the Elements tab of Chrome's Developer tools i saw that there is a div element for icons inside the x-paneltitle class.
<div class="x-icon-el x-font-icon" id="ext-element-15"></div>
How can i set the MessageBox title using the Ext.panel.Title config?
You have fallen into a documentation trap there.
The title config is available on the Ext.Panel class instantiation and therefore, technically, also on the Ext.MessageBox instantiation, but not on its show method, which you call on a singleton that has been pre-instantiated for you by Sencha.
The following would technically instantiate a Message Box with a custom title config:
Ext.create('Ext.MessageBox',{
title: {
text: 'Error Title',
iconCls: 'x-fa fa-exclamation'
}
});
However, to show the Ext.MessageBox, you have to call the show method, which has been overridden so as to overwrite every custom setting you add to the title config.
This works for me:
Ext.Msg.show({
title: {
text: 'Error Title',
iconCls: 'x-fa fa-exclamation'
},
message: 'You are closing a tab that has unsaved changes. Would you
like to save your changes?',
buttons: Ext.Msg.YESNOCANCEL,
icon: Ext.Msg.QUESTION,
fn: function(btn) {
if (btn === 'yes') {
console.log('Yes pressed');
} else if (btn === 'no') {
console.log('No pressed');
} else {
console.log('Cancel pressed');
}
}
});
Used it here:
https://docs.sencha.com/extjs/6.0.2/classic/Ext.window.MessageBox.html
It is Classic 6.0.2 but it should still work.
Related
Is it possible to give a link instead of a message in standard message box in sap ui5? I want to navigate to another view on the click of that link. Is it possible to achieve without creating a new fragment and adding something in the standard message box?
The sap.m.MessageBox does not allow links, but the use of custom actions. Just take a look at the sample Error with custom action. Maybe this will help you.
I had the same problem and found the following solution:
if (!this.oSuccessMessageDialog) {
this.oSuccessMessageDialog = new sap.m.Dialog({
type: sap.m.DialogType.Message,
title: "Success",
state: sap.ui.core.ValueState.Success,
content: [
new sap.m.Text({ text: "Click on\u00a0" }),
new sap.m.Link({
text: "this",
emphasized: true,
press: <your_handler>
}),
new sap.m.Text({ text: "\u00a0Link." })
],
beginButton: new sap.m.Button({
type: sap.m.ButtonType.Emphasized,
text: "OK",
press: function () {
this.oSuccessMessageDialog.close();
}.bind(this)
})
});
}
this.oSuccessMessageDialog.open();
I have a filefield in my extjs page. The upload functionality is working fine, alright.
The filefield is placed in a widget window. When the window is closed and reopened the filefield doesn't create properly. The browse button is missing in it. This happens only when I close the window without uploading anything at all.
The below is the code for the same:
var stockAuditUploadFile = Ext.widget('window', {
title: 'Upload the Stock Audit file',
closeAction: 'hide',
width: 500,
autoHeight: true,
layout: 'fit',
resizable: false,
modal: true,
items: [{
xtype: 'filefield',
id: 'filedata',
emptyText: 'Select a document to upload...',
fieldLabel: 'File',
waitMsg: 'Please wait...',
buttonText: 'Browse',
validator: function (v) {
if (!/\.xls$/.test(v)) {
return 'Only Excel files allowed';
}
return true;
}
}],
buttons: [{
text: 'Upload',
handler: function () {
//callUpload();
if (myuploadform.getForm().isValid()) {
//alert('in456side');
form_action = 1;
myuploadform.getForm().submit({
url: 'submission/stockupload.jsp',
success: function (result, action) {
}
});
}
Ext.Msg.alert('File Uploaded Successfully');
stockAuditUploadFile.destroy();
}
}]
});
stockAuditUploadFile.show();
When the widget window opens for the first time, everything works fine including the validation for excel file uploading but on close and reopen the browse button is missing.
Is there any mistake in my code?
I found the solution to the above issue.
The closeAction: 'hide' was the problem. On hide, things in Extjs go wild, haven't understood that yet but on changing the above to closeAction: 'destroy' the filefield works fine.
Though the hide was working in fiddle, it didn't work good for me in my project. So, I believe it is better to use the below even though the hide-closeAction may work good for others.
closeAction:'destroy' brings the browse button alright.
I'm trying to extend a MessageBox within a view so I can reuse it throughout my application.
It seems that when I do so, I lose some of the default functionality that makes the messagebox useful (msg, button definitions, icon definitons, default drag constraints, etc). Documentation is a little confusing as it seems configs should be defined within the show() function, and I'm unsure of how to set them within my view.
How can I truly extend a messagebox component as a view?
Basic MessageBox (what I want to create with my view):
Ext.Msg.show({
title:'Error',
msg: 'There was an error.',
buttons: Ext.Msg.YESNOCANCEL,
icon: Ext.Msg.QUESTION
});
Renders:
but when I show my view:
Ext.create('IOL.view.app.Message').show();
I basically end up with a vanilla Panel/Window component
Ext.define('IOL.view.app.Message', {
extend : 'Ext.window.Window',
config: {
},
constructor: function(config) {
this.initConfig(config);
this.callParent(arguments);
},
initComponent : function() {
Ext.apply(this, {
xtype: 'messagebox',
width: 400,
height: 200,
title:'Error',
html: 'There was an error.',
buttons: [
{ text: 'Button 1' }
]
});
this.callParent(arguments);
}// initComponent
});
Renders:
It seems you are extending an Ext.window.Window and applying the messagebox configs to it. Why not just extend Ext.window.MessageBox:
Ext.define('IOL.view.app.Message', {
extend : 'Ext.window.MessageBox',
width: 400,
height: 200,
title: 'Error',
html: 'There was an error.',
buttons: Ext.Msg.YESNOCANCEL,
icon: Ext.Msg.ERROR,
// whatever else you want to do
initComponent : function() {
this.callParent(arguments);
}
});
#EricCook brings up a good point below. The MessageBox class is designed for reuse in the app as a singleton not really for subclassing.
In your question you said:
I'm trying to extend a MessageBox within a view so I can reuse it
throughout my application
I can understand that if you want to create a different type of messagebox that you would call with the normal Ext.Msg.show method, you could extend the MessageBox with your own buttons or icons I suppose.
But for regular use this isn't something you need to extend. For repeated use in your app you could hold a reference to the message box config you want in the controller like:
// SomeController.js
errorMsg: {
title:'Error',
msg: 'There was an error.',
buttons: Ext.Msg.YESNOCANCEL,
icon: Ext.Msg.QUESTION
},
Then whenever you want to call that type of message you could use (assuming the scope is the controller itself, or you could get a reference to the controller beforehand):
Ext.Msg.show(this.errorMsg);
I am trying to create an option in the right-click menu that is dynamic based on the user's action. If the user selects some text, then right-clicks, the option will say "Display It". If the user right-clicks without selecting some text, the option will say "Select Some Text First" and be grayed out. I am wondering how do I achieve this?
I currently have it so that the option will appear only when the user has selected some text. I am unsure how to modify it to meet my second requirements.
chrome.contextMenus.create ({
title:"Display It!", contexts:["selection"], onclick:function(info,tab) {
chrome.tabs.sendRequest(
tab.id,
{callFunction: "displaySidebar", info: info},
function(response) {console.log(response);}
);
}
});
You cant grey an item out...Chrome has gone to a bit of effort to only make context menu items appear when its relevant which is why i guess theres no grey out option. Your way goes against what Chrome have tried to implement and I think you really should rethink the way you go about this.
Saying that, you can use the chrome.contextMenus.update to change a menu item.
The following code is about as good as your going to get it your way (seriously, rethink this idea)....
function selectedTrueOnClick(info, tab) {
chrome.tabs.sendRequest(
tab.id, {
callFunction: "displaySidebar",
info: info
}, function(response) {
console.log(response);
});
}
function selectedFalseOnClick(info, tab) {
//
}
var contextMenuID = chrome.contextMenus.create({
title: "Select some text",
contexts: ["all"],
onclick: selectedFalseOnClick
});
function contextMenuUpdate(selected) {
if (selected) chrome.contextMenus.update(contextMenuID, {
title: 'You selected "%s"',
contexts: ["all"],
onclick: selectedTrueOnClick
});
else chrome.contextMenus.update(contextMenuID, {
title: "Select some text",
contexts: ["all"],
onclick: selectedTrueOnClick
});
}
contextMenuUpdate(false);
I was looking to accomplish the same thing as the original post, and was able to get it working using some message passing. Regardless of whether it's bad practice or not, I used the enabled(true/false) contextMenu property to leave my context menu option present, but grayed out.
I created a context menu. The important property is the id. The rest is mostly arbitrary because it will be changed dynamically.
In content.js
//This event listener will determine if the context menu should be updated
//based on if the right-button was clicked and if there is a selection or not
document.addEventListener("mousedown", function(event){
if (event.button !== 2) {
return false;
}
var selected = window.getSelection().toString();
if(event.button == 2 && selected != '') {
//get selected text and send request to bkgd page to create menu
chrome.runtime.sendMessage({
'message': 'updateContextMenu',
'selection': true});
} else {
chrome.runtime.sendMessage({
'message': 'updateContextMenu',
'selection': false});
}
}, true);
In background.js:
//add a message listener that will modify the context menu however you see fit
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.message == 'updateContextMenu') {
if (request.selection) {
chrome.contextMenus.update('contextMenuId',{
'title': 'New Title',
'enabled': true,
"contexts": ["all"],
'onclick': someFunction
});
} else {
chrome.contextMenus.update('contextMenuId',{
'title': 'Select some text first',
'enabled': false,
"contexts": ["all"]
});
}
} else {
sendResponse({});
}
});
//The original context menu. The important property is the id. The rest is mostly
//arbitrary because it will be changed dynamically by the listener above.
chrome.contextMenus.create({
'id': 'contextMenuId',
'enabled': false,
'title': 'Some Title',
"contexts": ["all"]
});
I got problem like this:
There is TabPanel with two tab. First is FormPanel, second is GridPanel.
And I've added listener to beforetabchange. When values in FormPanel are changed there should appear Ext.MessageBox.cofirm with question: 'Do you want save your changes?'.
And it's appear but under TabPanel.
It doesn't work with any type of message box.
This is little bit weird because, when I click on submit button in this form, there is wait message box and after changes are saved there is information box.
Any ideas?
edited
I've removed all config sets from tabPanel and formPanel which is first tab, so everything is default. Message box looks like that (right now):
Ext.MessageBox.confirm('Title','message',Ext.emptyFn);
I think the problem is that the message box is binded somehow to gridPanel which is under the tabPanel.
I've added plugin to tabPanel and on beforetabchange event I show this confirm message.
Funny thing is that I do exactly the same code in plugin which is added to submit button in formPanel and there everything works perfect.
edited
new Ext.TabPanel({
activeTab: 0,
id: 'tabPanel_id',
items: [
new Ext.form.FormPanel({
cls: 'xf-windowForm',
bodyCssClass: '',
autoHeight: false,
autoScroll: true,
border: false,
layout: 'form',
buttonAlign: 'center',
monitorValid: true,
labelAlign: 'right',
labelPad: 10,
defaults: {
msgTarget: 'under',
anchor: '100%'
},
id: 'formPanel_id',
title: translate('tab_title-general'),
items: [
new Ext.form.TextField({
fieldLabel: 'label',
name: 'name',
id: 'id'
})
],
buttons: [
new Ext.Button({
text: 'save',
type: 'submit',
formBind: true,
plugins: {
init: function (component) {
component.on({
click: function() {
Ext.MessageBox.confirm('title', 'messsage', Ext.emptyFn);
}
});
}
}
})
]
}),
new Ext.Panel()
],
plugins: {
init: function(component) {
component.on({
beforetabchange: function() {
Ext.MessageBox.confirm('title', 'messsage', Ext.emptyFn);
}
});
}
}
});
There is also gridPanel under this tabPanel.
And this message box in buttons plugin works fine (tab panel becomes grey and message box appears on top), but the second one, in tabpanels plugin, add another mask on grid and shows under the panel and above the grid.
edited
Ext.onReady(function(){
new Ext.Window({
initHidden: false,
width: 700,
title: 'WindowTitle',
items: [
new Ext.TabPanel({
items: [
new Ext.Panel({title: 'Title1'}),
new Ext.Panel({title: 'Title2'})
],
plugins: {
init: function(component) {
component.on({
beforetabchange: function(t,c,n) {
Ext.MessageBox.confirm('MessageBoxTitle', 'Confirm message.', Ext.emptyFn, component);
}
});
}
}
})
]
});
});
That's complete code where problem occurs.
Message box in window show event is displayed ok, but in tabPanel it's under the window.
I'm working on FF 4.0.1, but problem occurs also in IE 8 and Chrome 12.
I'm using Ext JS 3.3.1.
solution
z-index of windows must be decreased (ie. to 7000, default is 9000).
To do that I'm using Ext.WindowGroup.
windows = new Ext.WindowGroup();
windows.zseed = 7000;
//and in config properties in window:
manager:windows
Thank's everyone for help.
"I think the problem is that the message box is binded somehow to gridPanel which is under the tabPanel."
MessageBox isn't bound to an existing panel, its a singleton and is basically a shortcut to creating a window rendered to the body, as per source code:
http://dev.sencha.com/deploy/ext-3.3.1/docs/source/MessageBox.html#cls-Ext.MessageBox
Kevin is on to something with the z-index being a likely culprit, as I've fixed issues in the past with the Ext.Notifications ux having a lower z-index than the main content.
Try running your messagebox call from the console and see if it appears. That will help determine if your wait messagebox is closing out the confirm messagebox (note the mention of it being a singleton above) or something odd where you're not seeing some other javascript error thats causing your code to not be run. Then, if you don't see the messagebox when run from the console, try the isVisible() api call to see if it thinks its being displayed (which will likely narrow it down to a css issue).
Ext MessageBox doesn't block your code until the user does something the way an alert() does. As a result, it's going to pop up the message box, and then proceed to render the new tab that the user just clicked on. Perhaps when the new tab renders, the Ext window manager is putting that window on top, since it rendered most recently?
You could try using setTimeout to display the message box after a short delay. That will give the new tab a chance to be on top, and then the message box renders, hopefully on top of everything, since it was the most recent.
setTimeout will work, there was same issue like
page- button -
on click - window with grid -
click on grid item->there should be a message box on top,
but it was under the window,
then i tried
click on grid item-
setTimeOut(function(){ Ext.MessageBox.alert('MessageBoxTitle', 'Confirm message.')}, 200);
I have used following method. It is working for me.
beforetabchange: function(tabpanel, newTab, oldTab){
if (!tabpanel.allowAction){
Ext.Msg.confirm('Confirm', 'Your Message',function(btn) {
if (btn == 'yes') {
/* logic*/
tabpanel.allowAction = true;
this.setActiveTab(newTab.id);
}else{ /* logic */}
});
return false;
}
delete tabpanel.allowAction;
}
Ext.create('Ext.window.MessageBox', {
alwaysOnTop: true,
closeAction: 'destroy'
}).show({
title: 'Title',
buttons: Ext.Msg.OK,
message: 'Message'
});
This should make the MessageBox appear on top.
Look at the fourth example in this page.
http://docs.sencha.com/extjs/5.1.0/api/Ext.window.MessageBox.html