How to add Buttons in Horizontal Layout

[nikhilwalker]

Hi All,

I am new to ext js and has been reading and practicing ExtJs framework from last 2 days.

I am able to understand the controls but I am facing problem while using the widgets in combination. For example I want to create a form (for data entry) which should have the buttons arranged in horizontal layout.

I have attached the wireframe.

I am trying to use the Panel to arrange the buttons but not able to get the required layout.

Can any one please help?

[evant]

Use a column layout, something like:

var p = new Ext.Panel({
   layout: 'column,
   layoutConfig: {columns: 3},
   width: 400,
   height: 30,
   defaultType: 'button',
   items: [{
      text: 'b1',
      columnWidth: 0.33
   },{
      text: 'b2',
      columnWidth: 0.33
   },{
      text: 'b3',
      columnWidth: 0.34
   }]
});

[nikhilwalker]

Hi Evan,

Thanks for your reply.

With your code snippet I created the following code:
var ShowLayout = function()
{
init: function()
{
var p = new Ext.Panel
(
{
layout: 'column',
layoutConfig: {columns: 3},
width: 400,
height: 30,
defaultType: 'button',
items:
[
{
text: 'b1',
columnWidth: 0.33
},
{
text: 'b2',
columnWidth: 0.33
}
,
{
text: 'b3',
columnWidth: 0.34
}
]
}
);
}

}


Ext.onReady(ShowLayout.init, ShowLayout, false);

But when I open it in browser (FF) I am getting error:
E.fireFn has no properties
http://localhost/ext-2.2/ext-all.js
Line 12

[nikhilwalker]

I think I solved the issue. The error was there since I was not adding the Panel to any Layout. I added the panel to a layout and it is rendering the buttons.

Now I am trying to attach event (click) handler to one of the button.

The code is as below:
p = new Ext.Panel
(
{
layout: 'column',
layoutConfig: {columns: 3},
width: '100%',
height: 30,
//title:'test',
defaultType: 'button',
items:

[
{
text: 'b1',
columnWidth: 0.33,
click:{ fn:MyEvent, scope: this }
},
{
text: 'b2',
columnWidth: 0.33
}
,
{
text: 'b3',
columnWidth: 0.34
}
]

}
)

MyEvent is defined as:
function MyEvent(o)
{
alert('myEvent');
}

However when I click the button alert is not displayed.

Is it the correct way to add the event to button?

[Animal]

It's even easier in a table layout.

Just add an item like this to your Panel

{
   xtype: 'container',
   layout: 'table',
   autoEl: {},
   layoutConfig: {columns: 3},
   defaultType: 'button',
   items: [{
      text: 'b1'
   },{
      text: 'b2'
   },{
      text: 'b3'
  }]
}

And you will have 3 buttons in onw row.

[aasshishpatil]

Hi All,

I am also new to ext js and has been reading and practicing ExtJs framework
I am facing exactly oppsite issue. i want three buttons align horizontally.
like
1 button
2 button
3 button..

Can any one please help?