Ext

{
    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',
 
    ...

/* 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;
}

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

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

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

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

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?

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?

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.

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 :).

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!

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 […]

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.

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

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.

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.

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.

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

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

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!

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?

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

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

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

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

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.

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.

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)?

fastWebSearch
Posted on July 15th, 2008 at 3:14 pm

fastWebSearch

Big search engines can lead you in circles, in which case try a smaller targetted engine!

Anonymous
Posted on July 20th, 2008 at 11:11 pm

feed

add url car loan
Posted on July 23rd, 2008 at 5:01 pm

add url car loan

After reading this post, I am not sure I understand what you are trying to relate. Please expand on your thoughts a little more. Thanks

ephedrine synthesis
Posted on July 25th, 2008 at 1:04 pm

ephedrine

ephedrine plus