ExtJs 按钮的菜单内容在单击按钮之前不会呈现

Question

我有一个带菜单的简单按钮。菜单中有一个树形面板。

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

在 treepanel 的 afterrender 事件中，我在树中进行了默认节点选择，并且此触发选择事件和按钮的文本被更新。

但是，当第一次渲染按钮时，菜单内的树形面板还没有渲染。

如何在按钮被渲染后让菜单和树形面板静默渲染（添加到 dom 但在单击按钮之前不向用户显示）？

实际上有一个我犹豫使用的解决方法：

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

有更好的想法吗？

JsFiddle： http://jsfiddle.net/exGk3/

代码：

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
    }
});

Answer 1

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

如果这无法实现或 API 不可更改，您可以通过以下方式以编程方式设置按钮文本： http://jsfiddle.net/dbrin/XSn7X/3/

您所做的更改是 2 倍：

1. 使用Ext.define 方法通过initComponent 方法定义您的类。 initComponet 方法是在构造函数之后设置附加属性的钩子。这里的关键是此时类的实例存在，*this* 上下文引用了类实例。
2. 使用 Ext.create 创建自定义按钮组件的实例。

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