Bind BasicForm to Ext.Toolbar

Question

Hi I've got an Ext.Toolbar with form elements in it including a FileUploadField. I'd like to be able to submit this "form" using an Ext.form.BasicForm. How should I do this? Ideally it should behave as a FormPanel with a ToolbarLayout (though this doesn't render correctly).

Answer 1

I've just tried the other way and it seems to work ok (using a form inside a toolbar), at least for the rendering part...

You can try it out with this toolbar code...

var toolBarConversationList = new Ext.Toolbar({
  items:[
    {
      xtype: 'button',
      text: 'Some Button'
    },
    {xtype: 'tbfill'},
    {
      xtype: 'form',
      id: 'toolbarForm',
      border: false,
      bodyStyle: {
        background: 'transparent',
        marginTop: 3
      },
      items: [
        {
          xtype: 'textfield',
          name: 'form.text',
          fieldLabel: 'Some Text'
        }
      ]
    }
});

If you want you can style up the label with labelStyle on each field. If you want to include more fields you could use a column layout and form layout for each of the fields.

To submit the form you could use Ext.getCmp('toolbarForm').getForm().submit();

I hope this is what you're looking for...