cfext Layouts

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.






Blog Administration


View Entries

Add Entries


I am the 1st panel!


I am the 2nd panel!


I am the 3rd panel!


ads





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.

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.


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.

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.


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.

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.





status bar




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.

















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.

Categories: ColdFusion,JavaScript

About The Author

My name is Dan Vega and I am a Software Developer based out of Cleveland OH. I love to play with new technologies and write about my experiences here. When I am not busy being a full time geek I love to lift heavy weights and hang out with friends and family. If you have any questions please don't hesitate to contact me.

Follow me on:
  • http://cfsilence.com todd sharp

    To me, the most important part of what you’re working on would be to mirror the power of the CF8 stuff with dynamic content.

  • http://www.miuaiga.com Miichael Evangelista

    Hi Dan – good stuff!
    I’ve been following all of your cfext progress with great interest… but zooming out on this for a minute, and perhaps showing my ignorance, is the overall idea here to replace the new cflayout and other ext-based tags in CF8 with tags that will use a different version of ext? or, use different parts of ext ‘s abilities? or… ?

    I have been playing with cflayout as a potential skin for a content management app … looks interesting but also somewhat limited.

    What’s the difference, in a nutshell, between the onboard CF8 stuff and the ext handles you are creating here? Not doubting – just unclear, and very interested!

  • Dan Sorensen

    Good stuff. I’m glad to hear you’re working with Justin and keeping that other library in mind. Will your project merge with Justin’s?

    I’m really interested in the features of Ext 2.0 that aren’t available in CF8 such as multi-column trees, portals, and panels. Maybe even the drag and drop trees. I know those aren’t the easy pieces. The rest of it’s great too since we still have a server on CF7.

    I love the syntax you used in the examples above.

    I’m going to be using Extjs to improve the forms and controls on our Intranet site that aren’t easily produced using standard CF tags. I’d love to do more, but for now, I’m concerned about how large the page downloads may be if I go too crazy.

    I love how this is coming together.

  • Sana

    Really Great Stuff::

    one thing I would like to suggest, that should not load ext-all.js with every request. You could break it down according to custom-tags implementation.
    (example For Panel)
    1:ext-base.js
    2:Container.js
    3:Panel.js
    4:ContainerLayout.js

    Just a idea!

    Keep up good work…

  • http://blog.pengoworks.com Dan G.Switzer, II

    @Dan:

    Not to discourage you or anything, but you should be able to use the ExtTLD right from within ColdFusion using the cfimport tag.

    I think most people forget that ColdFusion can use JSP tag libraries.

    That said, I haven’t tried it yet (but I know have a mini project for myself!)

  • http://blog.pengoworks.com/ Dan G. Switzer, II

    @Dan Sorensen:

    Not to answer for Dan Vega (lots of Dan’s in this post!) but the biggest advantage I see of using a 3rd party library to Ext (instead of CF8’s built-in support) is there’s a lot more flexibility.

    A third party can maintain the library much quicker–keeping up with the latest versions. As you probably know, CF8’s Ext support is built on Ext v1. Ext v2 was a major upgrade over v1.

    CF8’s support is also fairly limiting. They’ve implemented an factory layer to try to wrap things up and make them more consistent, but this factory layer poses a few obstacles.

    I applaud Dan’s efforts in building a tag library based on the latest version of Ext.

  • http://therealdanvega.com Dan Vega

    @Michael – My goal is to bring Ext to CF Developers. Not sure where that is going yet, but I think that Ill throw a post together on that.

    @Dan S – Thanks for the comments.

    @Sana – That is in the plans for sure. I just figured during development it will be easier using the include all. Thanks!

    @Dan G – First off thanks for the comments, they are right on with my thoughts. I know that you can import jsp tags but my goal was not to mimik the ExtTLD library. While they do some good things I want to do some things different. Plus with it being cf and open source it is not limited to Ext 2.0. This project can grow with the community as Ext does!

    Keep the comments coming, this is good stuff guys!

  • http://blog.pengoworks.com/ Dan G. Switzer, II

    @Dan:

    Like I said, my intention was not to discourage you. I like the idea of having a pure CF solution. :)

    PS – I think the "Remember My Information" function isn’t working. I’m having to re-type my information every time.

  • http://therealdanvega.com Dan Vega

    I know you weren’t Dan and I appreciate your feedback. I will look into the remember function.

  • http://cfsilence.com todd sharp

    @Dan Switzer:

    I tried to get the ExtTLD stuff working the other day to no avail. It seems CF was not finding the tags because the library is not in a JAR? I’m not sure…

    But please, if you can get it to work, please share! I’m not too experienced with JSP stuff…

  • Dan Sorensen

    Lots of Dan’s on here. ;-)

    Dan G: I believe that the ability to use JSP directly is a feature only available with Enterprise Edition.

  • http://blog.pengoworks.com/ Dan G. Switzer, II

    @Todd: CF needs a TLD file to use JSP tags (which oddly enough ExtTLD doesn’t seem to include.)

    @Dan Sorensen: I don’t think Enterprise is required for JSP tags. The docs don’t seem to specify from the cursory glance I took.

  • Dan Sorensen

    My JSP limitation comment was based on the comments on this Livedocs page:
    http://livedocs.adobe.com/coldfusion/7/htmldocs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=ColdFusion_Documentation&file=00000276.htm

    I’m using CF 8 Developer Edition right now, so I’m not able to test which features are limited in Standard. I should have looked at the comments more closely, the date back to Macromedia CF 7.

    I’m looking through my Adobe CF 8 WACK v3 book now and I’m not seeing any limitations either. (but if that’s true for CF7, then that eliminates that option for CF 7 users.)

  • Sana

    Hi,

    Your are doing awesome job.

    "The Ext team is happy to announce the release of version 2.0.1 of Ext JS. This is a maintenance release that fixes several issues with the 2.0 release. All Ext 2.0 users are encouraged to upgrade at your earliest convenience."

    Thanks
    Sana

  • eremiya

    Hi Dan,
    It’s eremiya. Thanks again for all your work.
    I have an issue:
    I have a file with a grid or a form. It works perfectly.
    I have a file using cf_viewport that works perfectly (actually base on your example). But when I try to include the grid in my viewport using autoload, it does not work…!
    here is the example:
    http://www.eremiya.com/dev.zip

    Do you have any ideas why this is not working?

  • http://therealdanvega.com Dan Vega

    I will have to look at the grid code but I imagine its because I am using grid.show() at the end of that. Are you saying that a grid inside of a viewport will not work?

  • eremiya

    Yeah. I just want to do something similar to saki’s examples (http://examples.extjs.eu/) but with cfext.
    And when I include my pages, for example my grid or my form, nothing appears, but also no errors in firebug.
    Thanks a lot.

  • eremiya

    Sorry Dan, I fixed it. For all who need to do that, you have to use an iframe with a src attibute. Then your grid, form or whatever ext comp you want to use will appear.
    Sorry guys and good dev!

  • http://therealdanvega.com Dan Vega

    Try wrapping the tag inside a div. <div id="whatever"><cf_grid></div>. Ifpm not I would like at the generated source and find out whats causing it. It’s been a long time since I used any of this stuff.

  • tony

    I’m using the cf_grid tag and i’m noticing that the grid, itself, is not rendering within my table layout. is there something I can do to get this to show within the "td" tag? is this a known issue