Jak wstawiać spacje między komponentami w układzie Ext js 4

Question

Przechodzę z Adobe Flex do Ext JS 4 i zauważyłem, że w ExtJS składniki są umieszczone zbyt blisko. Nie ma między nimi przerwy. Można to zrobić na podstawie tego przykładu:

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(); 

Dwa przyciski są od siebie oddalone o zero.

Jak ustawić odstęp (odstęp lub nigdy) od komponentów?

Dzięki.

Answer 1

użyć config margin:

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' 
     }] 
    }); 
}); 

Answer 2

jak marża? Możesz to dodać według atrybutu stylu. Zobacz ten ex http://jsfiddle.net/nscrob/5rn8C/5/