sencha touch 2.. accessing config values while creating views - sencha-touch

Question

I have created a view like this
Ext.define('App.view.Message', {
extend: 'Ext.Panel',
alias: 'widget.message',
config: {
layout: 'vbox',
bigText: 'big Text',
smallText: 'small text',
imageUrl: 'imageurl',
oT: '',
description: 'message description',
items: [
{
flex: 3,
xtype: 'container',
layout: 'hbox',
items: [
{
xtype: 'container',
flex: 1,
items: [
{
html: '<h3>' + this.getBigText() + '</h3>'
},
{
html: '<h5>' + this.getSmallText() + '</h5>'
}
]
},
{
xtype: 'image',
src: this.getImageUrl(),
flex: 1
}
]
},
{
flex: 6,
xtype: 'container',
layout: 'vbox',
items: [
{
flex:1,
html: '<h3>' + this.getBigText() + '</h3>'
},
{
flex:5,
html: '<p>'+this.getDescription()+'</p>'
}
]
},
{
flex: 1,
xtype: 'button',
text: this.getOT()
}
]
}
})
i need to access values that will be passed when this view is created (config values) while creating the view.
so statement this.getDescription(), this.getBigText() etc etc are generating errors..
what i want is tht the view should be rendered with the config values that i pass is when im creating the view..
what should i do?

Answer 1

Looks like you have to override the constructor and get the config values:
Ext.define('App.view.Message', {
extend: 'Ext.Panel',
alias: 'widget.message',
config: {
layout: 'vbox',
bigText: 'big Text',
smallText: 'small text',
imageUrl: 'imageurl',
oT: '',
description: 'message description'
},
constructor: function(config)
{
config.items = [
{
flex: 3,
xtype: 'container',
layout: 'hbox',
items: [
{
xtype: 'container',
flex: 1,
items: [
{
html: '<h3>' + config.bigText + '</h3>'
},
{
html: '<h5>' + config.smallText + '</h5>'
}
]
},
{
xtype: 'image',
src: config.imageUrl,
flex: 1
}
]
},
{
flex: 6,
xtype: 'container',
layout: 'vbox',
items: [
{
flex:1,
html: '<h3>' + config.bigText + '</h3>'
},
{
flex:5,
html: '<p>'+config.description+'</p>'
}
]
},
{
flex: 1,
xtype: 'button',
text: config.oT
}
];
this.callParent(arguments);
}
});

Answer 2

Sencha Touch 2 does not automatically generate getters and setters for your config. However, there are 2 ways to do what you need:
Get & set config values directly through Ext.getCmp('your_component_id').config.bigText (similar to other configs)
Manually create getters & setters for your custom config, for example, you have to define something like this as a config of your view component:
getBigText: function(){return this.bigText;}
setBigText: function(value) {this.bigText = value;}
Hope this helps.

Answer 3

When you are define and load a "View" file - browser go through each line. The "View" instance isn't created at that time. So, naturally the this cannot be found there.
However, you can use "this" inside the initialize function. So, you can write your code like this:
Ext.define('App.view.Message', {
extend: 'Ext.Panel',
xtype: 'message',
config: {
layout: 'vbox',
bigText: 'big Text',
smallText: 'small text',
imageUrl: 'imageurl',
oT: '',
description: 'message description'
},
initialize : function(){
this.add([
{
flex: 3,
xtype: 'container',
layout: 'hbox',
items: [
{
xtype: 'container',
flex: 1,
items: [
{
html: '<h3>' + this.bigText + '</h3>'
},
{
html: '<h5>' + this.smallText + '</h5>'
}
]
},
{
xtype: 'image',
src: this.imageUrl,
flex: 1
}
]
},
{
flex: 6,
xtype: 'container',
layout: 'vbox',
items: [
{
flex:1,
html: '<h3>' + this.bigText + '</h3>'
},
{
flex:5,
html: '<p>'+ this.description +'</p>'
}
]
},
{
flex: 1,
xtype: 'button',
text: this.oT
}
]);
this.callParent(arguments);
}
});

Answer 4

For that I recommend that you add you items to the view in the initialize function like so :
...
config:{
...
},
initialize: function(){
var me = this;
me.callParent();
var container = Ext.create('Ext.Container',{
title = this.config.bigText
});
me.add(container);
}
...
I don't know if there is a best solution but this works.

Answer 5

A simple solution is to do that in initialize() function, eg.
this.config.title = 'my title';
this.config.iconCls = 'info';
this.callParent();