The recommended way to declare instance scope custom properties in a component - extjs

Question

Given the below definition of a panel derived extjs component, how do I declare additional instance scope properties that I can set, get and add change events for?
My attempt to just add them inline in the config (startIndex and endIndex), results in them being null, when referenced in onContactsLoaded. I am using the extjs beta 5.0 which allows viewmodels. And while at it, is there a better way to refer to this.getViewModel().getData().groupData.Id, maybe something like this.getViewModel().get('groupData.Id') ?
Ext.define('MyApp.view.ContactCarouselView', {
extend: 'Ext.panel.Panel',
xtype: 'contactcarousel',
requires: ['Ext.container.Container', 'Ext.button.Button', 'Ext.Img', 'MyApp.store.ContactStore'],
height: 71,
width: 12 * 68,
title: '',
cls: 'carousel',
bodyStyle: {},
layout: {
type: 'hbox',
align: 'stretch'
},
startIndex: 0,
endIndex: 7,
viewModel: {},
listeners: {
afterrender: function (panel) {
var me = this;
},
refresh: function () {
}
},
onContactsLoaded: function (contactStore) {
var carousel = this;
var imageHolder = carousel.down('#imageHolder');
var index = 0;
//debugger;
carousel.startIndex = 0;
carousel.endIndex = 7;
Ext.each(contactStore.data.map[contactStore.currentPage].value, function (rec) {
//contactStore.each(function (rec) {
imageHolder.add({
xtype: 'image',
cls: 'contact-picture',
viewModel: { data: rec.data },
width: 68, height: 68,
bind: { src: '{PhotoUrl}' }
});
});
},
items:
[
{
xtype: 'container',
flex: 1,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'button',
width: 30,
cls: 'left-button',
text: 'MyButton',
listeners: {
click: function () {
//put one more pic to the left and remove one from the right
var ih = this.up().down('#imageHolder');
var carousel = ih.up();
carousel.startIndex--;
carousel.endIndex--;
ih.scrollBy(-68, 0, true);
}
}
}, {
xtype: 'panel', cls: 'images-area', layout: 'hbox', flex: 1, itemId: 'imageHolder'
}, {
xtype: 'button',
cls: 'right-button',
width: 30,
text: 'MyButton', listeners: {
click: function () {
//put one more pic to the right and remove one from the left
debugger;
var ih = this.up().down('#imageHolder');
var carousel = ih.up();
carousel.startIndex++;
carousel.endIndex++;
ih.scrollBy(68, 0, true);
}
}
}]
}, {
xtype: 'container'
}],
initComponent: function () {
var me = this;
me.callParent(arguments);
var imageStyle = {};
debugger;
var store = Ext.create('MyApp.store.ContactStore', {
pageSize: 8, viewSize: 8, leadingBufferZone: 8,
trailingBufferZone: 8,
});
this.store = store;
store.on('load', this.onContactsLoaded, this, {
//single: true
});
store.loadPage(1,
{
params: { groupId: this.getViewModel().getData().groupData.Id }
});
}
});

Answer 1

It would be helpful to see a Sencha fiddle of this issue?
Regarding config object/values that you add to a custom class, I would no doubt do it in a config (especially if you want the setter and getters created for you). From the ExtJS 5 documentation:
Ext.define('My.sample.Person', {
config: {
name: 'Mr. Unknown',
age: 0,
gender: 'Male'
},
constructor: function(config) {
this.initConfig(config);
return this;
}
// ...
});
If you want to have a quick bind to your ViewModel I suggest adding a new config in your component such as the one above and bind it in your component:
config: {
groupDataId:null
},
bind: {
dataId: '{data.groupDataId.id}' // or '{groupDataId.id}'
}
Then you can access the value by using:
this.getGroupDataId()