Commit 356a66cb authored by Rene Saarsoo's avatar Rene Saarsoo
Browse files

Add itemTpl config to ThumbList. 

Now instead of defining the whole template when instanciating ThumbList,
only defining the part that differs - the itemTpl.
parent 47c7b0b1

template/app/view/ThumbList.js

+19 −3
Original line number Diff line number Diff line
@@ -15,10 +15,11 @@ Ext.define('Docs.view.ThumbList', { 
    urlField: 'url',



    /**

     * @cfg {Ext.XTemplate/String[]} tpl (required)

     * The template to use for rendering.

     * Clickable items must be wrapped inside `<dl>` element.

     * @cfg {String[]} itemTpl

     * The template to use for rendering a single item.

     * The template should create a single `<dd>` element.

     */

    itemTpl: [],



    initComponent: function() {

        this.addEvents(
@@ -30,6 +31,21 @@ Ext.define('Docs.view.ThumbList', { 
            'urlclick'

        );



        this.tpl = new Ext.XTemplate(Ext.Array.flatten([

            '<div id="sample-ct">',

                '<tpl for=".">',

                '<div><a name="{id}"></a><h2><div>{title}</div></h2>',

                '<dl>',

                    '<tpl for="items">',

                        this.itemTpl,

                    '</tpl>',

                '<div style="clear:left"></div></dl></div>',

                '</tpl>',

            '</div>'

        ]));

        // Hide itemTpl config from parent class

        this.itemTpl = undefined;



        this.on({

            'afterrender': function(cmp) {

                cmp.el.addListener('mouseover', function(evt, el) {

template/app/view/examples/Index.js

+15 −26
Original line number Diff line number Diff line
@@ -25,12 +25,10 @@ Ext.define('Docs.view.examples.Index', { 
            data: catalog

        });



        var tpl = Ext.create('Ext.XTemplate',

            '<div id="sample-ct">',

                '<tpl for=".">',

                '<div><a name="{id}"></a><h2><div>{title}</div></h2>',

                '<dl>',

                    '<tpl for="items">',

        this.items = [

            { xtype: 'container', html: '<h1 class="eg">Examples</h1>' },

            Ext.create('Docs.view.ThumbList', {

                itemTpl: [

                    '<dd ext:url="{url}"><img src="extjs/examples/shared/screens/{icon}"/>',

                        '<div><h4>{text}',

                            '<tpl if="status === \'new\'">',
@@ -43,17 +41,8 @@ Ext.define('Docs.view.examples.Index', { 
                                '<span class="new-sample"> (Experimental)</span>',

                            '</tpl>',

                        '</h4><p>{desc}</p></div>',

                        '</dd>',

                    '</tpl>',

                '<div style="clear:left"></div></dl></div>',

                '</tpl>',

            '</div>'

        );



        this.items = [

            { xtype: 'container', html: '<h1 class="eg">Examples</h1>' },

            Ext.create('Docs.view.ThumbList', {

                tpl: tpl,

                    '</dd>'

                ],

                store: store

            })

        ];

template/app/view/guides/Index.js

+5 −16
Original line number Diff line number Diff line
@@ -25,25 +25,14 @@ Ext.define('Docs.view.guides.Index', { 
            data: catalog

        });



        var tpl = Ext.create('Ext.XTemplate',

            '<div id="sample-ct">',

                '<tpl for=".">',

                '<div><a name="{id}"></a><h2><div>{title}</div></h2>',

                '<dl>',

                    '<tpl for="items">',

                        '<dd ext:url="guide/{name}"><img src="guides/{name}/icon-lg.png"/>',

                            '<div><h4>{title}</h4><p>{description}</p></div>',

                        '</dd>',

                    '</tpl>',

                '<div style="clear:left"></div></dl></div>',

                '</tpl>',

            '</div>'

        );



        this.items = [

            { xtype: 'container', html: '<h1 class="eg">Guides</h1>' },

            Ext.create('Docs.view.ThumbList', {

                tpl: tpl,

                itemTpl: [

                    '<dd ext:url="guide/{name}"><img src="guides/{name}/icon-lg.png"/>',

                        '<div><h4>{title}</h4><p>{description}</p></div>',

                    '</dd>'

                ],

                store: store

            })

        ];

template/app/view/videos/Index.js

+6 −17
Original line number Diff line number Diff line
@@ -25,27 +25,16 @@ Ext.define('Docs.view.videos.Index', { 
            data: catalog

        });



        var tpl = Ext.create('Ext.XTemplate',

            '<div id="sample-ct">',

                '<tpl for=".">',

                '<div><a name="{id}"></a><h2><div>{title}</div></h2>',

                '<dl>',

                    '<tpl for="items">',

                        '<dd ext:id="{id}"><img src="{thumb}"/>',

                            '<div><h4>{title}',

                            '</h4><p>{[values.description.substr(0,100)]}</p></div>',

                        '</dd>',

                    '</tpl>',

                '<div style="clear:left"></div></dl></div>',

                '</tpl>',

            '</div>'

        );



        this.items = [

            { xtype: 'container', html: '<h1 class="eg">Videos</h1>' },

            Ext.create('Docs.view.ThumbList', {

                urlField: 'id',

                tpl: tpl,

                itemTpl: [

                    '<dd ext:id="{id}"><img src="{thumb}"/>',

                        '<div><h4>{title}',

                        '</h4><p>{[values.description.substr(0,100)]}</p></div>',

                    '</dd>'

                ],

                store: store

            })

        ];