我想用Extjs实现这样一个简单的页面布局,分为上、左、中、下,四个部分,我是跟着书《Extjs源码分析与开发实例》中的例子敲的,源代码如下:
其中刚敲了两个js页面,一个是主页面叫Main.js,一个叫LeftMenu.js。其中LefuMenu.js一运行fireBug就报错,LeftMenu.js中的源代码如下:
LeftMenu = function(config){
alert("I am succes to call LeftMenu");
var d = Ext.apply({
split:true,
region:'west',
width:200,
defaults:{border:false}
layoutConfig:{animate:true}
},config || {});
config=Ext.apply(d,{layout:'accordin',collapsible:true});
LeftMenu.superclass.constructor.call(this,config||{});
/*
for(var i=0;i<this.trees.length;i++){
this.add({
title:this.trees[i].getRootNode().text,
items:[this.trees[i]]
});
}*/
}
Ext.extend(LeftMenu,Ext.Panel,{})
其中Main.js中调用的代码是:
var t2 = new Ext.tree.TreePanel({
border:false,
rootVisible:false,
root:new Ext.tree.AsyncTreeNode({
text:'主数据管理',
expanded:true,
children:[
{id:"department",text:"部门管理",leaf:true},
{id:"company",text:"公司管理",leaf:true},
{id:"permission",text:"权限管理",
children:[{
id:"permission",text:"权限管理",leaf:true},
{id:"permissionType",text:"权限类别",leaf:true
}]}
]
})
})
var t1 = new Ext.tree.TreePanel({
border:false,
rootVisible:false,
root:new Ext.tree.AsyncTreeNode({
text:'主数据管理',
expanded:true,
children:[
{id:"department",text:"部门管理",leaf:true},
{id:"company",text:"公司管理",leaf:true},
{id:"permission",text:"权限管理",
children:[{
id:"permission",text:"权限管理",leaf:true},
{id:"permissionType",text:"权限类别",leaf:true
}]}
]
})
})
var leftMenu = new LeftMenu({
title:'我的办公系统',
items:[
{
title:'我的办公桌',items:[t1]
},{
title:'主数据管理',items:[t2]
}
]
}
);
报的错误是:
Ext.Container.LAYOUTS[this.layout.toLowerCase()] is not a constructor