ExtJS 3.4: how to display plus/minus icons for TreeNode

Question

The documentation for the TreeNode object lists a Config option named expandable:

expandable : Boolean
If set to true, the node will always show a plus/minus icon, even when empty

I am creating a number of non-leaf objects the following way:

    treeNodes[tag] = new Ext.tree.TreeNode({
        text       : tag,
        leaf       : false,
        expanded   : false,
        expandable : true,
        loaded     : true
    }); 

But after adding them to the root TreeNode the result is something like:

Which gets users complaining for having to double-click to expand a node. How can I get the plus/minus buttons as seen in this example?

Answer 1

There is no wrong in the code snippet that you have pasted here. There may be some config in TreePanel which you might be added in your code can cause the problem. May the config like 'iconCls'

Working fiddle is here... Plus and Minus in ExtJS tree

Ext.onReady(function() {

    new Ext.tree.TreePanel({
        title: 'Simple Tree',
        width: 200,
        height: 150,
        rootVisible: false,
        renderTo: Ext.getBody(),
        root: {
            expanded: true,
            children: [{
                text: "detention",
                leaf: false,
                expanded: false,
                expandable: true,
                loaded: true
            }, {
                text: "homework",
                expanded: true,
                children: [{
                    text: "book report",
                    leaf: true
                }, {
                    text: "alegrbra",
                    leaf: true
                }]
            }, {
                text: "buy lottery tickets",
                leaf: true
            }]
        }
    });
});

The version used was 3.4.0. Check your version and code.