在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'
}
});
});
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 grid取到数据而不显示的解决
- ExtJS下grid的一些属性说明
- Extjs在exlipse中设置自动提示的方法
- 常用Extjs工具:Extjs.util.Format使用方法
- extjs DataReader、JsonReader、XmlReader的构造方法
- 学习ExtJS(一) 之基础前提
- extjs 为某个事件设置拦截器
- ExtJs 学习笔记基础篇 Ext组件的使用第1/2页
- Extjs列表详细信息窗口新建后自动加载解决方法
- Extjs grid添加一个图片状态或者按钮的方法
- Extjs学习笔记之四 工具栏和菜单
- extjs form textfield的隐藏方法
- ExtJS 2.0实用简明教程之应用ExtJS
- ExtJS Store的数据访问与更新问题
- 不用写JS也能使用EXTJS视频演示
- Extjs改变树节点的勾选状态点击按钮将复选框去掉
- extjs 列表框(multiselect)的动态添加列表项的方法
- ExtJs默认的字体大小改变的几种方法(自己整理)
- ExtJS 配置和表格控件使用第1/2页
- 解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题