View Full Version : layoutdialog, jsonview, domhelper templates, oh my

4 Dec 2006, 6:03 PM
So, I wanted to make one request to load some JSON and create a LayoutDialog with multiple tabs generated from that JSON. To explain it better, I'll just give you a sample of the JSON.


:"2006-11-24","categories":[{"cat_name":"Basic Info","cat_id":"1","fields":[{"id":"1","name":"sex","cat"

:"1","type":"radio"}]},{"cat_name":"Interests and Personality","cat_id":"20","fields":[{"id":"3","name"

:"Self Description","cat":"20","type":"multi-line"}]}]}]}

So, what I'd want from this is 3 tabs.
A main view, that includes that user information
Then 2 tabs, 1 for each category that displays say.. the field id and the field name.

First, we set up the dialog. If it doesn't already exist, we create it. This takes advantage of the new autoCreate feature of the BasicDialog.

if ( typeof editUserDialog == "undefined" ) {
editUserDialog = new YAHOO.ext.LayoutDialog("editUserDialog", {
autoCreate: true,
center: {
autoScroll: true,
autoTabs: true,
alwaysShowTabs: true,
tabPosition: "top"
editUserDialog.addKeyListener(27, editUserDialog.hide, editUserDialog);
editUserDialog.addKeyListener(13, YAHOO.whasit.admin.editUser, editUserDialog);
editUserDialog.addButton('Close', editUserDialog.hide, editUserDialog);
submitButton = editUserDialog.addButton('Submit', YAHOO.whasit.admin.editUser, editUserDialog);

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.

if (!getEl('editUserDialog-mainView'))
var dh = YAHOO.ext.DomHelper;
dh.append(document.body, {tag: 'div', id: 'editUserDialog-mainView'});
var tpl = new YAHOO.ext.Template('<div>Username: {username}</div>' +
'<div>Birthday: {birthday}</div>' +
'<div>Member Since: {join_date}</div>' +
'<div>Last Login: {last_login}</div>');
var mainView = new YAHOO.ext.JsonView('editUserDialog-mainView',
tpl, {jsonRoot: 'user'});
mainView.load("/ci/admin/edit_user", "id=" + id);

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

mainView.el.getUpdateManager().on('update', function(){
var userCategories = mainView.jsonData.categories;

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.

var eulayout = editUserDialog.getLayout();
eulayout.add('center', new YAHOO.ext.ContentPanel('editUserDialog-mainView', {title: 'Main Info'}));

If all of the tabs are going to use the same template, then the next step is not necessary. however I'm using a different tab for all the subsequent tabs, so it needs to be create.

var fieldsTpl = new YAHOO.ext.Template('<div>{id}: {name}</div>');

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.

for (var c = 0, clen = mainView.jsonData[0].categories.length; c < clen; c++ )
var cat = mainView.jsonData[0].categories[c];
if ( !getEl('editUserDialog-cat-' + cat.cat_id))
dh.append(document.body, {tag: 'div', id:'editUserDialog-cat-' + cat.cat_id});
} else {
getEl('editUserDialog-cat-' + cat.cat_id).update('');

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).

for ( f = 0, flen = cat.fields.length; f < flen; f++ )
try { fieldsTpl.append('editUserDialog-cat-' + cat.cat_id, cat.fields[f]);

The category tab is now loaded with field data. So it gets added to the layout.

eulayout.add('center', new YAHOO.ext.ContentPanel('editUserDialog-cat-' + cat.cat_id, {title: cat.cat_name}));

All that's left to do is to end the update, and set the first panel to be the one shown.


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.