PDA

View Full Version : Remove spacing between icons added on toolbar



ajay.kumar2
10 Aug 2013, 9:47 AM
I am adding icons to a toolbar on a gridpanel using the below code


tbar:{ xtype:'toolbar',

id:
'TBId'+transactionId,





//width:50,


/*tbarCfg:{

buttonAlign:'right',

iconAlign: 'right'

},

style:'float:right;padding-Right:0px;padding-Left:0px;',*/

listeners:{


'afterrender' : function(thisCmp ){

thisCmp.add({xtype:
'tbspacer'});

thisCmp.add(
new Ext.BoxComponent({autoEl: {tag: 'img',style:"float:right",src:ContextPath+'/images/pinIcon.png',onClick:'javascript:alert(1);' }}));

thisCmp.add(
new Ext.BoxComponent({autoEl: {tag: 'img',style:"float:right",src:ContextPath+/images/deleteIcon.png',onClick:'javascript:alert(2);' }}));

thisCmp.add(


new Ext.BoxComponent({autoEl: {tag: 'img',style:"float:right",src:ContextPath+/images/cutIcon.png',onClick:'javascript:alert(3);' }}));

thisCmp.add(
new Ext.BoxComponent({autoEl: {tag: 'img',style:"float:right",src:ContextPath+/images/pasteIcon.png',onClick:'javascript:alert(4);' }}));

thisCmp.add(
new Ext.BoxComponent({autoEl: {tag: 'img',style:"float:right",src:ContextPath+/images/undoIcon.png',onClick:'javascript:alert(5);' }}));



thisCmp.add(
new Ext.BoxComponent({autoEl: {tag: 'img',style:"float:right",src:ContextPath+/images/redoIcon.png',onClick:'javascript:alert(6);' }}));

thisCmp.add(
new Ext.BoxComponent({autoEl: {tag: 'a' ,style:"float:right",href: 'javascript:alert(7);', html:'Add Item'}}));

thisCmp.doLayout();

}

}},



After rendering the GridPanel toolbar looks like:-45286

But there is a lot of space between the icons, i need something like below :-
45287

I tried with setting padding and margins as 0px but didnt work. Can someone guid me on this ?

slemmon
12 Aug 2013, 10:46 AM
This test case worked ok for me in 3.4.1:



var simple = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php',
frame: false,
bodyStyle: 'padding:10px;',
title: 'Simple Form',
width: 350,
defaults: {width: 230},
defaultType: 'textfield',


items: [{
xtype: 'numberfield',
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
}],


buttons: [{
text: 'Save'
},{
text: 'Cancel'
}],
tbar: {
xtype: 'toolbar',
listeners: {
afterrender: function () {
this.add({
xtype: 'tbfill'
});


this.add(
new Ext.BoxComponent({
autoEl: {
tag: 'img',
src: 'http://pic.dhe.ibm.com/infocenter/worlodep/v3r0m0/topic/com.ibm.worlodep.doc/cloudcommon/add-icon.gif'
}
}));


this.add(
new Ext.BoxComponent({
autoEl: {
tag: 'img',
src: 'http://pic.dhe.ibm.com/infocenter/worlodep/v3r0m0/topic/com.ibm.worlodep.doc/cloudcommon/add-icon.gif'
}
}));
}
}
}
});


simple.render(document.body);

ajay.kumar2
13 Aug 2013, 11:13 AM
Thanks slemmon for the reply.

I tried the way you have mentioned but using
this.add({
xtype: 'tbfill'
});


All image icons are gone, nothing is visible on toolbar. I am on 3.2.1 extjs version.

Is there a other way to fix this ?

slemmon
14 Aug 2013, 1:47 PM
The test case I posted works for me in 3.2.1 in Chrome (also works with 3.4.1).
In my test case I'm only using the framework CSS. Are you using any additional CSS on top of the framework CSS?