PDA

View Full Version : EXTJS TREE and Coldfusion tutorial



Limey
11 May 2009, 5:58 AM
Hello All,

I have a project at work where I have been asked to do a drag and drop tree. I am new to EXT, and I am quite impressed by what it can do, however, I'm really having trouble getting started.

Are their any good tutorials out there for using EXTJS with Coldfusion? Anything to do with dynamically loading the data would be great! I have been searching since last week, and I can't seem to find anything that will show me the basics of the data load.

Thanks

aconran
11 May 2009, 6:50 AM
Hey Limey -

Fortunately, Ext is server-side agnostic and capable of working in any server-side environment which is capable of producing JSON. If you are using CF 8 then you can use the SerializeJSON (http://livedocs.adobe.com/coldfusion/8/functions_s_03.html) function to serialize your arrays and structures into JSON.

Setup an Ext.tree.TreePanel with an appropriate Ext.tree.TreeLoader. The TreeLoader will point to a particular URL and post the root tree node's ID in the form scope. You will then create an array of structures which each have text and id. Take a look at the top of the TreeLoader (http://extjs.com/deploy/dev/docs/?class=Ext.tree.TreeLoader) docs to see the output you should be generating. Each time that you expand another tree node it will post the id of the tree node you are expanding in the form.node scope.

Limey
11 May 2009, 7:24 AM
Ok, so maybe then I'm looking for two different tutorials. One tutorial on how to use the tree object and one on using json for that tree (and maybe dynamic data loading). I use CF7 and so there is no built in support for JSON, plus, I need help in the description of the extra attribute tags that get included (since i'm going to have to write the JSON files manually.

aconran
11 May 2009, 7:41 AM
Take a look at the CFJSON (http://www.epiphantastic.com/cfjson/) project which will enable you to create JSON via a cfc. You don't need to manually create any json. Create arrays and structures as you normally would and encode them.

Limey
11 May 2009, 7:56 AM
But that won't handle all the attribute tags that are included in your example JSON files.



[{
text:'Folder 1',
children:[{
text:'Leaf 1',
leaf:true,
iconCls:'text'
},{
text:'Leaf 2',
leaf:true,
iconCls:'text'
},{
text:'Leaf 3',
leaf:true,
iconCls:'text'
},{
text:'Leaf 4',
leaf:true,
iconCls:'text'
},{
text:'Leaf 5',
leaf:true,
iconCls:'text'
}]
},

aconran
11 May 2009, 8:24 AM
Sure it will.... Whenever you create a structure you can add arbitrary key/value pairs. For example the first child leaf node could be represented as follows....


<cfset leafNode = StructNew() />
<cfset leafNode['text'] = 'Leaf 1' />
<cfset leafNode['leaf'] = true />
<cfset leafNode['iconCls'] = 'text' />

Limey
11 May 2009, 9:16 AM
Ok, in your 4 lines of code, you have been able to provide me more than i have found searching all morning. I'm very thankful for all your help!

So, i just found that CF treats all its queries as structs. So this means i can feed my query directly to CFJSON and have a JSON output. However, is there a way to append the attributes after they have been put into a struct? or maybe include them in the query?

tryanDLS
11 May 2009, 9:36 AM
Isn't there a CF forum for this type of question? I would think you're going to find few people here with enough CF expertise to guide you.

Limey
11 May 2009, 11:06 AM
Sure it will.... Whenever you create a structure you can add arbitrary key/value pairs. For example the first child leaf node could be represented as follows....


<cfset leafNode = StructNew() />
<cfset leafNode['text'] = 'Leaf 1' />
<cfset leafNode['leaf'] = true />
<cfset leafNode['iconCls'] = 'text' />



But doing this over multiple rows will still only create one row (since you will just keep updating the 'text' key).

aconran
11 May 2009, 12:21 PM
So, i just found that CF treats all its queries as structs. So this means i can feed my query directly to CFJSON and have a JSON output.
Yes, but they are stored in terms of columns rather than rows. If you are interested, there is a user extension on the forums here that will read in CF's format.



However, is there a way to append the attributes after they have been put into a struct? or maybe include them in the query?

Sure, loop over the structure/query and add any arbitrary key/value pairs you want.

Limey
12 May 2009, 4:14 AM
Ok, i think i got what i need building my file, but just one more question (thanks for your patience!)

So in the sample JSON above, there are a bunch of struct of structs, but how does the top level get created without a key? It seems just to be more like 3 structs in an array.

Limey
12 May 2009, 8:04 AM
I figured it out. I have to put my structs in arrays.

I have a working file now. Thanks for all the help!