PDA

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



radtad
24 May 2011, 4:51 PM
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 :


el is null
chrome://firebug/content/blank.gif el.innerHTML = this.applyTemplate(values);




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


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

radtad
1 Jun 2011, 10:40 AM
bump?