javascript - 组合框 ExtJS 4.2 中失去范围

Question

我有一个带有组合框和一些按钮的弹出窗口。这个想法是在组合框中进行选择，然后将选择保存到存储或取消。我以前曾经这样做过，从未遇到过任何问题，但是使用此代码，每当我尝试与组合交互时，我都会收到 Uncaught TypeError: Cannot call method 'apply' of undefined 。在我看来，ExtJS 正在尝试运行用于组合框上的商店的代码。

我使用 Ext.create('Account.Window.Reuse'); 加载弹出窗口

定义:

Ext.define('SimpleAccount', {
    extend: 'Ext.data.Model',
    idProperty: 'AccountID',
    fields: [ {
        name: 'AccountID',
        type: 'int',
        useNull: true
    }, 'Name']
});

var userAccountReuseStore = Ext.create('Ext.data.Store', {
    model: 'SimpleAccount',
    storeId: 'userAccountReuseStore',
    data: [{"AccountID":"1", "Name":"FirstAccount"},
        {"AccountID":"2", "Name":"SecondAccount"},
        {"AccountID":"3", "Name":"ThirdAccount"}]
});

Ext.define('Account.Reuse.ComboBox', {
    extend: 'Ext.form.ComboBox',
    alias: 'widget.accountReuseComboBox',
    initComponent: function(){
        Ext.apply(this, {
            fieldLabel: 'Account',
            displayField: 'Name',
            valueField: 'AccountID',
            queryMode: 'local'
        })
    }
});

Ext.define('Account.Reuse.Fieldset', {
    extend: 'Ext.form.FieldSet',
    alias: 'widget.accountReuseFieldset',
    initComponent: function(){
        Ext.apply(this, {
            items: [
                {
                    xtype: 'label',
                    cls: 'text-important',
                    margin: '0 0 10 0',
                    style: 'display: block',
                    text: 'Only attach an account you have permission to use.  After attaching the account you will not be able to use, remove, or edit it until approved by SCSAM'
                },
                {
                    xtype: 'accountReuseComboBox',
                    store: userAccountReuseStore
                }
            ]
        });
        this.callParent();
    }
});

Ext.define('Account.Reuse.Details', {
    extend: 'Ext.form.Panel',
    alias: 'widget.accountReuseDetails',
    initComponent: function(){
        Ext.apply(this, {
            plain: true,
            border: 0,
            bodyPadding: 5,
            fieldDefaults: {
                labelWidth: 55,
                anchor: '100%'
            },
            layout: {
                type: 'vbox',
                align: 'stretch',
                flex: 1
            },
            items: [
                {
                    xtype: 'accountReuseFieldset',
                    defaults: {
                        labelWidth: 89,
                        anchor: '100%',
                        layout: {
                            type: 'vbox',
                            defaultMargins: {top: 0, right: 5, bottom: 0, left: 0},
                            align: 'stretch'
                        }
                    },
                    title: 'Details',
                    collapsible: false
                }]
        });
        this.callParent();
    }
});

Ext.define('Account.Window.Reuse', {
    extend: 'Ext.window.Window',
    alias: 'widget.accountWindowReuse',
    initComponent: function(){
        Ext.apply(this, {
            title: 'Account Details',
            width: 400,
            autoShow: true,
            modal: true,
            layout: {
                type: 'fit',
                align: 'stretch'  // Child items are stretched to full width
            },
            items: [{
                xtype: 'accountReuseDetails',
                id: 'attachAccountReuseForm'
            }],
            dockedItems: [{
                xtype: 'toolbar',
                dock: 'bottom',
                ui: 'footer',
                layout: {
                    pack: 'center'
                },
                items: [{
                    minWidth: 80,
                    text: 'Attach',
                    id: 'saveButton',
                    handler: function(){
                        var rec = this.up('accountWindowReuse').down('accountReuseDetails').getValues();
                        var store = Ext.getStore('userAccountReuseAttachStore');
                        store.add(rec);
                        this.up('window').close();
                    }
                },{
                    minWidth: 80,
                    text: 'Cancel',
                    handler: function(){
                        this.up('window').close();
                    }
                }]
            }]
        });
        this.callParent();
    }
});

Answer 1

看起来您忘记在 Account.Reuse.ComboBox initComponent 函数中调用父级，因此组合框未正确初始化。

您的 Account.Reuse.ComboBox initComponent 函数应如下所示:

initComponent: function(){
    Ext.apply(this, {
        fieldLabel: 'Account',
        displayField: 'Name',
        valueField: 'AccountID',
        queryMode: 'local'
    });
    this.callParent();
}