CODEWITHSUNDEEP
buttonextjsmenu
Cankut
Cankut

Reputation: 689

ExtJs button's menu contents not rendered until button is clicked

I have a simple button with menu. There is a treepanel inside the menu.

Whenever user selects some node in tree, i update the container buttons text.

In treepanel's afterrender event i make a default node selection in the tree and this fire selection event and the button's text is updated.

However, when the button is rendered for the very first time, the treepanel inside the menu is not yet rendered.

How can i make menu & treepanel render silently (adding to dom but not shown to user until button is clicked) after button is rendered?

Actually there is a workaround which i hesitate to use:

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

Any better ideas?

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

Code:

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

Upvotes: 2

Views: 1122

Answers (1)

dbrin
dbrin

Reputation: 15673

I think the easiest thing to do here is to pass along the text needed for the button. It seems that you already know which node to select in the tree, then you probably know which text corresponds to the selected index.

If that's somehow not possible or API is not changeable here is a way for you to set button text programmatically: http://jsfiddle.net/dbrin/XSn7X/3/

The changes from what you have done are 2 fold:

  1. Use Ext.define method to define your class with initComponent method. The initComponet method is a hook after the constructor to setup aditional properties. The key here is that the instance of the class exists at this point and *this* context references the class instance.
  2. Use Ext.create to create an instance of your customized button component.

In the initComponment method you just traverse the tree looking for the data you need and set the button text.

Upvotes: 1

Related Questions