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 image
when i use the style on the button itself like
//...
id: 'btntel',
cls : 'x-btn-icon',
style: {height: '90px'}
//...
it's shows
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
add a comment |
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 image
when i use the style on the button itself like
//...
id: 'btntel',
cls : 'x-btn-icon',
style: {height: '90px'}
//...
it's shows
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
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
add a comment |
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 image
when i use the style on the button itself like
//...
id: 'btntel',
cls : 'x-btn-icon',
style: {height: '90px'}
//...
it's shows
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
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 image
when i use the style on the button itself like
//...
id: 'btntel',
cls : 'x-btn-icon',
style: {height: '90px'}
//...
it's shows
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
javascript extjs javascript-framework
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
add a comment |
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
add a comment |
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)
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
add a comment |
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)
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
add a comment |
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)
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
add a comment |
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)
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)
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
add a comment |
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
add a comment |
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.
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
Required, but never shown
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
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
Required, but never shown
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
Required, but never shown
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
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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