Results 1 to 2 of 2

Thread: [4.0.1] tpl.overwrite(el, data) breaks when using a docked component

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    149

    Default [4.0.1] tpl.overwrite(el, data) breaks when using a docked component

    Maybe I'm doing something wrong, but I would expect the same behavior when trying to using the template overwrite function.

    This does not work and returns :
    Code:
    el is null
    [IMG]chrome://firebug/content/blank.gif[/IMG]        el.innerHTML = this.applyTemplate(values);
    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/ext-4.0.1/resources/css/ext-all.css" />
    </head>
    <body>
    </body>
    <script type="text/javascript" src="http://dev.sencha.com/deploy/ext-4.0.1/bootstrap.js"></script>
    <script>
    Ext.onReady(function() {
        Ext.Loader.setConfig({
            enabled: true
        });
    
        Ext.require([
            'Ext.TaskManager',
            'Ext.layout.*',
            'Ext.form.*',
            'Ext.grid.*',
            'Ext.selection.CellModel',
            'Ext.data.*',
            'Ext.tree.*',
            'Ext.util.*',
            'Ext.tip.*',
            'Ext.XTemplate',
            'Ext.tab.Panel',
        ]);
    
        Ext.define('AppMsg' , {
            extend: 'Ext.Panel',
            id: 'msg-widget',
            alias: 'widget.studiomsg',
            title: 'Studio Message',
            initComponent: function() {
                this.tpl = Ext.create('Ext.XTemplate',
                    '<tpl for=".">',
                        '<div>Status: {category}<div>',
                        '<div>Details: {details}</div>',
                    '</tpl>',
                    {
                        compiled: true,
                        formatDate: function(dt) {
                            return Ext.Date.format(dt, 'l at H:i');
                        },
                    }
                );
                this.callParent(arguments);
            },
            updateDetail: function(data) {
                this.tpl.overwrite(this.body, data);
                this.setVisible(true);
                this.setTitle(data.title);
            }
        });
    
        var rh_vp = Ext.create('Ext.Viewport', {
            layout: { type: 'border'},
            id: 'rh-vp',
            items: [{
                    region: 'north',
                    id: 'rh-hd-bar',
                    html: '<div class="rh-hd"><div class="rh-logo"><img src="http://www.google.com/images/logos/ps_logo2.png" style="height: 34px"/><div class="rh-sub" id="sub-title"></div></div>',
                    border: false,
                    cls: 'rh-hd-bar',
                    layout: { type: 'fit'},
                    margins: '0 0 0 0',
                    dockedItems: [{
                            xtype: 'studiomsg',
                            dock: 'top',
                            id: 'studio-msg',
                            collapsible: true,
                            hidden: true,
                            border: true,
                            cls: 'systems-msg',
                            height: 100,
                            bodyPadding: 10,
                            animCollapse: false,
                            listeners: {
                                collapse: function(p) { Ext.getCmp('rh-hd-bar').doLayout(); },
                                expand: function(p) { Ext.getCmp('rh-hd-bar').doLayout(); }
                            }
                        },{
                            xtype: 'toolbar',
                            enableOverflow: true,
                            dock: 'top',
                            id: 'rh-hd-tbar',
                            cls: 'rh-hd-tbar',
                            defaults: { xtype: 'button'},
                            items: [
                                {xtype: 'tbspacer', width: 3},{tooltip: 'Los Angeles'}
                            ]
                        },{
                            xtype: 'toolbar',
                            dock: 'bottom',
                            enableOverflow: true,
                            cls: 'rh-hd-bbar',
                            id: 'rh-hd-bbar',
                            defaults: {xtype: 'button'},
                            items: [
                                {xtype: 'tbseparator'},{text: 'Button'}
                            ]
                    }]
                },
                {region: 'center', id: 'vp-center', border: false, margins: '5 5 5 0', layout: 'fit'}
            ]
        });
    
        function getStudioMsg() {
            var msg = Ext.getCmp('studio-msg');
            msg.updateDetail({
                category: 'category here',
                desc: 'some kind of description',
                title: 'title'
            });
            Ext.getCmp('rh-hd-bar').doLayout();
        }
    
        var studiorunner = new Ext.util.TaskRunner();
        var studiotsk = { run: getStudioMsg, interval: 30000 };
        Ext.Function.defer(function(){ studiorunner.start(studiotsk);}, 3000);
    });
    </script>
    </html>
    While this does: (differences in red):
    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/ext-4.0.1/resources/css/ext-all.css" />
    </head>
    <body>
    </body>
    <script type="text/javascript" src="http://dev.sencha.com/deploy/ext-4.0.1/bootstrap.js"></script>
    <script>
    Ext.onReady(function() {
        Ext.Loader.setConfig({
            enabled: true
        });
    
        Ext.require([
            'Ext.TaskManager',
            'Ext.layout.*',
            'Ext.form.*',
            'Ext.grid.*',
            'Ext.selection.CellModel',
            'Ext.data.*',
            'Ext.tree.*',
            'Ext.util.*',
            'Ext.tip.*',
            'Ext.XTemplate',
            'Ext.tab.Panel',
        ]);
    
        Ext.define('AppMsg' , {
            extend: 'Ext.Panel',
            id: 'msg-widget',
            alias: 'widget.studiomsg',
            title: 'Studio Message',
            initComponent: function() {
                this.tpl = Ext.create('Ext.XTemplate',
                    '<tpl for=".">',
                        '<div>Status: {category}<div>',
                        '<div>Details: {details}</div>',
                    '</tpl>',
                    {
                        compiled: true,
                        formatDate: function(dt) {
                            return Ext.Date.format(dt, 'l at H:i');
                        },
                    }
                );
                this.callParent(arguments);
            },
            updateDetail: function(data) {
                this.tpl.overwrite(this.body, data);
                this.setVisible(true);
                this.setTitle(data.title);
            }
        });
    
        var rh_vp = Ext.create('Ext.Viewport', {
            layout: { type: 'border'},
            id: 'rh-vp',
            items: [{
                    region: 'north',
                    id: 'rh-hd-bar',
                    html: '<div class="rh-hd"><div class="rh-logo"><img src="http://www.google.com/images/logos/ps_logo2.png" style="height: 34px"/><div class="rh-sub" id="sub-title"></div></div>',
                    border: false,
                    cls: 'rh-hd-bar',
                    layout: { type: 'fit'},
                    margins: '0 0 0 0',
                    items: [{
                            xtype: 'studiomsg',
                            id: 'studio-msg',
                            collapsible: true,
                            hidden: true,
                            border: true,
                            cls: 'systems-msg',
                            height: 100,
                            bodyPadding: 10,
                            animCollapse: false,
                            listeners: {
                                collapse: function(p) { Ext.getCmp('rh-hd-bar').doLayout(); },
                                expand: function(p) { Ext.getCmp('rh-hd-bar').doLayout(); }
                            }
                    }]
                },
                {region: 'center', id: 'vp-center', border: false, margins: '5 5 5 0', layout: 'fit'}
            ]
        });
    
        function getStudioMsg() {
            var msg = Ext.getCmp('studio-msg');
            msg.updateDetail({
                category: 'category here',
                desc: 'some kind of description',
                title: 'title'
            });
            Ext.getCmp('rh-hd-bar').doLayout();
            Ext.getCmp('studio-msg').doLayout();
        }
    
        var studiorunner = new Ext.util.TaskRunner();
        var studiotsk = { run: getStudioMsg, interval: 30000 };
        Ext.Function.defer(function(){ studiorunner.start(studiotsk);}, 3000);
    });
    </script>
    </html>

  2. #2
    Sencha User
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    149

    Default

    bump?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •