javascript - Extjs从一个 View 访问另一个 View

Question

在 Extjs 中，我试图从另一个 View 访问一个 View 上的某些数据集。两个 View 都呈现在同一页面上。我在 sencha fiddle 创建了一个小应用程序这表明了我正在尝试做的事情。当您单击第二个文本框时，它应该显示第一个文本框的数据。

我想用它的引用值把它拉出来

Ext.application({
    name: 'Fiddle',

    launch: function() {

        Ext.create('Ext.panel.Panel', {
            title: 'Hello',
            reference: 'HelloPanel',
            width: 200,
            html: '<input type="text">',
            renderTo: Ext.getBody()
        });

        Ext.create('Ext.panel.Panel', {
            title: 'Hello2',
            reference: 'fooGrid',
            width: 200,
            html: '<input type="text">',
            renderTo: Ext.getBody(),
            listeners: {
                click: {
                    element: 'el', 
                    fn: function() {
                        alert('Show data from HelloPanel1');
                    }
                }
            }


        });

    }
});

Answer 1

看看这个。刚刚做了一些更改: 由于仅显示 View ，因此您需要定义referenceHolder。

下面的例子太琐碎，无法显示引用的力量。为此，您需要制作ViewController。使用 Controller 配置将呈现的 View 绑定(bind)到 Controller 。然后在 Controller 中您可以执行类似 this.lookupReference('superAwesomeTextbox'); 的操作。现在您已经连接到 Controller 中的该组件了。需要注意的是，referenceHolder对于ViewController来说并不是必需的。就这么简单。

Ext.application({
    name: 'Fiddle',

    launch: function() {

        var panel1 = Ext.create('Ext.panel.Panel', {
            title: 'Hello',
            referenceHolder: true,
            reference: 'HelloPanel',
            width: 300,
            items:[{
                xtype: 'textfield',
                fieldLabel: 'textbox',
                reference: 'superAwesomeTextbox'
            }],
            renderTo: Ext.getBody()
        });

        var panel2 = Ext.create('Ext.panel.Panel', {
            title: 'Hello2',
            reference: 'fooGrid',
            referenceHolder: true,
            width: 300,
            items:[{
                xtype: 'textfield',
                fieldLabel: 'textbox',
                reference: 'superAwesomeTextbox2',
                listeners: {
                    focus: function(comp){
                        var textbox = panel1.lookupReference('superAwesomeTextbox');
                        comp.setValue(textbox.getValue());
                    }
                }
            }],
            renderTo: Ext.getBody(),
        });

    }
});