"Ext.getCmp(...) is undefined" 在不同的函数中

Question

我看到了 Extjs 代码，就是这样：

createPanelMC: function() {
        this.requiredSign = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
        var panel = Ext.create('Ext.form.Panel', {
            defaultType: 'textfield',
            name: 'nodebPanel',
            width: '100%',
            layout: {
                type: 'auto',
                align: 'stretch'
            },
            items: [{
                xtype   : 'fieldset', 
                name    : 'modlayanan',
                title   : 'Data Pelanggan',
                layout  : 'column',
                width   : '95%',
                margin  : '10',
                items: [{
                    xtype           : 'textfield',
                    name            : 'nomor',
                    id              : 'nomor',
                    fieldLabel      : 'PSTN',
                    emptyText       : 'Nomor...',
                    margin          : '10 0 0 0',
                    width           : 350,
                    labelWidth      : 100,
                    afterLabelTextTpl: this.requiredSign    
                }, {
                    xtype           : 'textfield',
                    fieldLabel      : 'Speedy',
                    name            : 'speedy',
                    id              : 'speedy',
                    margin          : '10 0 10 20',
                    width           : 350,
                    labelWidth      : 100
                },
                this.createTreePaketExist()
                ]
            }],
            dockedItems: [ {
                    xtype: 'toolbar',
                    name: 'tbpaketmc',
                    dock: 'bottom',
                    items: [ {
                            text: '<< Back',
                            action: 'doBack'
                        },'->', {
                            text: 'Submit',
                            action: 'doSubmit'
                        }
                    ]
                }
            ]
        });
        return panel;
    },

我在 this.createTreePaketExist() 中调用 nomor 和 speedy。这是 this.createTreePaketExist() 代码：

createTreePaketExist: function() {
        var nopstn= Ext.getCmp('nomor').getValue();
        var speedy= Ext.getCmp('speedy').getValue();
        var storeTree = Ext.create('Ext.data.TreeStore', {
            proxy: {
                type: 'ajax',
                method: 'POST',
                url: 'data/newoss_get_paket.php',
                params: { 
                        nopstn:nopstn
                        ,speedy:speedy
                }
            }
        });

    var groupProduct = Ext.create('Ext.tree.Panel', {
        store       : storeTree,
        name        : 'treeProduct',
        rootVisible : false,
        useArrows   : true,
        layout      :'fit',
        margin      : '0 0 0 0',
        autoScroll  : true,
        height      : 150,
        width       : '93%',
        listeners: 
        {
            checkchange: function(node, checked, eOpts){
                 node.eachChild(function(n) {
                node.cascadeBy(function(n){
                    n.set('checked', checked);
                });
            });
            p = node.parentNode;
            var pChildCheckedCount = 0;
            p.suspendEvents();
            p.eachChild(function(c) { 
                if (c.get('checked')) pChildCheckedCount++; 
                    p.set('checked', !!pChildCheckedCount);
                });
            p.resumeEvents();
            }
        }
    });
    return groupProduct; 
},

但它给出了一个错误：Ext.getCmp(...) is undefined。帮帮我，谢谢。

Answer 1

createTreePaketExist 将在组件初始化期间调用，此时文本字段不太可能实际呈现或什至正确初始化，最好使用侦听器。您可以使用 refs in your controller to get a reference to these fields automatically or you could listen to the afterrender 事件，然后引用字段。

我创建了一个 fiddle here 来展示如何在表单提交时加载商店，您也可以在文本字段的更改事件中执行此操作。

参考代码如下：

Ext.application({
    name: 'Fiddle',

    launch: function() {
        var panel = Ext.create('Ext.form.Panel', {
            renderTo: Ext.getBody(),
            defaultType: 'textfield',
            name: 'nodebPanel',
            width: '100%',
            layout: {
                type: 'auto',
                align: 'stretch'
            },
            items: [{
                xtype: 'fieldset',
                name: 'modlayanan',
                title: 'Data Pelanggan',
                layout: 'column',
                width: '95%',
                margin: '10',
                items: [{
                    xtype: 'textfield',
                    name: 'nomor',
                    id: 'nomor',
                    fieldLabel: 'PSTN',
                    emptyText: 'Nomor...',
                    margin: '10 0 0 0',
                    width: 350,
                    labelWidth: 100,
                    afterLabelTextTpl: this.requiredSign
                }, {
                    xtype: 'textfield',
                    fieldLabel: 'Speedy',
                    name: 'speedy',
                    id: 'speedy',
                    margin: '10 0 10 20',
                    width: 350,
                    labelWidth: 100
                }]
            }],
            dockedItems: [{
                xtype: 'toolbar',
                name: 'tbpaketmc',
                dock: 'bottom',
                items: [{
                    text: '<< Back',
                    action: 'doBack'
                }, '->', {
                    text: 'Submit',
                    action: 'doSubmit',
                    bindForm: true,
                    handler: function() {
                        var nopstn = Ext.getCmp('nomor').getValue();
                        var speedy = Ext.getCmp('speedy').getValue();

                        if (nopstn != '' && speedy != '') {
                            var store = Ext.ComponentQuery.query('#treeProduct')[0].getStore();
                            console.log(store);
                            store.load({
                                params: {
                                    nopstn: nopstn,
                                    speedy: speedy
                                }
                            });
                        }
                    }
                }]
            }]
        });

        var storeTree = Ext.create('Ext.data.TreeStore', {
            autoLoad: false,
            proxy: {
                type: 'ajax',
                method: 'POST',
                url: 'data/newoss_get_paket.php'
            }
        });

        var groupProduct = Ext.create('Ext.tree.Panel', {
            renderTo: Ext.getBody(),
            store: storeTree,
            itemId: 'treeProduct',
            name: 'treeProduct',
            rootVisible: false,
            useArrows: true,
            layout: 'fit',
            margin: '0 0 0 0',
            autoScroll: true,
            height: 150,
            width: '93%',
            listeners: {
                checkchange: function(node, checked, eOpts) {
                    node.eachChild(function(n) {
                        node.cascadeBy(function(n) {
                            n.set('checked', checked);
                        });
                    });
                    p = node.parentNode;
                    var pChildCheckedCount = 0;
                    p.suspendEvents();
                    p.eachChild(function(c) {
                        if (c.get('checked')) pChildCheckedCount++;
                        p.set('checked', !! pChildCheckedCount);
                    });
                    p.resumeEvents();
                }
            }
        });
    }
});

Answer 2

Ext.getCmp() 不推荐 在 ExtJS 代码中使用。相反，你应该使用

Ext.ComponentQuery.query('#nomor')

其中 nomor 是元素的 id。

但是要解决您的问题，请尝试调用此方法：

Ext.ComponentQuery.query('textfield[name="nomor"]')

或

Ext.getCmp('#nomor')

如果这对您没有帮助，那么问题出在您的代码结构中。可能是代表 getCmp('nomor') 的一段代码在代表您的 nomor 代码的一段代码之前加载和调用。如果不使用MVC

可能会出现这个问题

"Ext.getCmp(...) is undefined" 在不同的函数中

"Ext.getCmp(...) is undefined" in different function

extjs

get

undefined

return-value