PDA

View Full Version : {xtype:'...'} vs new ... Best practics?



hotdp
29 Jun 2011, 10:12 AM
Hello

What is best practice and what performs best? If I fx. have a Panel with two items. What should I use {xtype:'...'} or new ...? I would like to know whats best?

so.phis.ti.kat
29 Jun 2011, 11:41 AM
in my limited experience with Touch, I have seen that the answer is based on how you structure your application. Out of the 3 MVC structures, the one that made sense to me is xtype;

Ext.regController('GeoTrap', {
user: function (options) {
if (!this.userPanel) {
this.userPanel = this.render({
xtype: 'geo-user',
listeners: {
update: {
}
}
});
}

this.userPanel.query('#DestinationButton')[0].on({
tap: this.destination,
scope: this
});

this.application.viewport.setActiveItem(this.userPanel, {
type: 'slide',
direction: 'right'
});
}
});
I like this because it keeps all instantiation code inside the view; I had worried about having settings in both a view and a controller. At the same time, since I am new. I would like to hear from others on this topic.

mitchellsimoens
29 Jun 2011, 1:54 PM
You should use XTypes wherever possible. It's called lazy instantiation. Basically, if you create a Component with the new keyword, you are creating that Component and all of the methods and properties and everything. If you use XTypes instead, you only have that small JS Object until that Component is needed and it will be instantiated then.

won.rhee
27 Jul 2011, 1:59 PM
I'm hoping I can get some explanation of "render" & "setActiveItem", and this thread seems to be related.

In several MVC controller, it seems that you use render & setActiveItems like below :


Ext.regController('TestControl',{

show: function(){
var details = this.render({
xtype:'homecard'
});
this.application.viewport.setActiveItem(details,{type:'fade'});

}
});


However, if you leave out "this.application.viewport.setActiveItem..." line, it'll still work :



Ext.regController('TestControl',{

show: function(){
var details = this.render({
xtype:'homecard'
});
}
});


Can someone kindly explain why creating var details would render 'homecard' to viewport??

Also why would you use setActiveItem method when render method will do?

Hanni Sullivan
28 Jul 2011, 2:46 AM
Take a look at how the render method is implemented:



/**
* Renders a given view based on a registered name
* @param {String} viewName The name of the view to render
* @param {Object} config Optional config object
* @return {Ext.View} The view instance
*/
render: function(config, target) {
var Controller = Ext.Controller,
application = this.application,
profile = application ? application.currentProfile : undefined,
profileTarget, view;

Ext.applyIf(config, {
profile: profile
});

view = Ext.ComponentMgr.create(config);

if (target !== false) {
//give the current Ext.Profile a chance to set the target
profileTarget = profile ? profile.getRenderTarget(config, application) : target;

if (target == undefined) {
target = profileTarget || (application ? application.defaultTarget : undefined);
}

if (typeof target == 'string') {
target = Ext.getCmp(target);
}

if (target != undefined && target.add) {
if (profile) {
profile.beforeLayout(view, target, application);
}

target.add(view);

if (target.layout && target.layout.setActiveItem) {
target.layout.setActiveItem(view);
}

target.doComponentLayout();

if (profile) {
profile.afterLayout(view, target, application);
}
}
}

return view;
}


If I'm not getting it wrong, the method seems to take the application as the default target if none has been specified. It then calls the setActiveItem method of the application.