Question

我有一个带菜单的简单按钮。菜单中有一个树状区域。

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

在treepanel的afterrender事件中，我在树中进行默认节点选择，此火选择事件和按钮的文本已更新。

但是，当第一次渲染按钮时，菜单中的树状区域尚未渲染。

我如何制作菜单＆amp;在呈现按钮后，treepanel以静默方式呈现（添加到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倍：

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

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

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

1 个答案: