javascript - Extjs:Element 的上/下功能如何工作？

Question

我有一些 extjs 代码需要支持，但我在理解 extjs 元素中的那些上/下函数时遇到了问题。当前问题是 selector 参数。文档说它应该是 CSS 选择器，但我不知道如何设置它。例如。我有这样的看法:

Ext.define('ETaxi.settings.view.InfoPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.infopanel',
    title: i18n.settings.info.title,

    defaultType: 'displayfield',

    items: [{
        fieldLabel: i18n.settings.info.label,
        name: 'title'
    }]
});

如何设置它的 CSS 选择器，以便通过上/下函数从层次结构中获取此元素？

欢迎提供有关这些功能工作流程的任何其他信息。谢谢。

Answer 1

如果面板内部有一个按钮，并且您有对该按钮的引用，您可以这样做:

var myDesiredPanel=someButtonReference.up('infopanel');//我们正在使用 xtype 来查找它。这次我们用完了，因为按钮在面板内部。

另一方面，如果面板在里面，假设你可以做一个视口(viewport):

var myDesiredPanel=referenceToMyVieport.down('infopanel');

关于选择器，意味着你可以做到:

 myDesiredPanel = referenceToMyVieport.down('infopanel[title=MyInfoPanel]');

你只会获取一个标题为 MyInfoPanel 的信息面板，你可以使用该对象的任何配置来进行这种区分

这是一个代码示例，我们通过向下 https://fiddle.sencha.com/#fiddle/1p6 获取面板内的特定按钮。你可以在这个 fiddle 中修改它，看看它是如何工作的。