PDA

View Full Version : EXTJS 4.2 Custom Component



sandeepan
5 Feb 2014, 10:05 AM
I am trying to build a EXTJS wrapper for a component.
It creates a UI block rendered by template (used XTempate).
It can have sub blocks that is also rendered by template.
For the first time rendering, Its very easy to manage by setting the property in tpl and data or renderTpl and renderData

Ext.define('GTA.view.MetroPanel', {
extend: 'Ext.Component',
alias: 'widget.metroscheduler',
xtype: 'metroscheduler',
overflowX : 'scroll',
initComponent: function() {
var me = this,
data = {.... }; /*setting up the data*/
me.data = data;
me.tpl = new Ext.XTemplate( "..... width: {[this.getPanelWidth(values.days.length, 235)]}px", {
getPanelWidth : function(numberofcolumns, adjustmentfactor){
return numberofcolumns * 200 + adjustmentfactor;
}
});
me.callParent(arguments);

}
});
//This worked for me for the initial instance.

Now I wanted to update the data on certain event and update the UI.
I am not able to hook to apply the data to template.

Probable solution:
a. Add a custom method that will accept the new data as input.
b. Keep a reference of template object somewhere ( where and how) and apply this data and apply the resulting html to update method of this component object i.e. object.update( <html>).

I may be wrong. Could someone give me correct pointer. It was so easy in ExtJs3.4, but somehow I am not able to get into this 4.2xx.

Also any links to interactive custom component creation would be appreciated.

skirtle
5 Feb 2014, 7:30 PM
I'm not exactly following what the problem is but you may find this helpful:

http://skirtlesden.com/articles/html-and-extjs-components

sandeepan
5 Feb 2014, 8:03 PM
I'm not exactly following what the problem is but you may find this helpful:

http://skirtlesden.com/articles/html-and-extjs-components

Thanks Skirtle. Indeed it is useful.
But not completely answers what I am looking for.
I would try to explain w.r.t. the example in the provided link


new Ext.Component({
...
data: ['London', 'Paris', 'Moscow', 'New York', 'Tokyo'],

tpl: [
'<ul>',
'<tpl for=".">',
'<li>{.}</li>',
'</tpl>',
'</ul>'
]
});


Instead of applying directly to tpl , I would like to use conditional template based on certain configuration.
say
var tpl1 = new Template(.... ),
tpl2 = new Template(.... );

how do I set the template to tpl in the method initComponent: function() { .. ???? .... };



//codeblock 1
initComponent: function() {
var me = this;
me.tpl = new XTemplate( ..... );

me.performSomeMod = function(data){
//perform operation
//return modifieddata;
};
...
},
applyCustomRender : function( data){
var dataMod = this.performSomeMod( data);
this.update(dataMod );
}

I am not able to completely get how to make it happen. The new class structure has made lot of changes. Earlier, it was there in prototype, so if we set value to me.tpl or me.performSomeMod, it worked.
now it has changed.

Only option i could figure out is


//codeblock 2
Ext.define('GTA.view.MetroPanel', {
extend: 'Ext.Component',
...
config:{
data:null,
cmpTpl : null
},


then I can have the getter/setter to data and cmpTpl that are getData, setData, getCmpTpl, setCmpTpl.

But I assume I am getting the work done in a very twisted approach. I would like to know the correct way to render.
Also the template needs to be passed the containers width. The template applies custom width calculation.
I can do that by making a sequence to render function or initiating reapplying the template.
While reapplying the template, I do not have the this.data unless used something like //codeblock 1 i.e. this.getData(), applicable only if config { data: .... } is set.


I am quite positive that there is a correct way to make the Component, I am on a complicated approach may be.

Any More inputs is appreciated.

skirtle
5 Feb 2014, 9:11 PM
I still don't really have a good grasp on what the problem is. I think you're imagining problems that don't exist.

These two comments caught my eye:


It was so easy in ExtJs3.4, but somehow I am not able to get into this 4.2xx.


The new class structure has made lot of changes. Earlier, it was there in prototype, so if we set value to me.tpl or me.performSomeMod, it worked.

You seem to have misunderstood the class system. Ext.define in Ext 4 is very similar to Ext.extend in Ext 3. The syntax is different and there are a few extra bells but behind the scenes they both just set some stuff on a prototype.

Your 'codeblock 1' looks like it should work to me. If it doesn't work then you've probably just made a small mistake, possibly forgetting to call callParent?

Personally I would stay clear of the approach you've used in 'codeblock 2'. That config stuff is a road to insanity in my opinion.

You might find the early parts of this article help your understanding of the class system and the prototype:

http://skirtlesden.com/articles/config-objects-on-the-prototype