【问题标题】:extjs button scopeextjs 按钮范围
【发布时间】:2011-12-21 11:18:24
【问题描述】:

我正在尝试了解以下场景中的范围。在调用searchTerms时,scope:this下的this指的是searchTerms函数而不是面板本身。这似乎与我从其他示例中观察到的不同。我可以知道我犯了什么错误吗?

function searchTerms(){
       var searchGrid = new Ext.grid.GridPanel({

        });

        var searchPanel = new Ext.form.FormPanel({
            region: 'south',
            height:150,
            items:[
            {
                xtype: 'textfield',
                fieldLabel: 'Keywords',
            },{
                xtype: 'textfield',
                fieldLabel: 'Label',
            },{
                xtype: 'datefield',
                fieldLabel: 'Valid till'
            },new Ext.Button({
                text: 'crawl',
                scope: this,
                handler: function(b,e){
                    Ext.Ajax.request({^M
                        url: '/discovery/tsearch',^M
                        params: {^M
                            keywords: this.items[0].getValue(),
                            label: this.items[1].getValue(),
                            valid: this.items[2].getValue(),
                        },
                    });
                }
            }),],
        });

        var regionPanel = new Ext.Panel({
            title: 'search',
            layout: 'border',
            items: [searchPanel, searchGrid]
        });

    return regionPanel;
}

【问题讨论】:

    标签: javascript extjs extjs3


    【解决方案1】:

    我认为你的本意是:

    function searchTerms(){
       var searchGrid = new Ext.grid.GridPanel({
    
        });
    
        var searchPanel = new Ext.form.FormPanel({
            region: 'south',
            height:150,
            items:[
            {
                xtype: 'textfield',
                fieldLabel: 'Keywords',
            },{
                xtype: 'textfield',
                fieldLabel: 'Label',
            },{
                xtype: 'datefield',
                fieldLabel: 'Valid till'
            }],
        });
        searchPanel.add(new Ext.Button({
                text: 'crawl',
                scope: searchPanel,
                handler: function(b,e){
                    Ext.Ajax.request({
                        url: '/discovery/tsearch',
                        params: {
                            keywords: this.items[0].getValue(),
                            label: this.items[1].getValue(),
                            valid: this.items[2].getValue(),
                        },
                    });
                }
            })
        );
        var regionPanel = new Ext.Panel({
            title: 'search',
            layout: 'border',
            items: [searchPanel, searchGrid]
        });
    
    return regionPanel;
    }
    

    【讨论】:

    • 这是一个范围问题,'this' 将是您创建按钮时的 searchTerm 对象而不是 searchPanel,您必须考虑第一次执行代码时的分数,而不是事件时的分数来了
    • 不同之处在于按钮添加到了searchPanel,作用域设置为searchPanel。为了能够将范围设置为 searchPanel,必须首先定义 searchPanel - 当您在 searchPanel 中创建按钮 inline 时,这是不可能的。这有意义吗?
    • @Chau:是的,非常有道理,这就是为什么我不得不使用add,如果你想内联,我认为你应该通过使用 parentContainer 或获得 searchPanel 的引用使用一些 id 和 getCmp
    • @RageZ:评论不是给你的 :) 我从没想过使用像 getCmp 这样的引用函数,但它可能真的有效。
    • hmm @RageZ 我有点困惑,部分原因是这篇文章。 sencha.com/learn/legacy/… 所以让我澄清一下,链接示例的“this”仅在调用对象的函数时才确定,因此对象本身也是如此。而在我的情况下,“this”是在对象创建期间确定的,因此它指的是 searchTerm 对象....
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多