Styjun

Is accepting an invalid credit card number a security issue?

Protagonist's race is hidden - should I reveal it?

What was Apollo 13's "Little Jolt" after MECO?

What's the difference between using dependency injection with a container and using a service locator?

Expansion//Explosion and Siren Stormtamer

Putting Ant-Man on house arrest

Does the set of sets which are elements of every set exist?

Married in secret, can marital status in passport be changed at a later date?

Where did Arya get these scars?

Multiple fireplaces in an apartment building?

Need of separate security plugins for both root and subfolder sites Wordpress?

What do you call the part of a novel that is not dialog?

What is the term for a person whose job is to place products on shelves in stores?

What if Force was not Mass times Acceleration?

Map material from china not allowed to leave the country

What is "leading note" and what does it mean to "raise a note"?

What is the ongoing value of the Kanban board to the developers as opposed to management

What is ls Largest Number Formed by only moving two sticks in 508?

Trumpet valves, lengths, and pitch

How do I check if a string is entirely made of the same substring?

Visa-free travel to the US using refugee travel document from Spain?

Passing args from the bash script to the function in the script

How would this chord from "Rocket Man" be analyzed?

Align column where each cell has two decimals with siunitx

ExtJs create custon icon for Ext.MessageBox

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

2

2

I have an ExtJs form which upon receiving a response from server shows a pop-up based on whether the submit was successful or not. The code looks like this:

if (form.isValid()) 
 form.submit(
 success: function (form, action) 
 Ext.Msg.alert('Success', action.result.msg);
 ,
 failure: function (form, action) 
 Ext.MessageBox.show(
 title:'Failure',
 msg: action.result.msg,
 buttons: Ext.MessageBox.OK,
 icon: Ext.MessageBox.ERROR
 );
 
 );

Now, rather than having an alert message for the success, I'd like to also have a Message box with a 'check' icon. It doesn't look like it is available in ExtJS in the same way as Ext.MessageBox.ERROR, so I was wondering how I can create a custom icon to appear there?

javascript extjs extjs4

share|improve this question

edited Mar 22 at 15:56

DJDaveMark

1,6191123

asked Nov 9 '12 at 15:53

Art FArt F

1,557103770

add a comment | 

2

2

I have an ExtJs form which upon receiving a response from server shows a pop-up based on whether the submit was successful or not. The code looks like this:

if (form.isValid()) 
 form.submit(
 success: function (form, action) 
 Ext.Msg.alert('Success', action.result.msg);
 ,
 failure: function (form, action) 
 Ext.MessageBox.show(
 title:'Failure',
 msg: action.result.msg,
 buttons: Ext.MessageBox.OK,
 icon: Ext.MessageBox.ERROR
 );
 
 );

Now, rather than having an alert message for the success, I'd like to also have a Message box with a 'check' icon. It doesn't look like it is available in ExtJS in the same way as Ext.MessageBox.ERROR, so I was wondering how I can create a custom icon to appear there?

javascript extjs extjs4

share|improve this question

edited Mar 22 at 15:56

DJDaveMark

1,6191123

asked Nov 9 '12 at 15:53

Art FArt F

1,557103770

add a comment | 

I have an ExtJs form which upon receiving a response from server shows a pop-up based on whether the submit was successful or not. The code looks like this:

if (form.isValid()) 
 form.submit(
 success: function (form, action) 
 Ext.Msg.alert('Success', action.result.msg);
 ,
 failure: function (form, action) 
 Ext.MessageBox.show(
 title:'Failure',
 msg: action.result.msg,
 buttons: Ext.MessageBox.OK,
 icon: Ext.MessageBox.ERROR
 );
 
 );

Now, rather than having an alert message for the success, I'd like to also have a Message box with a 'check' icon. It doesn't look like it is available in ExtJS in the same way as Ext.MessageBox.ERROR, so I was wondering how I can create a custom icon to appear there?

javascript extjs extjs4

share|improve this question

edited Mar 22 at 15:56

DJDaveMark

1,6191123

asked Nov 9 '12 at 15:53

Art FArt F

1,557103770

if (form.isValid()) 
 form.submit(
 success: function (form, action) 
 Ext.Msg.alert('Success', action.result.msg);
 ,
 failure: function (form, action) 
 Ext.MessageBox.show(
 title:'Failure',
 msg: action.result.msg,
 buttons: Ext.MessageBox.OK,
 icon: Ext.MessageBox.ERROR
 );
 
 );

share|improve this question

edited Mar 22 at 15:56

DJDaveMark

1,6191123

asked Nov 9 '12 at 15:53

Art FArt F

1,557103770

share|improve this question

edited Mar 22 at 15:56

DJDaveMark

1,6191123

asked Nov 9 '12 at 15:53

Art FArt F

1,557103770

edited Mar 22 at 15:56

DJDaveMark

1,6191123

edited Mar 22 at 15:56

DJDaveMark

1,6191123

asked Nov 9 '12 at 15:53

Art FArt F

1,557103770

asked Nov 9 '12 at 15:53

Art FArt F

1,557103770

1 Answer
1

active

oldest

votes

3

The icon config option is just a CSS class, define a new one like:

.check-icon 
 background-image: url(../img/check.png');
 background-repeat: no-repeat;

Then in config:

icon: 'check-icon'

Should do what you want.

share|improve this answer

edited Nov 9 '12 at 16:55

answered Nov 9 '12 at 15:58

LloydLloyd

25.2k46485

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hey, so that seems to work, but the image seems to repeat a bunch of times. Visual studio is also saying that 'repeat' is not a known property name. Anyway I can fix that? Thanks.
  
  – Art F
  Nov 9 '12 at 16:47
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Sorry, background-repeat, my mistake.
  
  – Lloyd
  Nov 9 '12 at 16:54
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  ah, all good now!
  
  – Art F
  Nov 9 '12 at 16:57
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks!...But, another important thing is that the image must be 32x32 pixels, like I see in this demo: dev.sencha.com/deploy/ext-4.0.0/examples/message-box/… (last example)
  
  – Riccardo Volpe
  May 4 '15 at 18:31
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @RiccardoVolpe I don't think it HAS to be, I'm sure I've used smaller 24x24 but I haven't done this in a while so that could have changed now.
  
  – Lloyd
  May 4 '15 at 22:23
  

  
  
  
  

 | 
show 1 more comment

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f13311375%2fextjs-create-custon-icon-for-ext-messagebox%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

3

The icon config option is just a CSS class, define a new one like:

.check-icon 
 background-image: url(../img/check.png');
 background-repeat: no-repeat;

Then in config:

icon: 'check-icon'

Should do what you want.

share|improve this answer

edited Nov 9 '12 at 16:55

answered Nov 9 '12 at 15:58

LloydLloyd

25.2k46485

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hey, so that seems to work, but the image seems to repeat a bunch of times. Visual studio is also saying that 'repeat' is not a known property name. Anyway I can fix that? Thanks.
  
  – Art F
  Nov 9 '12 at 16:47
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Sorry, background-repeat, my mistake.
  
  – Lloyd
  Nov 9 '12 at 16:54
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  ah, all good now!
  
  – Art F
  Nov 9 '12 at 16:57
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks!...But, another important thing is that the image must be 32x32 pixels, like I see in this demo: dev.sencha.com/deploy/ext-4.0.0/examples/message-box/… (last example)
  
  – Riccardo Volpe
  May 4 '15 at 18:31
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @RiccardoVolpe I don't think it HAS to be, I'm sure I've used smaller 24x24 but I haven't done this in a while so that could have changed now.
  
  – Lloyd
  May 4 '15 at 22:23
  

  
  
  
  

 | 
show 1 more comment

3

The icon config option is just a CSS class, define a new one like:

.check-icon 
 background-image: url(../img/check.png');
 background-repeat: no-repeat;

Then in config:

icon: 'check-icon'

Should do what you want.

share|improve this answer

edited Nov 9 '12 at 16:55

answered Nov 9 '12 at 15:58

LloydLloyd

25.2k46485

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hey, so that seems to work, but the image seems to repeat a bunch of times. Visual studio is also saying that 'repeat' is not a known property name. Anyway I can fix that? Thanks.
  
  – Art F
  Nov 9 '12 at 16:47
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Sorry, background-repeat, my mistake.
  
  – Lloyd
  Nov 9 '12 at 16:54
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  ah, all good now!
  
  – Art F
  Nov 9 '12 at 16:57
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks!...But, another important thing is that the image must be 32x32 pixels, like I see in this demo: dev.sencha.com/deploy/ext-4.0.0/examples/message-box/… (last example)
  
  – Riccardo Volpe
  May 4 '15 at 18:31
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @RiccardoVolpe I don't think it HAS to be, I'm sure I've used smaller 24x24 but I haven't done this in a while so that could have changed now.
  
  – Lloyd
  May 4 '15 at 22:23
  

  
  
  
  

 | 
show 1 more comment

The icon config option is just a CSS class, define a new one like:

.check-icon 
 background-image: url(../img/check.png');
 background-repeat: no-repeat;

Then in config:

icon: 'check-icon'

Should do what you want.

share|improve this answer

edited Nov 9 '12 at 16:55

answered Nov 9 '12 at 15:58

LloydLloyd

25.2k46485

.check-icon 
 background-image: url(../img/check.png');
 background-repeat: no-repeat;

icon: 'check-icon'

share|improve this answer

edited Nov 9 '12 at 16:55

answered Nov 9 '12 at 15:58

LloydLloyd

25.2k46485

answered Nov 9 '12 at 15:58

LloydLloyd

25.2k46485

answered Nov 9 '12 at 15:58

LloydLloyd

25.2k46485