extjs4.1单击treepanel节点收缩叶子节点

表达的不是很清楚，就是树形菜单，有叶子节点，extjs默认的是双加节点才会收缩和伸展，其实实际中，都想使用方便一些，单击就可以展开叶子节点。如下图

现在的画面中单击系统管理菜单可以收缩，再单击就会展开，很简单一个功能，但是很实用，主要是在treepanel的itemclick定义相关事件，如下：

  itemclick: function (tree, record, item, index, e, option) {

   if(record.get("leaf")==false)

     {          

           if (record.isExpanded()) {
              record.collapse();
            } else {
                record.expand();
             }
                 return;

     }

}

查看api其实可以指定，record是一个节点记录，具备treepanel的相关属性和事件，所以就好有上面的事件执行。完整代码如下（注意是放在Ext.onReady中）：

    var store = Ext.create('Ext.data.TreeStore', {
                root: {
                    expanded: true,
                    children: [{
                        id: "1001", text: "欢迎页面", leaf: true, url: "欢迎页面"
                    }, {
                        text: "系统管理", expanded: true,
                        children: [{
                            id: "1002", text: "角色管理", leaf: true, url: "角色管理"
                        }, {
                            id: "1003", text: "用户管理", leaf: true, url: "用户管理"
                        }]
                    }, {
                        text: "系统日志", leaf: true, url: "系统日志"
                    }]
                }
            });

            var menuTree = Ext.create('Ext.tree.Panel', {
                store: store,
                listeners: {
                    itemclick: function (tree, record, item, index, e, option) {
                        if (record.get("leaf") == true) {

                            var tab = Ext.getCmp("tab" + record.get("id"));
                            if (tab) {
                                tab.show();
                            }
                            else {
                                tabPanel.add({
                                    id: "tab" + record.get("id"),
                                    closable: true,
                                    html: record.get("text"),

                                    title: record.get("text")
                                }).show();
                            }
                        }
                        else {                         
                         
                                if (record.isExpanded()) {
                                    record.collapse();
                                } else {
                                    record.expand();
                                }
                                return;
                        

                        }

                    }
                }
            });

            var tabPanel = Ext.create("Ext.tab.Panel", {
                id: "centerTab",
                items: [{
                    title: "欢迎",
                    id: "1000",
                    html: "欢迎你的到来"
                }]
            });

            Ext.create("Ext.container.Viewport", {
                layout: "border",
                items: [{
                    region: "north",
                    title: "演示系统",
                    height: 100
                }, {
                    region: "west",
                    title: "系统菜单",
                     200,
                    layout: "fit",
                    items: menuTree
                }, {
                    region: "center",
                    layout: "fit",
                    border: false,
                    items: tabPanel
                }]
            });