Button 单击按钮后才会呈现ExtJs按钮的菜单内容

我有一个简单的菜单按钮。菜单里有一个树面板

每当用户选择树中的某个节点时，我都会更新容器按钮文本

在treepanel的afterrender事件中，我在树中进行了默认节点选择，该激发选择事件和按钮的文本将被更新

但是，当第一次渲染按钮时，菜单中的树面板尚未渲染

如何使菜单和树面板以静默方式渲染添加到dom中，但在渲染按钮后单击按钮之前不会显示给用户

实际上，有一种变通方法我不太愿意使用：

btn.showMenu(); 
btn.hideMenu();

还有更好的主意吗

JsFiddle：

代码：

---

我认为这里最简单的方法是传递按钮所需的文本。似乎您已经知道要在树中选择哪个节点，然后您可能知道哪个文本对应于所选索引

如果这在某种程度上是不可能的，或者API是不可更改的，那么这里有一种方法可以让您通过编程方式设置按钮文本：

您所做的更改有两个方面：

使用Ext.define方法使用initComponent方法定义类。 initComponet方法是构造函数之后的一个钩子，用于设置传统属性。这里的关键是类的实例在此点存在，*此*上下文引用类实例。 使用Ext.create创建自定义按钮组件的实例。

---

在initComponent方法中，您只需遍历树以查找所需的数据并设置按钮文本。

我认为最简单的方法是传递按钮所需的文本。似乎您已经知道要在树中选择哪个节点，然后您可能知道哪个文本对应于所选索引

如果这在某种程度上是不可能的，或者API是不可更改的，那么这里有一种方法可以让您通过编程方式设置按钮文本：

您所做的更改有两个方面：

使用Ext.define方法使用initComponent方法定义类。 initComponet方法是构造函数之后的一个钩子，用于设置传统属性。这里的关键是类的实例在此点存在，*此*上下文引用类实例。 使用Ext.create创建自定义按钮组件的实例。

---

在initComponent方法中，您只需遍历树以查找所需的数据并设置按钮文本。

您好，谢谢您的回复。实际上，我需要的不仅仅是设置按钮的文本。我需要访问/操作树的properties tree.selModel，例如在渲染时间按钮时。问题是，树未呈现，因此在创建按钮时无法正确访问。你需要一个额外的btn.menuShow来渲染树。我不确定你的意思是什么，创建按钮时树属性可用。您可以将树面板和存储区的创建移动到按钮的initComponent中。在那里，您可以设置任意树配置属性。您需要设置什么特定属性？tree.selModel.getSelection在呈现树之前返回一个空数组。这是因为物理上没有选择任何内容。为什么你需要等待物理选择？您拥有选定的节点索引，您可以通过相同的索引从存储中获取数据。这就是我在小提琴中为你所做的。好吧，即使我尝试在树的添加事件上以编程方式进行选择，它仍然返回一个空数组。嗨，谢谢你的回复。实际上，我需要的不仅仅是设置按钮的文本。我需要访问/操作树的properties tree.selModel，例如在渲染时间按钮时。问题是，树未呈现，因此在创建按钮时无法正确访问。你需要一个额外的btn.menuShow来渲染树。我不确定你的意思是什么，创建按钮时树属性可用。您可以将树面板和存储区的创建移动到按钮的initComponent中。在那里，您可以设置任意树配置属性。您需要设置什么特定属性？tree.selModel.getSelection在呈现树之前返回一个空数组。这是因为物理上没有选择任何内容。为什么你需要等待物理选择？您拥有选定的节点索引，您可以通过相同的索引从存储中获取数据。这就是我在小提琴中为你所做的。好吧，即使我尝试在树的添加事件上通过编程进行选择，它仍然返回一个空数组。

var selectedNodeIndex = 1;

var onItemSelect = function (selModel, node, index) {
    var treePanel = selModel.view.up();
    var btn = treePanel.up("button");
    btn.setText(node.data.text);
};

var afterTreeRender = function (t) {
    t.selModel.select(selectedNodeIndex);
}

Ext.create('Ext.Button', {
    text: 'Click me',
    renderTo: Ext.getBody(),
    menu: {
        items: {
            xtype: "treepanel",
            id: "tree",
            indent: false,
            width: 150,
            height: 200,
            rootVisible: false,
            root: {
                children: [{
                    text: "item 1",
                    leaf: true
                }, {
                    text: "item 2",
                    leaf: true
                }, {
                    text: "item 3",
                    leaf: true
                }]
            },
            listeners: {
                select: {
                    fn: onItemSelect
                },
                afterrender: {
                    fn: afterTreeRender
                }
            }
        },
        showSeparator: false
    }
});