Cómo insertar espacios entre componentes en el diseño de Ext js 4

Question

Paso de adobe flex a ext js 4 y noté que en Extjs los componentes están demasiado cerca. No hay espacio entre entonces. Esto se puede enfrentar con este ejemplo:

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

Los dos botones tienen un espacio cero entre sí.

¿Cómo establecer un espacio (hueco o nunca) de los componentes?

Gracias.

Answer 1

Use la configuración de margen:

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

como un margen? Puede agregar eso por el estilo atttribute. Vea este ex http://jsfiddle.net/nscrob/5rn8C/5/