PDA

View Full Version : Question about scope [Learning ExtJS book]



Grolubao
18 Feb 2011, 3:30 AM
Hi to all,
I started reading the book "Learning ExtJS" and I was studying the chapter regarding component extension and customization.
At a certain point the author says:



Ext.namespace('CRM.panels');
CRM.panels.ContactDetails = Ext.extend(Ext.Panel,{
width: 350,
height: 250,
data: {
ID: 0,
FIRSTNAME: '',
LASTNAME: '',
EMAIL: '',
ADDRESSTYPE: 'Home (mailing)',
STREET1: '',
STREET2: '',
STREET3: '',
CITY: '',
STATE: '',
ZIP: '',
PHONETYPE: 'Home',
PHONE: ''
},
tpl: new Ext.XTemplate([
'<img src="/resources/images/s.gif" width="21" height="16"
/><b>{FIRSTNAME} {LASTNAME}</b><br />',
'<img src="/resources/images/icons/silk/database_edit.gif" width="16" height="16" id="emailEdit_{ID}" class="iconLnk" align="Edit Email Address" border="0" />{EMAIL}<br />',
'<img src="/resources/images/icons/silk/database_edit.gif" width="16" height="16" id="phoneEdit_{ID}" class="iconLnk" align="Edit Phone" border="0" />{PHONE} ({PHONETYPE})<br />',
'<b>{ADDRESSTYPE} Address</b><br />',
'<img src="/resources/images/icons/silk/database_edit.gif" width="16" height="16" id="addrEdit_{ID}" class="iconLnk" align="Edit Address" border="0" />{STREET1}<br />',
'<tpl if="STREET2.length &gt; 0">',
'<img src="/resources/images/s.gif" width="21" height="16"
/>{STREET2}<br />',
'</tpl>',
'<tpl if="STREET3.length &gt; 0">',
'<img src="/resources/images/s.gif" width="21" height="16"
/>{STREET3}<br />',
'</tpl>',
'<img src="/resources/images/s.gif" width="21" height="16" />{CITY}, {STATE} {ZIP}'
]),
initComponent: function(){
CRM.panels.ContactDetails.superclass.initComponent.call(this);
if (typeof this.tpl === 'string') {
this.tpl = new Ext.XTemplate(this.tpl);
}
this.addEvents('update');
},
onRender: function(ct, position) {
CRM.panels.ContactDetails.superclass.onRender.call
(this, ct, position);
if (this.data) {
this.update(this.data);
}
},
update: function(data) {
this.data = data;
this.tpl.overwrite(this.body, this.data);
this.fireEvent('update', this.data);
}
});
Now, I'm puzzled with one thing: What is the need for this.data = data in the update method? I would suppose that this was done automatically in the config option no?

Can someone clarify me a bit?

Thanks in advance!

steffenk
18 Feb 2011, 3:50 AM
This is not related to scope. Also config is only used once: on creation.
In update method you make sure that the data property of the element is updated with the new incoming data, it doesn't changed automatically.

Grolubao
18 Feb 2011, 4:02 AM
This is not related to scope. Also config is only used once: on creation.
In update method you make sure that the data property of the element is updated with the new incoming data, it doesn't changed automatically.

Ok, but then it's only useful if update would be called outside of the onRender method, because otherwise he could just create the template directly, right?

steffenk
18 Feb 2011, 4:48 AM
it's mostly use from outside, whenever you do a panel.update(data).