Extjs案例---后台管理系统界面布局

最新推荐文章于 2023-04-18 17:01:27 发布

我有一个小毛驴

最新推荐文章于 2023-04-18 17:01:27 发布

阅读量4k

点赞数 1

分类专栏： ExtJs 文章标签： Extjs综合案例布局 Extjs编写后台管理系统

本文链接：https://blog.csdn.net/liumingm_music/article/details/21816875

版权

本文介绍了一种使用Extjs实现后台管理系统界面布局的方法，通过viewPort布局结合组件添加，创建高效易用的后台界面。提供源代码供读者参考，鼓励交流讨论，共同解决问题。

摘要由CSDN通过智能技术生成

主要使用的是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},

最低0.47元/天解锁文章

我有一个小毛驴

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Extjs案例---后台管理系统界面布局

主要使用的是viewPort布局，，再添加一些组件(下附源代码) HELLO WORD Ext.onReady(function(){ //使用Viewport布局 var mypanel = new Ext.container.Viewport({ layout:'border',//表格布局 items:[
复制链接

扫一扫