您的位置:首页 > Web前端 > JavaScript

在extjs 的tree中联动修改页面,但是页面不出来,还报ct is null或者...is no function

2015-08-20 18:46 603 查看
Ext.BLANK_IMAGE_URL = 'ext3/resources/images/default/s.gif"';

Ext.onReady(function() {

Ext.QuickTips.init();

var tree = new Ext.tree.TreePanel({

    id:"myTree",

    region:'west',

    title :'分类管理',

    width :200,

    autoScroll : true,

    enableDD : true,// 是否支持拖拽效果

    containerScroll : true,// 是否支持滚动条

    split : true,

    minSize : 175,

    maxSize : 350,

    border : false,

    rootVisible : true,// 是否显示跟节点

    margins : '0 0 5 5',

    loader: new Ext.tree.TreeLoader(),

    listeners:{

                    click : function(n,e) {

                     

                    var leaf = n.attributes.leaf;//是否是叶子节点

                    var url = n.attributes.url;

                    var type = n.attributes.type;

                    var id = n.attributes.id;//获得id

                    var p = center.getItem(id);//是否di已经存在,即已经激活页面

                    

                    var exitMenu = center.get("exitSys");

                    if(exitMenu&&p!=exitMenu){

                        center.beginUpdate();

                        center.remove(exitMenu);

                        center.endUpdate();

                    }

                    

                    if(leaf){

                        if(p){

                            

                            center.setActiveTab(p);

                        }else{

                          

                                p = new Ext.Panel({

                                    title: n.attributes.text,

                              

                                    autoLoad: {

                                        url: url+"?time="+new Date(),

                                        scripts: true

                                    },

                                    autoScroll:true,

                                    closable: true,

                                    id: id

                                });

                         

                            center.add(p);                           

                            center.setActiveTab(p);

                            

                        }

                    }

    

                }        

        }

        

    });

    

    var root = new Ext.tree.AsyncTreeNode({

    id:'root',

    text:'分类',

    expanded:true,

    children:[{

        text:'计算环境',

        expanded:true,

        children:[{

            id:'sys',

            text:'环境监控',

            url:'index.jsp',

            leaf:true

        },{

        id:'machine',

        text:'机器监控',
        url:'machine.jsp',//以前这写的是machine.html,两个页面中的东西完全一样,但就是单击这个叶子激活页面之后,再激活其他页面就冲突,页面就不出来,有时候还出现  
     leaf:true                  //container undefine,后来发现在所有页面中renderTo的命名不能相同,但是在machine.jsp中renderTo:"machine"的时候页面也出错,还不清楚为什么

    },{

        id:'service',

        text:'服务监控',

        url:'service.html',

        leaf:true

    }]

    },{

    text:'计算作业',

    expanded:true,

    children:[{

            id:'task',

            text:'作业监控',

            url:'total_job.html',

            leaf:true

        },{

            id:'sub_job',

            text:'提交作业',

            url:'sub_job.html',

            leaf:true

        }]

    }]

    });

    tree.setRootNode(root);

    //tree.render("div1")    

        

    var top = new Ext.Panel({

        region:"north",

        title:"DeCloud计算控制台",    

        /* text:"DeCloud计算控制台", */

    });

    

    var center = new Ext.TabPanel({

        id:"center",

        //name:"center",

        region:"center",

        deferredRender: false,

        frame : true,

        enableTabScroll : true,

        autoScroll : true,

        activeTab: 0,

        margins : '0 5 5 1',

        defaults:{autoScroll:true},//自动出现滚动条

        items:[{

            title:"首页",

            html:'<img src="images/tab.jpg"/>'

            /* id:"index" */    

        }],

        enableTabScroll:true

    });

    

    

    

    

    

    var myView = new Ext.Viewport({

        id:'vp',

        layout : 'border',

        border : false,

        items : [top,tree,center],

        layoutConfig :{

            margins: '5 5 0 0'

          }    

    });

    

    

    

});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  extjs