While using ExtJS 3.4, I faced a challenge with laying out three buttons in a row within a formpanel. After some research, I discovered that nesting item blocks might be the correct approach. Below is the code snippet showcasing what I have implemented:
var myPanel = new Ext.form.FormPanel({
id:'myPanel',
height:300,
width: 800,
items:[{
layout : 'column' ,border:false,buttonAlign : 'left', bodyStyle : 'padding:15px 20px 0',
items:[{
layout:'column' , border:false,
items:[saveSelectedButton, deleteSelectedButton, cancelButton ]
}]
}]
});
However, my specific requirement is to dynamically add the buttons so initially the items block remains empty items:[]. This can be achieved by calling the following method:
myPanel.add(saveSelectedButton, deleteSelectedButton, cancelButton);
The issue I encountered is that the buttons are rendered in a column instead of a row. Any ideas on how to resolve this?