12

I'm moving from adobe flex to ext js 4, and I noted that in Extjs, the components are placed too close. There is no gap between then. This can be faced with this example:

    var win = Ext.create('Ext.window.Window', {
    layout: 'hbox',
    height: 500,
    width: 400,
    title: 'hbox',      
    items: [
      Ext.create('Ext.button.Button',
      {
        text: 'My button 1',
        width: 150
      }),
      Ext.create('Ext.button.Button',
      {
        text: 'My button 2',
        width: 150
      })
    ]
});

win.show();

The two button are zero space from each other.

How to set a space (gap or ever) from components?

Thanks.

Beetlejuice
  • 4,292
  • 10
  • 58
  • 84

2 Answers2

20

Use the margin config:

Ext.onReady(function() {
    var win = Ext.create('Ext.window.Window', {
        layout: 'hbox',
        height: 500,
        width: 400,
        autoShow: true,
        title: 'hbox',
        defaultType: 'button',
        items: [{
            text: 'My button 1',
            width: 150,
            margin: '10 20 30 40'
        }, {
            text: 'My button 2',
            width: 150,
            margin: '40 30 20 10'
        }]
    });
});
Evan Trimboli
  • 29,900
  • 6
  • 45
  • 66
  • 2
    To save you looking this up the margin values correspond to top, right, bottom, left so "10 0 0 0" will create a margin of 10 px at the top only. – Glenn Lawrence Jun 08 '14 at 22:25
  • 2
    If you want the same margin for all children, add a `defaults` property to the parent `defaults: { margin:'0 15 0 0' }`. This makes more sense in a column layout for example. – Christiaan Westerbeek Sep 01 '14 at 11:45
2

like a margin ? You can add that by the style atttribute. See this ex http://jsfiddle.net/nscrob/5rn8C/5/

nscrob
  • 4,483
  • 1
  • 20
  • 24