Question

我正在尝试扩展Sencha 1.1 DataView以构建我自己的Picker。但是 - 延伸不起作用。看起来它甚至没有调用initComponent，每当我试图通过调用它的一个方法转向超类时 - 我得到一条消息，该方法不存在。我想我错过了一些关于如何扩展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);
                }   
            });

但是，每当我进入DataView的某个方法时 - 例如 - getNode（） - 它无法加载说没有这样的方法。

我错过了什么吗？

谢谢！

Answer 1

哦！重新审视这个问题一年后 - 我知道javascript好一点 - 我理解我的问题。我不是在同一个背景下。 eventHandler中的'this'不是指数据视图，而是指事件目标。呼叫/申请将完成工作。

无法在Sencha 1.1中扩展DataView

1 个答案: