PDA

View Full Version : Spacing between the elements of a vbox.



aperez
5 Aug 2010, 5:39 AM
Hi, guys !!

How can put a padding between items of a panel with layout = 'vbox'?
Thank's.

my Code:


Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '$VERSION_EXTJS$/resources/images/default/s.gif';
var img1 = new Ext.BoxComponent({
autoEl:{
tag: 'img'
,src: '/ima/apl_sopor/an_clte.gif'
}
,style: 'border:1px solid #ff0000'
});
var img2 = new Ext.BoxComponent({
autoEl:{
tag: 'img'
,src: '/ima/apl_sopor/ped_ent.gif'
}
,style: 'border:1px solid #ff0000'
});
var img3 = new Ext.BoxComponent({
autoEl:{
tag: 'img'
,src: '/ima/apl_sopor/facturacion_clientes.gif'
}
,style: 'border:1px solid #ff0000'
});
var p1 = new Ext.Panel ({
html: 'Panel 1'
});
var p2 = new Ext.Panel ({
html: 'Panel 2'
});

var v1 = new Ext.Viewport({
renderTo: Ext.getBody()
,layout: 'border'
,items: [{
region: 'north'
,xtype: 'panel'
,html: 'Panel North'
},{
region: 'west'
,width: 90
,split: true
,items: [img1,img2,img3]
,layout: 'vbox'
},{
region: 'center'
,xtype: 'panel'
,html: 'Panel Center'
},{
region: 'east'
,width: 200
,split: true
,items: [p1,p2]
,layout: 'vbox'
,layoutConfig:{
align: 'stretch'
}
},{
region: 'south'
,xtype: 'panel'
,html: 'Panel South'
}]
});



}); //end onReady


my code executed:
21802

Condor
5 Aug 2010, 6:14 AM
VBoxLayout supports a 'margins' config option in it's items.

Animal
5 Aug 2010, 6:29 AM
(And an align: 'center' config in it's own configuration!)

aperez
5 Aug 2010, 6:54 AM
VBoxLayout supports a 'margins' config option in it's items.

Condor, thank's for your reply, but how to use VBoxLayout?
so it does not work:


},{
region: 'west'
,width: 90
,split: true
,items: [img1,img2,img3]
,layout: 'vbox'
,VBoxLayout:{
margins: '2 2 2 2'
}
}

Condor
5 Aug 2010, 7:02 AM
No, 'margins' is a config option of the items (img1, img2 and img3).

'pack' and 'align' are config options of the layout (specify in 'layoutConfig').

Animal
5 Aug 2010, 7:32 AM
layoutConfig is deprecated.

Use the layout config:



layout: {
type: 'vbox',
align: 'center'
}

aperez
5 Aug 2010, 7:54 AM
No, 'margins' is a config option of the items (img1, img2 and img3).

'pack' and 'align' are config options of the layout (specify in 'layoutConfig').

Condor , Animal ... Thank's a lot !!
Work fine !!

Please, other question:
The BoxComponent has no event 'click', how can put event 'click' in the BoxComponent?
I want that when i click the image launch a function.

A possible solution:


var Test = function (){
alert('ok !!');
}

var element = img1.getEl();
element.on('click', prueba.createDelegate(this));

But, this solution only work when the object is render and i want write the code of 'click' event inside the BoxComponent, It's possible?


Thank's.

aperez
5 Aug 2010, 7:59 AM
No, 'margins' is a config option of the items (img1, img2 and img3).

'pack' and 'align' are config options of the layout (specify in 'layoutConfig').

Condor, Animal ... thank's a lot!! Work fine !!

Another question about my code:
I want trigger a function when i click on the image, but the BoxComponent has no event 'click', how can put a event 'click' inside BoxComponent?

A possible solution:


var fnTest = function (){
alert('text');
}

var element = img1.getEl();
element.on('click', fnTest.createDelegate(this));

But, this solution only work when the object is render and i want write the code of 'click' event inside the BoxComponent, It's possible?

Thank's.

Condor
5 Aug 2010, 8:01 AM
{
xtype: 'box',
autoEl: {tag: 'img', src: 'image.gif'},
listeners: {
render: function(comp){
comp.getEl().on('click', function(e){
...
}, comp);
}
}
}

aperez
5 Aug 2010, 8:01 AM
Condor, Animal ... thank's a lot !! Work fine !!

aperez
5 Aug 2010, 8:02 AM
I want trigger a function when i click on the image, but the BoxComponent has no event 'click', how can put a event 'click' inside BoxComponent?

A possible solution:


var fnTest = function (){
alert('text');
}

var element = img1.getEl();
element.on('click', fnTest.createDelegate(this));

But, this solution only work when the object is render and i want write the code of 'click' event inside the BoxComponent, It's possible?

Thank's.

Animal
5 Aug 2010, 9:10 AM
Looking at what you are doing though, it looks like a DataView would be much more appropriate.