Ext JS学习笔记四

树形组件

创建树形组件的步骤：

1.创建树的节点

 

创建树的节点一般采用TreeNode的方式，TreeNode作为节点存储数据，TreePanel必须有一个根节点才能展现到页面上，根节点可以通过配置或者是通过setRootNode方法设置

 

2.定义单击事件

在组件中，对事件的定义可以采用listeners的方式定义

 

完整代码

Ext.onReady(function(){
                var root = new Ext.tree.AsyncTreeNode({
                    expand:true,
                    children:[
                        {text:'张三1',
                         leaf:true
                        },{text:'张三2',
                         leaf:true
                        },{text:'张三3',
                         leaf:true
                        },{text:'张三4',
                         leaf:true
                        },{text:'张三5',
                         leaf:true
                        },{text:'张三6',
                         leaf:true
                        },{text:'张三7',
                         leaf:true
                        },{text:'张三8',
                         leaf:true
                        },{text:'张三9',
                         leaf:true
                        }]
                });
                var view = new Ext.Viewport({
                    layout:'border',
                    items:[{
                        region: 'west',
                        collapsible: true,
                        title: '属性组件',
                        xtype: 'treepanel',
                        width: 200,
                        heigth: 200,
                        autoScroll: true,
                        split: true,
                        loader: new Ext.tree.TreeLoader(),
                        root: root,
                        rootVisible: false,
                        listeners: {
                            click: function(n){
                                Ext.Msg.alert('点击提示', '您单击了：' + n.attributes.text + '"');
                            }
                        }
                    },{
                        region:'center',
                        xtype:'tabpanel',
                        items:[{
                            
                            height:100,
                            title:"north顶部面板",
                            html:"默认显示的面板"
                            
                        },{
                            height:100,
                            title:"south底部面板",
                            html:"该我显示啦"
                        },{
                            title:"center中央面板"
                        },{
                            width:200,
                            title:"west做面板"
                        },{
                            width:200,
                            title:"east右面板",
                            html:"轮到我了"
                        }
                        ]
                    }
                        
                    ]
                });
            });