PDA

View Full Version : Using Ext.apply or specify configuration inline?



tonyx
2 Sep 2011, 8:34 PM
In some of the example code provided by Ext, such as

http://docs.sencha.com/ext-js/4-0/extjs/examples/app/nested-loading/app/view/review/List.js

Instead of specifying the definition of the view in the configuration object, it is specified in the initComponent method using Ext.apply





Ext.define('Books.view.review.List', {
alias: 'widget.reviewlist',
extend: 'Ext.panel.Panel',

requires: ['Ext.layout.container.Card'],

initComponent: function() {
this.dataview = Ext.create('Ext.view.View', {
id: 'reviews',
border: false,
cls: 'review-list',

autoScroll: true,

store: 'Books.store.Review',
itemSelector: '.review',
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="review {[xindex === 1 ? "first-review" : ""]}">',
'<div class="title">{title} {[this.stars(values)]}</div>',
'<div class="author">By <span>{author}</span> - {date}</div>',
'<div class="comment">{comment}</div>',
'</div>',
'</tpl>',
{
stars: function(values) {
var res = "";

//print out the stars for each of the ratings
for (var i = 0; i < values.rating; i++) {
res += '<img src="./resources/images/star.' + ((Ext.isIE6) ? 'gif' : 'png') + '" />';
}

//print out transparent stars for the rest (up to 5)
while (i < 5) {
res += '<img src="./resources/images/star_no.' + ((Ext.isIE6) ? 'gif' : 'png') + '" />';
i++;
}

return res;
}
}
)
});

Ext.apply(this, {
border: false,
flex: 1,
id: 'test',

layout: 'card',

dockedItems: [
Ext.create('Books.view.Header', {
html: 'Reviews'
})
],

items: [
this.dataview,
Ext.create('widget.panel', {
id: 'test2',
html: 'asdasdsa'
})
]
});

this.callParent(arguments);
},

/**
* Used to bind a store to this dataview.
* Delegates to bindStore and also shows this view
* @param {Ext.data.Model} record The record to bind
* @param {Ext.data.Store} store The reviews store used by the application
*/
bind: function(record, store) {
//put the reviews into the store and bind the store to thie dataview
store.loadData(record.data.reviews || []);
this.dataview.bindStore(store);
}
});




Why is this the case? Is there any best practices regarding using Ext.apply or defining the view inside initComponent?

mitchellsimoens
3 Sep 2011, 6:04 AM
It basically does the same thing. Not mentioning that Ext.apply has a third param for defaults. I use it as it keeps my code cleaner. I split things up into separate methods like creating the items.


Ext.define('MyPanel', {
extend : 'Ext.panel.Panel',
alias : 'widget.mypanel',

initComponent: function() {
var me = this;

Ext.apply(me, {
items : me.buildItems()
});

me.callParent(arguments);
},

buildItems: function() {
return [.....];
}
});

I would say Ext.applyIf is special as if the keys in the second object is in the first object, it won't be applied.