我试图扩展Sencha 1. 1 数据查看, 以建立我自己的 Picker 。 然而, 范围并不起作用。 它似乎甚至不称它为“ unitComponent ”, 每当我试图向超级阶级求助时, 呼唤其中一种方法, 我就会得到一个信息, 即该方法不存在。 我认为我漏掉了一些关于如何扩展“ DataView ” 的信息( 尽管我几乎逐字抄录了Sencha源代码 ) 。
这是我的代码:
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);
}
});
然而,每当我使用一种数据查看方法时,例如, " 坚固 " (generate>getnode) < () > -- -- 它就未加载说没有这种方法。
我错过什么了吗?
谢谢!