extjs 按钮范围

Posted 2023-02-26

【中文标题】extjs 按钮范围

【英文标题】：extjs button scope

【发布时间】：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;

【参考方案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 对象....