Next we create our JsonView for the first tab, and load all of the JSON. JsonView doesn't have an autoCreate feature (yet?), so we check for the element we're going to assign it to, and create it if it doesn't exist.

So now we've loaded and created that element, but we haven't assigned it to the layout yet. That's because we're not done. Now we need to get that JSON data we loaded into the JsonView, so we can parse it further and get the categories and fields

We're now inside the function fired by the event from the element being updated with JsonView, and have gotten the JSON data. Next we go ahead and add the first tab to the layout. Since there are several tabs being added, make sure to use beginLayout() and endLayout() on the layout.

Now that the template is created, all that's left to do is to run through the JSON passed, and create the other tabs. Once again, I'm creating new div elements on the fly if they don't already exist. If they do exist, I'm clearing them.

The element is created (or cleared), and now it's time to put some data into it. Since we have an array of field objects (cat.fields), all that's needed is to run through the array of fields, and use .append() from the YAHOO.ext.DomHelper.Template (or YAHOO.ext.Template as we created it above, which is just a shortcut for that).

And there's an almost real world example of those various pieces of yui-ext being used to create a piece of an app. I'll update this later when I finish it. I'll be changing it so the field data is the actual values of the fields entered by the users, and it will include edit functionality.