how to make ExtJS' button's background image display correctly in Extjs 2.3











up vote
2
down vote

favorite












I know Extjs 2.3 is pretty old but i'm taking over someone's work here.so my hands are tied for now.



well i'm supposed to change few things in the interface and add new functionality.
this is my first real ExtJS work (jquery boy here).



i wanted to add new icons on a button and it appears i can't even get the image shown correcty as i can't affect the height of the button, either on the button object property, or in css.
all that i managed to do is affect the width of the button.



here is my attempt



  btntelButton = new Ext.Button({
name: 'telbtn',
id: 'btntel',
cls : 'x-btn-icon',
iconCls: 'telButton',
minWidth : 95,
});
<style type="text/css">
.telButton
{
height: 60px;
background-image: url(images/tel.png) !important;
}
</style>


with the use of telButton class, the backgound images comes but resized to its minimum size, showing only a small portion of the imageshowing here
when i use the style on the button itself like



    //...
id: 'btntel',
cls : 'x-btn-icon',
style: {height: '90px'}
//...


it's shows this
i've been pulling my hair for the passed few hours. How would you Extjs folks do this?
please shed a light on this. Thanks for reading










share|improve this question
























  • To make you feel better: Ext 3.x is not much better with that. Didn't try 4.x so can't tell.
    – Mchl
    Aug 24 '11 at 23:02










  • OK thanks, but like i said, it will be an overkill to migrate currently, i'm forced to use 2.3 right now. thanks
    – black sensei
    Aug 25 '11 at 7:39










  • This is not really directly related to the question, nor too constructive, but: it continues to amaze me how ExtJS, while being such a mature UI framework with considerable history and everything, still doesn't provide such a basic thing as an image button, and nobody seems to know the solution...
    – Erik Allik
    Feb 28 '12 at 20:51








  • 2




    @ErikAllik It does: dev.sencha.com/deploy/ext-4.1.0-gpl/examples/button/button.html
    – Evan Trimboli
    May 15 '12 at 22:32










  • @EvanTrimboli that seems to be new in 4.1—thanks for letting me know!
    – Erik Allik
    Jun 24 '12 at 22:46















up vote
2
down vote

favorite












I know Extjs 2.3 is pretty old but i'm taking over someone's work here.so my hands are tied for now.



well i'm supposed to change few things in the interface and add new functionality.
this is my first real ExtJS work (jquery boy here).



i wanted to add new icons on a button and it appears i can't even get the image shown correcty as i can't affect the height of the button, either on the button object property, or in css.
all that i managed to do is affect the width of the button.



here is my attempt



  btntelButton = new Ext.Button({
name: 'telbtn',
id: 'btntel',
cls : 'x-btn-icon',
iconCls: 'telButton',
minWidth : 95,
});
<style type="text/css">
.telButton
{
height: 60px;
background-image: url(images/tel.png) !important;
}
</style>


with the use of telButton class, the backgound images comes but resized to its minimum size, showing only a small portion of the imageshowing here
when i use the style on the button itself like



    //...
id: 'btntel',
cls : 'x-btn-icon',
style: {height: '90px'}
//...


it's shows this
i've been pulling my hair for the passed few hours. How would you Extjs folks do this?
please shed a light on this. Thanks for reading










share|improve this question
























  • To make you feel better: Ext 3.x is not much better with that. Didn't try 4.x so can't tell.
    – Mchl
    Aug 24 '11 at 23:02










  • OK thanks, but like i said, it will be an overkill to migrate currently, i'm forced to use 2.3 right now. thanks
    – black sensei
    Aug 25 '11 at 7:39










  • This is not really directly related to the question, nor too constructive, but: it continues to amaze me how ExtJS, while being such a mature UI framework with considerable history and everything, still doesn't provide such a basic thing as an image button, and nobody seems to know the solution...
    – Erik Allik
    Feb 28 '12 at 20:51








  • 2




    @ErikAllik It does: dev.sencha.com/deploy/ext-4.1.0-gpl/examples/button/button.html
    – Evan Trimboli
    May 15 '12 at 22:32










  • @EvanTrimboli that seems to be new in 4.1—thanks for letting me know!
    – Erik Allik
    Jun 24 '12 at 22:46













up vote
2
down vote

favorite









up vote
2
down vote

favorite











I know Extjs 2.3 is pretty old but i'm taking over someone's work here.so my hands are tied for now.



well i'm supposed to change few things in the interface and add new functionality.
this is my first real ExtJS work (jquery boy here).



i wanted to add new icons on a button and it appears i can't even get the image shown correcty as i can't affect the height of the button, either on the button object property, or in css.
all that i managed to do is affect the width of the button.



here is my attempt



  btntelButton = new Ext.Button({
name: 'telbtn',
id: 'btntel',
cls : 'x-btn-icon',
iconCls: 'telButton',
minWidth : 95,
});
<style type="text/css">
.telButton
{
height: 60px;
background-image: url(images/tel.png) !important;
}
</style>


with the use of telButton class, the backgound images comes but resized to its minimum size, showing only a small portion of the imageshowing here
when i use the style on the button itself like



    //...
id: 'btntel',
cls : 'x-btn-icon',
style: {height: '90px'}
//...


it's shows this
i've been pulling my hair for the passed few hours. How would you Extjs folks do this?
please shed a light on this. Thanks for reading










share|improve this question















I know Extjs 2.3 is pretty old but i'm taking over someone's work here.so my hands are tied for now.



well i'm supposed to change few things in the interface and add new functionality.
this is my first real ExtJS work (jquery boy here).



i wanted to add new icons on a button and it appears i can't even get the image shown correcty as i can't affect the height of the button, either on the button object property, or in css.
all that i managed to do is affect the width of the button.



here is my attempt



  btntelButton = new Ext.Button({
name: 'telbtn',
id: 'btntel',
cls : 'x-btn-icon',
iconCls: 'telButton',
minWidth : 95,
});
<style type="text/css">
.telButton
{
height: 60px;
background-image: url(images/tel.png) !important;
}
</style>


with the use of telButton class, the backgound images comes but resized to its minimum size, showing only a small portion of the imageshowing here
when i use the style on the button itself like



    //...
id: 'btntel',
cls : 'x-btn-icon',
style: {height: '90px'}
//...


it's shows this
i've been pulling my hair for the passed few hours. How would you Extjs folks do this?
please shed a light on this. Thanks for reading







javascript extjs javascript-framework






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Aug 24 '11 at 22:46

























asked Aug 24 '11 at 15:14









black sensei

2,7971689163




2,7971689163












  • To make you feel better: Ext 3.x is not much better with that. Didn't try 4.x so can't tell.
    – Mchl
    Aug 24 '11 at 23:02










  • OK thanks, but like i said, it will be an overkill to migrate currently, i'm forced to use 2.3 right now. thanks
    – black sensei
    Aug 25 '11 at 7:39










  • This is not really directly related to the question, nor too constructive, but: it continues to amaze me how ExtJS, while being such a mature UI framework with considerable history and everything, still doesn't provide such a basic thing as an image button, and nobody seems to know the solution...
    – Erik Allik
    Feb 28 '12 at 20:51








  • 2




    @ErikAllik It does: dev.sencha.com/deploy/ext-4.1.0-gpl/examples/button/button.html
    – Evan Trimboli
    May 15 '12 at 22:32










  • @EvanTrimboli that seems to be new in 4.1—thanks for letting me know!
    – Erik Allik
    Jun 24 '12 at 22:46


















  • To make you feel better: Ext 3.x is not much better with that. Didn't try 4.x so can't tell.
    – Mchl
    Aug 24 '11 at 23:02










  • OK thanks, but like i said, it will be an overkill to migrate currently, i'm forced to use 2.3 right now. thanks
    – black sensei
    Aug 25 '11 at 7:39










  • This is not really directly related to the question, nor too constructive, but: it continues to amaze me how ExtJS, while being such a mature UI framework with considerable history and everything, still doesn't provide such a basic thing as an image button, and nobody seems to know the solution...
    – Erik Allik
    Feb 28 '12 at 20:51








  • 2




    @ErikAllik It does: dev.sencha.com/deploy/ext-4.1.0-gpl/examples/button/button.html
    – Evan Trimboli
    May 15 '12 at 22:32










  • @EvanTrimboli that seems to be new in 4.1—thanks for letting me know!
    – Erik Allik
    Jun 24 '12 at 22:46
















To make you feel better: Ext 3.x is not much better with that. Didn't try 4.x so can't tell.
– Mchl
Aug 24 '11 at 23:02




To make you feel better: Ext 3.x is not much better with that. Didn't try 4.x so can't tell.
– Mchl
Aug 24 '11 at 23:02












OK thanks, but like i said, it will be an overkill to migrate currently, i'm forced to use 2.3 right now. thanks
– black sensei
Aug 25 '11 at 7:39




OK thanks, but like i said, it will be an overkill to migrate currently, i'm forced to use 2.3 right now. thanks
– black sensei
Aug 25 '11 at 7:39












This is not really directly related to the question, nor too constructive, but: it continues to amaze me how ExtJS, while being such a mature UI framework with considerable history and everything, still doesn't provide such a basic thing as an image button, and nobody seems to know the solution...
– Erik Allik
Feb 28 '12 at 20:51






This is not really directly related to the question, nor too constructive, but: it continues to amaze me how ExtJS, while being such a mature UI framework with considerable history and everything, still doesn't provide such a basic thing as an image button, and nobody seems to know the solution...
– Erik Allik
Feb 28 '12 at 20:51






2




2




@ErikAllik It does: dev.sencha.com/deploy/ext-4.1.0-gpl/examples/button/button.html
– Evan Trimboli
May 15 '12 at 22:32




@ErikAllik It does: dev.sencha.com/deploy/ext-4.1.0-gpl/examples/button/button.html
– Evan Trimboli
May 15 '12 at 22:32












@EvanTrimboli that seems to be new in 4.1—thanks for letting me know!
– Erik Allik
Jun 24 '12 at 22:46




@EvanTrimboli that seems to be new in 4.1—thanks for letting me know!
– Erik Allik
Jun 24 '12 at 22:46












1 Answer
1






active

oldest

votes

















up vote
0
down vote













you can add a style directly to a button



For Example:



style:{height:'60px'}


Second thought would be declaring your css class as:



 .telButton
{
height: 60px;
background-image: url(images/tel.png) !important;
}


rather than --> button.telButton (not sure if it'll make any difference)






share|improve this answer





















  • bruv!! i've updated my post and try your suggestion but no luck :(
    – black sensei
    Aug 24 '11 at 22:46










  • hey man. you could also try re-sizing the background image to the size of the button,while using the class.
    – Richard A
    Aug 24 '11 at 22:54










  • definitely not an option. not the requirement. i guess Extjs can't do it then.
    – black sensei
    Aug 25 '11 at 10:43











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',
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


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f7177874%2fhow-to-make-extjs-buttons-background-image-display-correctly-in-extjs-2-3%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes








up vote
0
down vote













you can add a style directly to a button



For Example:



style:{height:'60px'}


Second thought would be declaring your css class as:



 .telButton
{
height: 60px;
background-image: url(images/tel.png) !important;
}


rather than --> button.telButton (not sure if it'll make any difference)






share|improve this answer





















  • bruv!! i've updated my post and try your suggestion but no luck :(
    – black sensei
    Aug 24 '11 at 22:46










  • hey man. you could also try re-sizing the background image to the size of the button,while using the class.
    – Richard A
    Aug 24 '11 at 22:54










  • definitely not an option. not the requirement. i guess Extjs can't do it then.
    – black sensei
    Aug 25 '11 at 10:43















up vote
0
down vote













you can add a style directly to a button



For Example:



style:{height:'60px'}


Second thought would be declaring your css class as:



 .telButton
{
height: 60px;
background-image: url(images/tel.png) !important;
}


rather than --> button.telButton (not sure if it'll make any difference)






share|improve this answer





















  • bruv!! i've updated my post and try your suggestion but no luck :(
    – black sensei
    Aug 24 '11 at 22:46










  • hey man. you could also try re-sizing the background image to the size of the button,while using the class.
    – Richard A
    Aug 24 '11 at 22:54










  • definitely not an option. not the requirement. i guess Extjs can't do it then.
    – black sensei
    Aug 25 '11 at 10:43













up vote
0
down vote










up vote
0
down vote









you can add a style directly to a button



For Example:



style:{height:'60px'}


Second thought would be declaring your css class as:



 .telButton
{
height: 60px;
background-image: url(images/tel.png) !important;
}


rather than --> button.telButton (not sure if it'll make any difference)






share|improve this answer












you can add a style directly to a button



For Example:



style:{height:'60px'}


Second thought would be declaring your css class as:



 .telButton
{
height: 60px;
background-image: url(images/tel.png) !important;
}


rather than --> button.telButton (not sure if it'll make any difference)







share|improve this answer












share|improve this answer



share|improve this answer










answered Aug 24 '11 at 16:30









Richard A

1,8521010




1,8521010












  • bruv!! i've updated my post and try your suggestion but no luck :(
    – black sensei
    Aug 24 '11 at 22:46










  • hey man. you could also try re-sizing the background image to the size of the button,while using the class.
    – Richard A
    Aug 24 '11 at 22:54










  • definitely not an option. not the requirement. i guess Extjs can't do it then.
    – black sensei
    Aug 25 '11 at 10:43


















  • bruv!! i've updated my post and try your suggestion but no luck :(
    – black sensei
    Aug 24 '11 at 22:46










  • hey man. you could also try re-sizing the background image to the size of the button,while using the class.
    – Richard A
    Aug 24 '11 at 22:54










  • definitely not an option. not the requirement. i guess Extjs can't do it then.
    – black sensei
    Aug 25 '11 at 10:43
















bruv!! i've updated my post and try your suggestion but no luck :(
– black sensei
Aug 24 '11 at 22:46




bruv!! i've updated my post and try your suggestion but no luck :(
– black sensei
Aug 24 '11 at 22:46












hey man. you could also try re-sizing the background image to the size of the button,while using the class.
– Richard A
Aug 24 '11 at 22:54




hey man. you could also try re-sizing the background image to the size of the button,while using the class.
– Richard A
Aug 24 '11 at 22:54












definitely not an option. not the requirement. i guess Extjs can't do it then.
– black sensei
Aug 25 '11 at 10:43




definitely not an option. not the requirement. i guess Extjs can't do it then.
– black sensei
Aug 25 '11 at 10:43


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.





Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


Please pay close attention to the following guidance:


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f7177874%2fhow-to-make-extjs-buttons-background-image-display-correctly-in-extjs-2-3%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Florida Star v. B. J. F.

Error while running script in elastic search , gateway timeout

Adding quotations to stringified JSON object values