Since EXT JS is part of CF 8, you have the advantage of using a fairly heavyweight js framework on a ColdFusion 8 server without having to worry about any expensive license issues and a js framework being available using the cfajaximport tag, assuming the site has access to the CFIDE/scripts folder.

Check out some of the grid examples on extjs.com.

http://extjs.com/deploy/dev...

The usage examples on the extjs.com site will also help you to understand how the extjs framework works. Just be prepaired to have a bit of a brain freeze when you look at the Ext JS code and then look at the auto-generated CFFORM/CFGRID code.

The only bummer is that the version of Ext JS included in CF 8 is at 1.0 and version 2.0 is available. One of these days I'll have to try upgrading to 2.0 and seeing what breaks in the form ui's.

Ray. Thanks for clearing it out.

I knew about the AJAX functions, but did not know that back-end was Ext. I just hoped that Ext was an official part of CF8. And I could make use of all the nice features/functions in the Ext JS, as for example "Drag'n'Drop".

I disagree with you Chris. Notice you mention that the version in CF8 is older. Doesn't that right there say you should download Ext yourself if you want to use it?

@Mikkel - well since Ext itself is free, nothing stops you from downloading it and using it. Don't forget too that CF has some very cool ways to help you serve up stuff for Ajax as well, including native JSON support. Did you know that you can take a CFC with a remote method, one that returns query data, and tell it to return the query as JSON by just passing returnformat=json in the url?

At the time Adobe started using Ext as CF's Ajax library, it was actually an extension for YUI, hence why YUI is also included; it used to be called YUI-EXT. Jack then abstracted the API and wrote adapters for various libraries such as jQuery and Prototype. Later, EXT became a standalone library as well, allowing you to extend your existing ones or use it by itself. EXT 2.0 is a huge step and very different than the previous versions.

So here's a suggestion. If you want the quick Ajax functionality for your sites writing very little JavaScript, use CF8. ColdFusion has always allowed to rapid application development. However, if you need to write a desktop-like looking application, and you don't know Flex, then use EXT 2.0.

HTH

@Ray
Sure, using the latest library is the right thing to in most cases (bug fixes, speed improvement), but if what you need is in the older library, it's perfectly OK to use that library.

The problem using the latest library in conjunction with cfform is that the new library isn't guaranteed to be completely compatible with existing cfform and cfajax tags if it hasn't been blessed by Adobe.

Using both libraries is a pain, since in most cases, the last loaded overwrites unless you either rip through the library and fix/adjust the scope.

The first Ext thing that I went for was the Tree. It has drag and drop. Unfortunately, while you can drag and drop within the tree, saving the order of the leafs is not really what the Tree is for. There is a treeSerializer class but it was added by a user and is not official. So even Ext 2.0 will have trying to decide between using the really new stuff and staying with the library that has already been integrated. . ....

Ok I need help. I modified the code so I can use paging. I couldn't figure out how to pass paging in the struct so I created a cfc. So I have 3 files now that consist of the JS, form and the component. The grid is working and filtering but it's only filtering the data on that page. It's not filtering all the data. How can I fix this? Here's my code:

JS:

function init(){

grid = ColdFusion.Grid.getGridObject("MemberGrid");
//var gridFoot = grid.getView().getFooterPanel(true); //make the footer
var gridHead = grid.getView().getHeaderPanel(true); //make the header so I can add button and CB

var tbar = new Ext.Toolbar(gridHead);

cb = new Ext.form.ComboBox({
id:"AccountFilter",
emptyText:"Filter By Account Status",
mode:"local",
triggerAction:"all",
displayField:"text",
valueField:"value",
store:new Ext.data.SimpleStore({
fields: ["value", "text"],
data: [
["Active","Active"],
["Inactive","Inactive"],
["Historical","Historical"],
["Guest","Guest"],

]
})
});

cb.addListener("select",function(combo,record,index){
var AccountStatus = record.data.value;
var AccountStatus2 = record.data.text;

grid.getDataSource().filter("ACCOUNTSTATUS",AccountStatus); //fi

});
Ext.fly(tbar.addSpacer().getEl().parentNode).setStyle('width', '100%');
tbar.addButton({
text:"Remove Filter",
icon:"plugin.png",
cls:"x-btn-text-icon",
tooltip:"Remove Filter",
handler:removeFilter
});
tbar.add(new Ext.Toolbar.Separator());
tbar.add(cb);
console.log(Ext);
}
function removeFilter(){
store = grid.getDataSource()
store.clearFilter();
cb.clearValue(); //clear the value of the combo box
cb.reset(); //reset it so empty text shows up
}

CFFORM:

<cfform>
<cfgrid format="html" striperows="yes" selectcolor="##D9E8FB" sort="true" width="500" name="MemberGrid" pagesize="500" bind="cfc:#Request.Config.CustomComponentDir#.Members.getMembers({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})">
<cfgridcolumn name="ID" display="false"/>
<cfgridcolumn name="STATUSID" display="false"/>
<cfgridcolumn name="POSITIONAME" header="Role" >
<cfgridcolumn name="FULLNAME" header="Full Name" >
<cfgridcolumn name="COMPANYNAME" header="Company" >
<cfgridcolumn name="EMAILADDRESS" header="Email Address" >
<cfgridcolumn name="ACCOUNTSTATUS" header="Status" >
</cfgrid>
</cfform>

<cfset ajaxOnLoad("init")>

CFC:
<cfcomponent>
<cffunction name="getMembers" access="remote">
<cfargument name="page" required="yes">
<cfargument name="pageSize" required="yes">
<cfargument name="gridsortcolumn" required="yes">
<cfargument name="gridsortdirection" required="yes">
<cfquery name="ListAllContent" datasource="#Request.Config.DSN.Primary#" >
SELECT
m.Id AS id,
m.LastName + ', ' + m.FirstName AS FullName,
m.CompanyId,
m.EmailAddress,
m.WorkPhone,
c.Name AS CompanyName,
p.Name AS PositionName,
acstat.Name AS AccountStatus,
acstat.id as StatusID,
getdate() as currenttime

FROM
nma_Members AS m INNER JOIN
nma_Companies AS c ON m.CompanyId = c.Id INNER JOIN
nma_AccountStatuses AS acstat ON m.AccountStatusId = acstat.Id INNER JOIN
nma_Positions AS p ON m.PositionId = p.Id
<cfif gridsortcolumn neq ''>
order by #gridsortcolumn# #gridsortdirection#
</cfif>

</cfquery>
<cfreturn queryconvertforgrid(ListAllContent,page,pagesize)/>
</cffunction>
</cfcomponent>