Home > Uncategorized > Using fbar config option in Ext JS 3.0

Using fbar config option in Ext JS 3.0

Rendering a panel or a window that has a footer that contains action buttons, is a very common task for UI developers. This tutorial demonstrates how to use the new and still undocumented fbar configuration option in Ext JS 3.0 for advanced footer rendering.

Preface

In Ext JS prior to version 3.0 you had to use buttons configuration option to define your buttons and buttonAlign option to align them either to the left, center or right.
Although you could render other components in a footer by passing their instances, you could not split them apart, and also you could run into different rendering or behavior issues.

Another way to create a footer was to use bbar configuration option to create a bottom Toolbar.

bbar config option

But a Toolbar was not meant to be used as a footer and does not look like one either. Starting from Ext JS 3.0 you can use the new fbar configuration option to achieve the desired result.

What is fbar?

fbar is very similar to bbar, except that it creates a real footer rather than a bottom Toolbar. Currently it supports rendering of true buttons and other components, plain text, spacers, and a fill to split groups of components apart. Separators are rendered as spacers (blank space). Keep in mind that the only way fill is going to work is if you set buttonAlign config option to left.

fbar config option

Here is the code I used for this example:

new Ext.Window({
    title: 'Test Window',
    width: 500,
    height: 120,
    buttonAlign: 'left',
    fbar: ['Options:', {
        xtype: 'trigger',
        emptyText: 'Please select'
    }, '->', {
        text: 'Update'
    }, {
        text: 'Cancel'
    }]
}).show();

As you can see the syntax is identical to tbar or bbar, but the result is very different. It is a real footer with a plain text and a trigger field on the left, two true buttons on the right and a fill in the middle. To build a footer that would look exactly like this in Ext JS 2.x would require you to have a container with a few levels of nesting inside. With fbar suffer no more! 🙂

Advertisements
Categories: Uncategorized
  1. timsporcic
    May 6, 2009 at 2:13 pm

    Cool! Nice job. I’ve been meaning to play with this.

    -Tim

    • Eugene
      May 6, 2009 at 2:28 pm

      Thanks, Tim!

  2. May 6, 2009 at 3:49 pm

    Nice! Especially since it’s a new & undocumented feature.

  3. May 6, 2009 at 5:19 pm

    Nice explanation! thanks for posting

    • Eugene
      May 7, 2009 at 8:11 am

      Glad it helped.

  4. May 7, 2009 at 8:06 am

    Good! Many thanks!

    • Eugene
      May 7, 2009 at 8:11 am

      you’re welcome

  5. May 7, 2009 at 2:21 pm

    Awesome tutorial dude. Can you post this in the forum if it’s not there already?

    • Eugene
      May 7, 2009 at 2:27 pm

      Thanks man! Sure, I can post in the forums.

  6. Animal
    May 7, 2009 at 3:42 pm

    Nice clean example code. Good tutorial.

    • Eugene
      May 7, 2009 at 5:21 pm

      Thanks, Nige.

  7. Iulian
    May 19, 2009 at 2:37 am

    Goog job! Didn’t even knew this feature exists.

  8. Katsu
    November 17, 2010 at 9:35 pm

    I have an Ext v2.2 messagebox with replaced two buttons(image) in the footer. It is not working in v3.3. How do I do this using fbar in v3.3? Please help. Thanks in advance.

  9. Svein
    March 4, 2011 at 9:29 am

    Great post!

    Is there a similar way to get the same functionallity on the top of a panel?

    • Eugene
      March 4, 2011 at 9:31 am

      No, this only applies to a footer of a panel.

  10. adrian
    April 6, 2011 at 2:17 am

    how do i do this in Ext 2.0 ? i wanted a checkbox beside the save / close button in fbar.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: