I am trying to extend Sencha 1.1 DataView in order to build my own Picker. However - the Extention doesn't work. It seems like it doesn't even call the initComponent, and whenever I am trying to turn to the superclass with calling one of its methods - I get a message that the method does not exist. I think I am missing something about how to extend the DataView (althought I copied almost word by word from the Sencha Source code).
Here is my code:
Ext.MyDV = Ext.extend(Ext.DataView, {
flex: 1,
displayField: 'text',
valueField: 'value',
align: 'center',
itemSelector: 'div.x-picker-item',
componentCls: 'x-picker-slot',
renderTpl : ['<div class="x-picker-mask">',
'<div class="x-picker-bar"></div>',
'</div>'
],
selectedIndex: 0,
getElConfig: function() {
return {
tag: 'div',
id: this.id,
cls: 'x-picker-' + this.align
};
},
initComponent : function() {
Ext.apply(this.renderSelectors, {
mask: '.x-picker-mask',
bar: '.x-picker-bar'
});
this.scroll = {
direction: 'vertical',
useIndicators: false,
friction: 0.7,
acceleration: 25,
snapDuration: 200,
animationDuration: 200
};
this.tpl = new Ext.XTemplate([
'<tpl for=".">',
'<div class="x-picker-item {cls} <tpl if="extra">x-picker-invalid</tpl>">{' + this.displayField + '}</div>',
'</tpl>'
]);
var data = this.data,
parsedData = [],
ln = data && data.length,
i, item, obj;
if (data && Ext.isArray(data) && ln) {
for (i = 0; i < ln; i++) {
item = data[i];
obj = {};
if (Ext.isArray(item)) {
obj[this.valueField] = item[0];
obj[this.displayField] = item[1];
}
else if (Ext.isString(item)) {
obj[this.valueField] = item;
obj[this.displayField] = item;
}
else if (Ext.isObject(item)) {
obj = item;
}
parsedData.push(obj);
}
this.store = new Ext.data.Store({
model: 'x-textvalue',
data: parsedData
});
this.tempStore = true;
}
else if (this.store) {
this.store = Ext.StoreMgr.lookup(this.store);
}
this.enableBubble('slotpick');
Ext.MyDV.superclass.initComponent.call(this);
if (this.value !== undefined) {
this.setValue(this.value, false);
}
},
setupBar: function() {
this.el.setStyle({padding: ''});
var padding = this.bar.getY() - this.el.getY();
this.barHeight = this.bar.getHeight();
this.el.setStyle({
padding: padding + 'px 0'
});
this.slotPadding = padding;
this.scroller.updateBoundary();
this.scroller.setSnap(this.barHeight);
this.setSelectedNode(this.selectedIndex, false);
},
afterComponentLayout: function() {
// Dont call superclass afterComponentLayout since we dont want
// the scroller to get a min-height
Ext.defer(this.setupBar, 200, this);
},
initEvents: function() {
this.mon(this.scroller, {
scrollend: this.onScrollEnd,
scope: this
});
},
onScrollEnd: function(scroller, offset) {
this.selectedNode = this.getNode(Math.round(offset.y / this.barHeight));
this.selectedIndex = this.indexOf(this.selectedNode);
this.fireEvent('slotpick', this, this.getValue(), this.selectedNode);
},
/**
* @private
*/
scrollToNode: function(node, animate) {
var offsetsToBody = Ext.fly(node).getOffsetsTo(this.scrollEl)[1];
this.scroller.scrollTo({
y: offsetsToBody
}, animate !== false ? true : false);
},
/**
* @private
* Called when an item has been tapped
*/
onItemTap: function(node, item, index) {
Ext.MyDV.superclass.onItemTap.apply(this, arguments);
this.setSelectedNode(index);
this.selectedNode = item;
this.selectedIndex = index;
this.fireEvent('slotpick', this, this.getValue(), this.selectedNode);
},
getSelectedNode: function() {
return this.selectedNode;
},
setSelectedNode: function(selected, animate) {
// If it is a number, we assume we are dealing with an index
if (Ext.isNumber(selected)) {
selected = this.getNode(selected);
}
else if (selected.isModel) {
selected = this.getNode(this.store.indexOf(selected));
}
// If its not a model or a number, we assume its a node
if (selected) {
this.selectedNode = selected;
this.selectedIndex = this.indexOf(selected);
this.scrollToNode(selected, animate);
}
},
getValue: function() {
var record = this.store.getAt(this.selectedIndex);
return record ? record.get(this.valueField) : null;
},
setValue: function(value, animate) {
var index = this.store.find(this.valueField, value);
if (index != -1) {
if (!this.rendered) {
this.selectedIndex = index;
return;
}
this.setSelectedNode(index, animate);
}
},
onDestroy: function() {
if (this.tempStore) {
this.store.destroyStore();
this.store = null;
}
Ext.MyDV.superclass.onDestroy.call(this);
}
});
However, whenever I am getting to one of the method of DataView - for example - getNode() - it fails to load saying there is no such method.
Did I miss anything?
Thanks!
Oh! One year after revisiting this question - and I know javascript a little better - I understand my problem. I am not under the same context. 'this' inside an eventHandler does not refer to the dataview but to the event target. call/apply will do the work.