PDA

View Full Version : Image in Button



GregT
25 Sep 2009, 1:38 PM
Can anyone explain how to get the image associated with a Button to expand to fill the whole button? I tried (a) screwing around with the properties of the .GIF file itself, (b) using 'iconCls' instead of 'icon', (c) looking at and adjusting Button properties. Any help appreciated.


<html>
<head>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<style type="text/css">
.gregicon {
background-image:url('icons/image1.gif');
}
</style>
<script type="text/javascript">
Ext.onReady(function() {

var wtf = new Ext.Button({
height: 35,
icon: 'icons/image1.gif',
//iconCls: '.gregicon', // commenting the previous line and uncommenting this one does not help
width: 35
});

var viewport = new Ext.Viewport({
items:[wtf],
});

});
</script>
</head>
<body>

</body>
</html>

Condor
25 Sep 2009, 2:02 PM
scale:'large' will make the icon 32x32px.

If you want something other than 16x16px (small), 24x24px (medium) or 32x32px (large) then you'll have to define your own scale value and add the appropriate css rules.