I thought I would take a second to show you what I have been doing with the cfExt library. After taking a look at ExtTLD (really good work guys!) I realized that certain things were going to have to change to meet the big picture expectations. I talk to Justin Carter regularly and he has been doing some great work with the Ext framework as well. Using these two resources I started re writing how components would interact with each other. I think things are on the right track now and would like to share a couple of examples that I did.

The first thing I did was add an application tag (you could use app as well) and take out the ext:include tag. The tld project nailed this on the head using this as a setup feature. The application tag has the following attributes. The good thing about the application tag is that defaults are set for everything so if you dont need to pass anything you are ready to go.

  • Path - If the cfext/lib folder is not in the root of your project or you will be calling the library from outside of the root, you can use the path to provide absolute URL to the lib folder for use of js & css.
  • Adapter - Allows you to specify what adapter you want to use with Ext. Valid values are jquery, prototype and YUI.
  • Theme - Allows you to change the theme (look and feel). Right now valid values are vista,gray,black & slate. Of course if you do not pass a value we will use the default.
  • Debug - Include the Ext-debug js
  • LoadingMask (true|false) If set to true display a loading mask and transition into the screen.

I know you don't care about any of that and just want to see some code. This code is not in any download yet but you can grab it from subversion. Because it is still changing I don't have anything live but included some screen shots of what the code produces. The first example is an application (doesnt do much) that uses a border layout. As you can see its pretty easy to set up and lucky for you, not 1 line of JS on your part.
view plain print about
1<cfimport prefix="ext" taglib="/cfext">
2<html>
3<head>
4    <title>Border Layout Example</title>
5    <style>
6    .north {
7        background:#1C3B75;
8        color:#fff;
9        font-family: tahoma,arial,sans-serif;
10        font-size:16px;
11        padding:10px;
12    }
13    .status {
14        background:#DFE8F6;
15        font-family:Arial,sans-serif;
16        font-size:11px;
17        padding:4px;
18    }
19    </style>
20</head>
21
22<body>
23
24    <ext:application path="/cfext">
25        <ext:viewport layout="border">
26            <ext:panel region="north" height="35" baseCls="north">
27            Blog Administration
28            </ext:panel>
29            <ext:panel region="west" layout="accordion" title="Navigation" width="250" split="true" collapsible="true" bodyStyle="background:##DFE8F6;">
30                <ext:panel title="Entries">
31                    <p>View Entries</p>
32                    <p>Add Entries</p>
33                </ext:panel>
34                <ext:panel title="Categories">
35                    <p>I am the 1st panel!</p>
36                </ext:panel>
37                <ext:panel title="Archives">
38                    <p>I am the 2nd panel!</p>
39                </ext:panel>
40                <ext:panel title="Links">
41                    <p>I am the 3rd panel!</p>
42                </ext:panel>
43                <ext:panel title="Ads">
44                    <p>ads</p>
45                </ext:panel>
46            </ext:panel>
47            <ext:panel region="center" cls="center">
48                <ext:tabPanel region="center" title="Blog Application">
49                <ext:tab title="Entries">
50                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur ac sem. Aliquam erat volutpat. Phasellus ornare. Integer sollicitudin erat et ligula. Aliquam erat volutpat. Cras interdum nisi. Quisque quis ante. Pellentesque sit amet dolor ut mi blandit gravida. Nulla elementum risus ornare lacus. Cras id augue sit amet nulla dapibus eleifend. Maecenas malesuada ultrices risus. Mauris vel ante. Donec vitae ipsum. Morbi mollis justo vel nisi. Etiam iaculis. Nullam non justo non nibh viverra sollicitudin. Mauris nisi nunc, blandit id, fringilla et, bibendum sed, tortor. Sed cursus sem non lorem. Aliquam in ligula eu ante molestie dictum.</p>
51                    <p>Maecenas erat libero, ultrices in, rutrum id, hendrerit non, elit. Vestibulum quis augue cursus ante pulvinar vestibulum. Nulla pharetra justo et elit. Curabitur sit amet ipsum. In sollicitudin laoreet metus. Proin lectus arcu, vestibulum id, consequat id, pretium vitae, magna. Maecenas a sem. Sed lectus odio, tincidunt eget, consequat nec, elementum et, lorem. Suspendisse eget sem. Etiam metus. Vivamus luctus scelerisque nibh.</p>
52                </ext:tab>
53                <ext:tab title="Comments">
54                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur ac sem. Aliquam erat volutpat. Phasellus ornare. Integer sollicitudin erat et ligula. Aliquam erat volutpat. Cras interdum nisi. Quisque quis ante. Pellentesque sit amet dolor ut mi blandit gravida. Nulla elementum risus ornare lacus. Cras id augue sit amet nulla dapibus eleifend. Maecenas malesuada ultrices risus. Mauris vel ante. Donec vitae ipsum. Morbi mollis justo vel nisi. Etiam iaculis. Nullam non justo non nibh viverra sollicitudin. Mauris nisi nunc, blandit id, fringilla et, bibendum sed, tortor. Sed cursus sem non lorem. Aliquam in ligula eu ante molestie dictum.</p>
55                    <p>Maecenas erat libero, ultrices in, rutrum id, hendrerit non, elit. Vestibulum quis augue cursus ante pulvinar vestibulum. Nulla pharetra justo et elit. Curabitur sit amet ipsum. In sollicitudin laoreet metus. Proin lectus arcu, vestibulum id, consequat id, pretium vitae, magna. Maecenas a sem. Sed lectus odio, tincidunt eget, consequat nec, elementum et, lorem. Suspendisse eget sem. Etiam metus. Vivamus luctus scelerisque nibh.</p>
56                </ext:tab>
57                <ext:tab title="Categories">
58                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur ac sem. Aliquam erat volutpat. Phasellus ornare. Integer sollicitudin erat et ligula. Aliquam erat volutpat. Cras interdum nisi. Quisque quis ante. Pellentesque sit amet dolor ut mi blandit gravida. Nulla elementum risus ornare lacus. Cras id augue sit amet nulla dapibus eleifend. Maecenas malesuada ultrices risus. Mauris vel ante. Donec vitae ipsum. Morbi mollis justo vel nisi. Etiam iaculis. Nullam non justo non nibh viverra sollicitudin. Mauris nisi nunc, blandit id, fringilla et, bibendum sed, tortor. Sed cursus sem non lorem. Aliquam in ligula eu ante molestie dictum.</p>
59                    <p>Maecenas erat libero, ultrices in, rutrum id, hendrerit non, elit. Vestibulum quis augue cursus ante pulvinar vestibulum. Nulla pharetra justo et elit. Curabitur sit amet ipsum. In sollicitudin laoreet metus. Proin lectus arcu, vestibulum id, consequat id, pretium vitae, magna. Maecenas a sem. Sed lectus odio, tincidunt eget, consequat nec, elementum et, lorem. Suspendisse eget sem. Etiam metus. Vivamus luctus scelerisque nibh.</p>
60                </ext:tab>
61            </ext:tabPanel>
62            </ext:panel>
63            <ext:panel region="south" height="25" baseCls="status">
64                status bar
65            </ext:panel>
66        </ext:viewport>
67    </ext:application>
68
69</body>
70</html>
I also whipped together a quick example of how you can create a tree navigation. This example actually creates some dynamic tree nav using a loop.
view plain print about
1<cfimport prefix="ext" taglib="/cfext">
2<html>
3<head>
4    <title>Dynamic Tree Panel Test</title>
5</head>
6
7<body>
8
9    <ext:application path="/cfext">
10        <ext:viewport layout="border">
11        
12            <ext:panel region="west" width="200" split="true">
13                <ext:treePanel title="Dynamic Nodes" border="false">
14                    <cfloop from="1" to="5" index="x">
15                    <ext:treeNode text="Layouts #x#">
16                        <cfloop from="1" to="5" index="y">
17                            <ext:treeNode text="Sub Node #y#"/>
18                        </cfloop>
19                    </ext:treeNode>
20                    </cfloop>
21                </ext:treePanel>
22            </ext:panel>
23            
24            <ext:panel region="center">
25                
26            </ext:panel>
27            
28        </ext:viewport>
29    </ext:application>
30
31</body>
32</html>
I think I am really on the right path to bring Ext to ColdFusion. I would love to know your thoughts on this as well as some suggestions. I need to keep everyone in mind when building these wrappers. If you were to use the Ext library what would you use it for? Full applications, windows, message boxes? Example applications or ideas on how to leverage it in your application will give me some good ideas for examples to put together.