主要使用的是viewPort布局,,再添加一些组件(下附源代码)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>HELLO WORD</title>
<link rel="stylesheet" type="text/css" href="/Ext/Ext/resources/css/ext-all.css" />
<script type="text/javascript" src="/Ext/Ext/bootstrap.js"></script>
<script type="text/javascript" src="/Ext/Ext/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
//使用Viewport布局
var mypanel = new Ext.container.Viewport({
layout:'border',//表格布局
items:[
north,
west,
center,
south,
]
});
});
//编写 各个模块
//编写north panel
var north = new Ext.panel.Panel({
region:'north',
title:'xxx公司后台管理系统',
height:105,
html:'<font size="6"><b>xx后台管理系统</b></font>',
bbar:[{
text:'行政办公',
},'-',{
text:'电话通信',
},'-',{
text:'客户管理',
},'-',{
text:'人力资源管理',
},'-',{
text:'进销存管理',
},'-',{
text:'VIP客户管理',
},'-',{
text:'业绩管理',
},{
xtype:"tbfill"
},{
pressed:false,text:'刷新'
},{
pressed:false,text:'帮助'
},{
pressed:false,text:'退出'
},{
xtype:"combo"
}]
});//north panel 编写
//编写 west panel
var west =new Ext.panel.Panel({
title:'信息管理栏',
region:'west',
collapsible:true,
split:true,
width:200,
margins:1,
//添加两块面板
layout:'auto',
items:[{
title:"客户管理",
height:295,
collapsible:true,
layout:'accordion',//使用手风琴进行布局
items:[{
title:'客户信息管理',
items:[{
xtype:'treepanel',
border:0,
rootVisible:false,//根节点是否可见
root:{
children:[
{text:'收购信息',leaf:true},
{text:'订单信息',leaf:true},
{text:'产品信息',leaf:true},
{text:'客户信息',leaf:true},
{text:'VIP客户信息',leaf:true},