Ext

HomeProductsSupportJobsCompanyBlogStore
HomeBlog

Using the standard Panel title config to organize Ext JS form fields

May 14, 2008 by Jack Slocum

Yesterday while working on our internal support system I had a desire to organize the fields on a form a little better. I didn’t want to use a FieldSet and add full wrapping or another layer of indention in my form code (it’s indented deep enough!) so I decided to give the standard Panel title config attribute a try.

The Panels on my form were using baseCls:’x-plain’ which strips all styling except for required attributes for Ext layouts to function (e.g. overflow:hidden). As expected, the Panel titles looked pretty hideous with no styling. I came up with this simple, short solution and figured I would post it since others might find it useful. Although this application is running on an Ext JS 3.0 dev version, this code will work fine with Ext JS 2.x as well.

Getting started

First, I added some config options to the Panels:

{
    xtype:'panel',
 
    // add a title
    title:'Subscription Details',
 
    // make it collapsible 
    collapsible:true,
 
    // no animation, it looks odd (IMO)        
    animCollapse: false,
 
    // Clicking the title should trigger collapse/expand
    titleCollapse:true,
 
    // No collapse tool button needed
    hideCollapseTool: true,
 
    // generate markup with a custom prefix 'form-group' instead of x-panel or x-plain    
    baseCls:'form-group',
 
    ...

Hideousness

This technically worked, but wasn’t very aesthetically pleasing:

Add in some CSS…

So I added some CSS to my application’s CSS file:

/* add some padding so it spaces nice and relative elements dn't get clipped */
.form-group {
	padding-bottom:5px;
	overflow:hidden;
}
 
/* Simple blue border */
.form-group .form-group-header {
	padding:0;
	border-bottom:1px solid #c3daf9;
}
 
/* Position the text element so it appears over the border added above */
.form-group .form-group-header-text {
	font-size:11px;
	font-family:tahoma,arial,sans-serif;
	line-height:13px;
	text-transform:uppercase;
	position:relative;
	left:5px;
	top:5px;
	padding:1px 5px 1px 20px;
	color:#4e79b2;
	background:#fff url(../images/form-collapse-icon.gif) no-repeat 2px 0;
}
 
/* Copied from x-plain (for IE + layouts to work) */
.form-group-body {
    overflow:hidden;
}
 
/* Copied from x-plain (for IE + layouts to work) */
.form-group-bwrap {
    overflow:hidden;
    zoom:1;
}
 
/* Change the toggle icon when collapsed */
.x-panel-collapsed .form-group-header-text {
	background-position: 2px -15px;
}

Extellent!

I’m not a designer, but I was pretty happy with the result:

Reusable

I personally can’t handle setting all those config options on every form group I create and I really need the code I am working with to stay clean, so I created this simple extension:

Ext.ux.FormGroup = Ext.extend(Ext.Panel, {
	collapsible:true,
	animCollapse: false,
	titleCollapse:true,
	hideCollapseTool: true,
	baseCls:'form-group'
});
Ext.reg('formgroup', Ext.ux.FormGroup);

So now when I want to add a form group, it’s as simple as using a different xtype and setting a title:

{
    xtype:'formgroup',
    title:'Subscription Details',
    ...

Resources

The CSS sprite image used for the expand/collapse icon in the CSS above is available here.

This entry was posted on Wednesday, May 14th, 2008 at 12:50 pm and is filed under Ext JS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

23 Responses to “Using the standard Panel title config to organize Ext JS form fields”

  1. Ryan
    Posted on May 14th, 2008 at 4:29 pm

    Looks great - what theme are you using there? Mind sharing it?

  2. mdmadph
    Posted on May 14th, 2008 at 4:55 pm

    Well, that’s a neat way to create extensions on the fly for stored types like that.

    You do realize that it’s gotten to the point where some of us have almost forgotten how to code regular javascript anymore, don’t you? :P

  3. Nick D
    Posted on May 14th, 2008 at 6:19 pm

    Thanks for sharing Jack. Always interesting to see how you approach a problem. Your solution looks great! Is this application going to be available to subscription members?

  4. Jack Slocum
    Posted on May 15th, 2008 at 11:29 am

    @Ryan

    It’s not an Ext theme, it’s just a look hacked up for this application.

    @Nick

    Once completed, it will be part of the subscriber area we are working on.

  5. Jay Garcia
    Posted on May 15th, 2008 at 10:49 pm

    Pretty slick. It’s always nice to read how the ‘big boys’ do it :).

  6. Jay Garcia
    Posted on May 15th, 2008 at 10:57 pm

    … One more thing. I think this demonstrates how, using the common patterns that you and company have demonstrated, can make life easy to create reusable components. I tell people time and time again - Ext can examined like leggos. the components can ’stack’ up on each other, to build complex components. An example of this is a ‘tabstrip toolbar’, which can be achieved in about 20 lines. Ext is just amazing stuff!

  7. Daily del.icio.us for May 12th through May 16th — Vinny Carpenter’s blog
    Posted on May 16th, 2008 at 9:01 am

    [...] Ext JS - Using the standard Panel title config to organize Ext JS form fields - Yesterday while working on our internal support system I had a desire to organize the fields on a form a little better. I didn’t want to use a FieldSet and add full wrapping or another layer of indention in my form code so I decided to give the standard [...]

  8. Adarsh Bhat
    Posted on May 16th, 2008 at 9:42 am

    > I’m not a designer.

    Who _is_ your designer? Must admit that s/he does an amazingly good job.

  9. Angelo
    Posted on May 16th, 2008 at 4:25 pm

    Very very nice and clean “theme”.. and useful article…

    ..hope to see the theme shared.. ;-P

  10. Jack Slocum
    Posted on May 16th, 2008 at 5:27 pm

    @Jay

    I like that analogy. That’s exactly how I use it. A config option here, a subclass there and a new custom component for whatever I am working on is within reach.

    @Adarsh Bhat

    I’ll take that as a compliment. :)

  11. mario
    Posted on May 19th, 2008 at 1:51 am

    you understimate your design skills. i like your clean designs much more than those the designers i’ve had the displeasure to work with. to them usability is about photoshop ‘cheese’ effects. they throw in all the different gloss, gradient and bevel tricks even though you and i both know those effects are ridiculously easy to do in photoshop. you definitely raised the bar on how to create aesthetically pleasing widgets.

  12. Biju Kunnappada
    Posted on May 21st, 2008 at 1:46 pm

    Thanks for the petty nice and simple hack Jack :)
    Brillaint idea…

    Cheers!,
    Biju Kunnappada.
    Nortel.

  13. MikeB
    Posted on May 22nd, 2008 at 1:57 pm

    Great looking Jack, and I like the little section on “Reusable” you put in (show’s a neat little trick for those of us still learning this toolset).

    However I’m curious how this was an improvement instead of using fieldset’s? You’re still using a single panel for each section correct? Wouldn’t a fieldset have used the same “overhead” in terms of coding and layers and code indention?

    Thanks
    Mike B

  14. Eric24
    Posted on May 23rd, 2008 at 2:09 pm

    Very nice!

    I’m new to ExtJS and just learning it. It would be very useful to me to see the code that creates the form (or maybe you could point me to some forum posts that would help me understand a) multi-column form field layouts and b) labels above the fields.

    Thanks!
    Eric

  15. Steven Roussey
    Posted on May 24th, 2008 at 2:52 am

    Jack:

    “I’m not a designer, but I was pretty happy with the result”

    OMG: Two reasons I chose that we should use ExtJS was that it was beautiful in code and in visual style. In fact, it was the visual style that stopped me long enough to bother looking at the code. Few people have a talent for both. And you do!

  16. Steve
    Posted on May 25th, 2008 at 4:06 pm

    Thanks Jack. Looks good! We’ve been using the technique you mention in the Reusable section for a while, but I’m glad to see it “officially” documented so others can learn how much it helps…
    I’m curious, is there a way to generally apply that technique, ie. imagine that I have a TextField, DateField, TextArea, custom field, etc. as part of a form and I want to apply a common set of config options to them with a one-line technique. Derivation is no longer possible; the ‘defaults’ config in the parent applies to more fields than we want. Is there some other way to pass in some override attributes I’m not thinking of? Could there be? :)

  17. Nick
    Posted on June 1st, 2008 at 4:58 pm

    The look is fantastic, do you mind sharing the css file that you created ?

  18. dajianshi
    Posted on June 5th, 2008 at 1:32 am

    I’m not sure,Is not the fieldSet has the same behaviour

  19. Carel
    Posted on June 5th, 2008 at 8:15 am

    This kind of documentation is worth much more than the alternatives. most notably the api ref that does not provide working samples showing application of what is defined there. The forums give some help but we should have many many more of these blog entries.

  20. drowsy
    Posted on June 6th, 2008 at 11:41 am

    This is a great article, and I’d love to see more like it! Thank you for this.

  21. oxyum
    Posted on June 12th, 2008 at 4:23 am

    Sorry, but can you give me full JS (JSON) code of that form (only visual part)?

  22. links for 2008-08-31 « Breyten’s Dev Blog
    Posted on September 1st, 2008 at 1:13 am

    [...] Ext JS - Blog Gotta read this more carefully in the next few days. (tags: extjs tutorials forms) [...]

  23. Stuart W
    Posted on October 19th, 2008 at 4:06 pm

    Can anyone answer Eric’s question? I could use that info as well…

Leave a Reply

To prove that you're not a bot, please answer this question:



HomeProductsSupportJobsCompanyBlogStore
© 2006-2008 Ext, LLC