jep
6 Jan 2011, 3:12 PM
I've run across a behavior that seems rather weird to me, but I wanted to see what people think before reporting a bug. Take the following code:
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="sencha/resources/css/sencha-touch-debug.css" type="text/css">
<script type="text/javascript" src="sencha/sencha-touch-debug.js"></script>
<script type="text/javascript">
Ext.setup({
onReady: function() {
var mainPanel = new Ext.Panel({
id:'mainPanel',
layout:'fit',
fullscreen:true
});
var cmp = new Ext.Component({
tpl:['<b>{val}</b>']
});
mainPanel.add(cmp);
cmp.update({val:42});
console.log('first update', cmp.data);
mainPanel.doLayout();
console.log('mainPanel.doLayout', cmp.data);
cmp.update({val:99});
console.log('second update', cmp.data);
mainPanel.doLayout();
console.log('mainPanel.doLayout', cmp.data);
}
});
</script>
</head>
<body></body>
</html>
The output of this code is the following:
first update Object
mainPanel.doLayout undefined
second update Object
mainPanel.doLayout Object
As you can see, the first time through the code mainPanel.doLayout actually consumes the data object. The second time through, it updates correctly but doesn't consume it.
Ext.lib.Component = Ext.extend(Ext.util.Observable, {
(...)
initContent: function() {
var target = this.getTargetEl();
if (this.html) {
target.update(Ext.DomHelper.markup(this.html));
delete this.html;
}
if (this.contentEl) {
var contentEl = Ext.get(this.contentEl);
contentEl.show();
target.appendChild(contentEl.dom);
}
if (this.tpl) {
if (!this.tpl.isTemplate) {
this.tpl = new Ext.XTemplate(this.tpl);
}
if (this.data) {
this.tpl[this.tplWriteMode](target, this.data);
delete this.data;
}
}
},
But initContent() only gets called by render if rendered == false. So once it renders the first time, it never calls initContent again and the data gets preserved.
Doesn't this seem wrong?
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="sencha/resources/css/sencha-touch-debug.css" type="text/css">
<script type="text/javascript" src="sencha/sencha-touch-debug.js"></script>
<script type="text/javascript">
Ext.setup({
onReady: function() {
var mainPanel = new Ext.Panel({
id:'mainPanel',
layout:'fit',
fullscreen:true
});
var cmp = new Ext.Component({
tpl:['<b>{val}</b>']
});
mainPanel.add(cmp);
cmp.update({val:42});
console.log('first update', cmp.data);
mainPanel.doLayout();
console.log('mainPanel.doLayout', cmp.data);
cmp.update({val:99});
console.log('second update', cmp.data);
mainPanel.doLayout();
console.log('mainPanel.doLayout', cmp.data);
}
});
</script>
</head>
<body></body>
</html>
The output of this code is the following:
first update Object
mainPanel.doLayout undefined
second update Object
mainPanel.doLayout Object
As you can see, the first time through the code mainPanel.doLayout actually consumes the data object. The second time through, it updates correctly but doesn't consume it.
Ext.lib.Component = Ext.extend(Ext.util.Observable, {
(...)
initContent: function() {
var target = this.getTargetEl();
if (this.html) {
target.update(Ext.DomHelper.markup(this.html));
delete this.html;
}
if (this.contentEl) {
var contentEl = Ext.get(this.contentEl);
contentEl.show();
target.appendChild(contentEl.dom);
}
if (this.tpl) {
if (!this.tpl.isTemplate) {
this.tpl = new Ext.XTemplate(this.tpl);
}
if (this.data) {
this.tpl[this.tplWriteMode](target, this.data);
delete this.data;
}
}
},
But initContent() only gets called by render if rendered == false. So once it renders the first time, it never calls initContent again and the data gets preserved.
Doesn't this seem wrong?