Ext.DomHelper.Template: one template, ten YUI grids

This is part of a YUI! Grids builder. This is what builds the grids body (bd) and it starts with a basic template:

Code:

---

div = new Ext.DomHelper.Template('<div class="{cls}">{ctn}</div>');
div.compile();

---

And some basic units and grids:

Code:

---

var apply = function(v) { return div.applyTemplate(v); };

// basic units
var u  = apply({cls: 'yui-u', ctn: 'my content'});
var uf = apply({cls: 'yui-u first', ctn: 'my content'});
// basic grids
var g  = apply({cls: 'yui-g', ctn: uf + u});
var gf = apply({cls: 'yui-g first', ctn: uf + u});

---

Voilá! We have TEN template grids ready to go! This switch template types:

Code:

---

switch(type) {
    case 'g1':
        // 1
        cfg = {cls: 'yui-g', ctn: 'my content'};
        break;
    case 'g2':
        // 1/2 - 1/2 (g)
        cfg = {cls: 'yui-g', ctn: uf + u};
        break;
    case 'g3':
        // 1/4 - 1/4 - 1/4 - 1/4
        cfg = {cls: 'yui-g', ctn: gf + g};
        break;
    case 'g4':
        // 1/2 - 1/4 - 1/4
        cfg = {cls: 'yui-g', ctn: uf + g};
        break;
    case 'g5':
        // 1/4 - 1/4 - 1/2
        cfg = {cls: 'yui-g', ctn: gf + u};
        break;
    // Special grids.
    case 'yui-gb':
        // 1/3 - 1/3 - 1/3
        cfg = {cls: type, ctn: uf + u + u};
        break;
    case 'yui-gc':
        // 2/3 - 1/3
    case 'yui-gd':
        // 1/3 - 2/3
    case 'yui-ge':
        // 3/4 - 1/4
    case 'yui-gf':
        // 1/4 - 3/4
        cfg = {cls: type, ctn: uf + u};
        break;
}
tpl = apply(cfg);

---

Haha! Man, I had a lot of fun building this. Soon an app based on it will be available. :-D

I need to get this stuff stable so I can check in the new Template/MasterTemplate classes.

They support buffering multiple child templates, and then inserting at the end. They also support formatting functions which can be customized. Here's an example:

Code:

---

var t = new Ext.MasterTemplate(
      '<select name="{name}">',
          '<tpl><option value="{value}">{text}</option></tpl>',
      '</select>'
);

t.add({value: 'foo', text: 'bar'});
t.add({value: 'foo1', text: 'bar2'});
t.append('some-el', {name: 'my-name'});

---

or you can fill it all at once (useful for json stuff):

Code:

---

t.reset(); // reset the internal buffers
t.fill(arrayOfStuff);
t.append('some-el', {name: 'my-name'});

---

You can have multiple child templates:

Code:

---

var t = new Ext.MasterTemplate(
      '<div id="{id}">',
          '<div class="right"><tpl name="right"><span>{stuff}</span></tpl></div>',
          '<div class="left"><tpl name="left"><span>{otherStuff}</span></tpl></div>',
      '</div>'
);

---

and insert by name:

Code:

---

t.add('right', {stuff: 'foo'});
t.add('left', {otherStuff: 'bar'});

t.fill('right', arrayOfStuff);

---

And last but not least is formatting (parens are optional):

Code:

---

var t = new Ext.MasterTemplate(
      '<select name="{name}">',
          '<tpl><option value="{value:trim}">{text:ellipsis(15)}</option></tpl>',
      '</select>'
);

---

There pickings are slim on the format functions now, but they are all defined on Ext.util.Format so it's easy to add new ones. You can also create special functions for an individual template:

Code:

---

var t = new Ext.MasterTemplate(
      '<select name="{name}">',
          '<tpl><option value="{value:trim}">{text:this.callMe('wtf', 'test')}</option></tpl>',
      '</select>'
);
t.callMe = function(value, arg1, arg2){
    ...
}

---

There's also a new function to make creating templates from hidden textareas easier:

var t = Ext.Template.from('textarea-id');


You can snag them from the alpha build at:

http://www.yui-ext.com/deploy/yui-ex...-alpha/source/

You will need Template.js and Format.js.

Maybe I'm not using this properly, but I cannot get the custom format callback to work in a Template. Is that only supported in Master Templates?

My Template contains:

Code:

---

var tpl = new Ext.Template('/images/shapes/{text:this.formatUrl}menu.gif')

---

and the template is defined as:

Code:

---

tpl.formatUrl = function(value) {
return 'OMG';
};

---

But the output of the template is:

Code:

---

"/images/shapes/undefinedmenu.gif"

---

Thanks to firebug, I know that the method is getting called, but it always appends "undefined" instead of "OMG".

Any thoughts?

Quote:

---

Originally Posted by jack.slocum

I need to get this stuff stable so I can check in the new Template/MasterTemplate classes.

---

I (finally) started to use it instead. Very clean, very easy. Thanks.

I am having the same problem trying to figure out how to call a custom template function. I also get undefined and not sure how to get a return value. I have tried returning templates and strings with no luck. Note: The function is being called.

Even if I get that to work I still wondering how to go about my design.

My goal is to have a button in my template that has a onClick to do something else.

I have a json bool being sent and needing that to determine if there needs to be this button.

I have even considering putting the button outside the template and using the function to show hide to button but it would be best if I could incorporate it into the template.

Any help on how the template custom functions work would be great.

Code:

---

                                        var tp2 = new Ext.MasterTemplate(
                                                '<div class="image_m">' +
                                                '<img src="http://www.herbarium.lsu.edu/images/archive/{filename}_m.{extension}">' +
                                                '<div id="btnZoom">{zoomEnabled:this.zoomButton}</div>' +
                                                '</div>'
                                        );


                                        tp2.zoomButton = function(value){
                                                        if (value) {                                                               
// Options 1 Create button here and attached click listener
// options 2 is find hidden button and make visible and set params.
                                                        }
                                                        return ("<button>");
                                        }

---

both of you guys getting undefined makes me think that its trying to access a property instead of the function. Humor me and try "this.functionName()". Do throwing the parens on there change the output?

Can I see the code calling the template?

Jack Jack Jack =D>

I found my first bug fix. YEAH!!!!!

debug line 411
call : function(fnName, value){
return this[fnName](value);
},

It helps if you put the return back. I knew there was nothing wrong just some slow stepping to find the problem.

Do I earn x-credit when I find fixes B)

Keep up the good work. You are miles away from my programing skills so I will stick to Web Application Dev not platform dev. Too hard on the brain. I might as well go derive some fourier analysis if I am that board. haha.

Ahhhhhhh.

Thank you Mike!

Jack, can I use nested templates ?
I want to create loop in a loop design.
Is that possible ?