PDA

View Full Version : Button Icon not rendering



srajakaruna
7 Nov 2008, 3:43 AM
CSS code

.ico_msg {
background-image: url(../img/ico_msg.png);
}
.ico_save {
background-image: url(../img/ico_save.gif);
}


Ajax Response text

_t.add(new Ext.FormPanel({
id:'$_id',
iconCls:'ico_$_ico',
title:'$_title',
nodePath:'$_path',
treePanel:'tree_".$_menu."Id',
closable:true,
tbar:[new Ext.Button({
id:'butId',
text: 'Save',
iconCls:'ico_save',
handler: function(){

}
})
],
items:[{
layout:'column',
border:false,
defaults:{width:300,layout:'form', border:false, bodyStyle:'padding:10px;', labelAlign:'right', labelWidth:100},
items:[{
items:[{
xtype :'textfield',
fieldLabel :'First Name',
name :'f_name',
width :180,
maxLength :240
}]
},{
items:[{
xtype :'textfield',
fieldLabel :'User Name',
name :'username',
width :180,
maxLength :24
}]
}]
}]
})).show();
Ext.getCmp('$_id').doLayout();

I use eval() to run above code and add a new tab to a tabpanel.

But button icon is not rendering. CSS is correct.

when i put it to tab icon it renders, button does not work. any idea please ?

7 Nov 2008, 4:54 AM
do you see the images being requested in firebug? Are the images actually being found and served by the server?

srajakaruna
9 Nov 2008, 7:57 PM
.ico_save {
background-image: url(http://localhost/hrev/img/ico_save.gif);
}


I used the absolute path, and checked. but still not working.

Even though its not rendered, button shows with the space left to the text which uses for the icon

Image is not getting requested from server, when i checked in firebug.

When i use the same class for form tab icon , it renders, and its getting requested (see the attached image)

.