Ext3 学习firstWebProject_web 应用 ext3-CSDN博客

本文链接：https://blog.csdn.net/kxjzv3/article/details/115796203

helloworld37.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="ext-3.3.1/resources/css/ext-all.css"/>
	<style>
		.main-btn {float:right;margin:9px 50px 0 50px;}
		.main-btn .x-btn-mc {text-align:center;}
	</style>
	<script type="text/javascript" src="ext-3.3.1/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="ext-3.3.1/ext-all.js"></script>
	<script type="text/javascript" src="ext-3.3.1/ext-lang-zh_CN.js" charset="UTF-8"></script>
	<title>XX系统</title>

	</head>
	<body>
  		<script type="text/javascript" src="js/LayoutBorder37.js" ></script> 
  		
  		 
	</body>
</html>

LayoutBorder37.js

Ext.ns("alex.extjs.layout");

alex.extjs.layout.PrettyPanel = function() {

	// Ext.QuickTips.init(); //初始化快速提示
	var logoutBtn = new Ext.Button({
				text : '退出',
				handler : function() {
					// logoutIndex();
					location.href = "login.html";
				}
			});

	var northPanel = new Ext.Panel({
				region : 'north', // 指定在北部
				// title : '北部面板', // 面板标题
				split : true,
				height : 45, // 指定高度
				collapsible : false, // 可以折叠
				collapseMode : 'mini',
				frame : true,

				// html : '<left>可折叠面板-用户信息</left>',
				// tbar:[{text:'顶部工具栏topToolbar'}],
				// bbar:[{text: " 按钮1 " },{text: " 按钮2 " }], // 底部工具栏
//				html : " 内容 ",
				// buttons:[{text: " 按钮3 " },{text: " 按钮4 " }], // footer部工具栏

				xtype : "container",

				border : false,
				layout : "auto",
				items : [{
							xtype : "box",
							autoEl : {
								tag : "img",
								src : "img/logo.png",
								cls : "main-logo",
								width : 120,
								height : 30

							}
						}, {
							xtype : "splitbutton",
							cls : "main-btn",
							// iconCls: "x-btn-user",
							minWidth : 104,
							enabelToggle : true,
							pressed : true,
							text : "XXX",
							menu : new Ext.menu.Menu({
										items : [{
											text : "修改密码"
												// iconCls: "x-btn-lock"
											}, {
											text : "退出系统",
											// iconCls: "x-btn-exit",
											handler : function() {
												window.location.href = "login.html";
											}
										}]
									})
						}]

			});

	var eastPanel = new Ext.Panel({
				region : 'east', // 指定在东部
				title : '东部面板',
				width : 100,
				split : true, // 可调高/宽度
				minSize : 80, // 最小高/宽度
				maxSize : 400, // 最大高/宽度
				html : '可调宽度面板'
			});

	var southPanel = new Ext.Panel({
				region : 'south',
				// title: '南部面板',
//				height : 80,
//				collapseMode : 'mini', // 折叠后是窄边框
//				split : true, // 可调高/宽度
//				minSize : 40, // 最小高/宽度
//				maxSize : 200, // 最大高/宽度
//				frame : true,
				html : '<center>Copyright &copy; 2021 某某科技有限公司 版权所有</center>'
			});
//TreePanel放在westPanel
	var tree = new Ext.tree.TreePanel({
		loader : new Ext.tree.TreeLoader({
					dataUrl : '10-05.tree.txt'
				}),
		// title: 'west',
		region : 'west',
		split : false,
		border : false,
		collapsible : false
			//
			// width: 120,
			// minSize: 80,
			// maxSize: 200
		});

	var root = new Ext.tree.AsyncTreeNode({
				text : '偶是根'
			});
	tree.setRootNode(root);
	root.expand();
	// 树形配置结束

	var westPanel = new Ext.Panel({
				title : '西部面板',
				region : 'west',
				split : true,
				collapsible : true,
				collapseMode : 'mini',
				margins : '0 0 0 5', // 当前组件的西边页边距为5
				width : 200,

				items : [tree]

			});

	var cm = new Ext.grid.ColumnModel([{
				header : '编号',
				dataIndex : 'id',
				sortable : true
			}, {
				header : '名称',
				dataIndex : 'name'
			}, {
				header : '描述',
				dataIndex : 'descn'
			}]);
	var data = [['1', 'name1', 'descn1'], ['2', 'name2', 'descn2'],
			['3', 'name3', 'descn3'], ['4', 'name4', 'descn4'],
			['5', 'name5', 'descn5']];
	

	var dataSstore = new Ext.data.Store({
				proxy : new Ext.data.MemoryProxy(data),
				reader : new Ext.data.ArrayReader({}, [{
									name : 'id'
								}, {
									name : 'name'
								}, {
									name : 'descn'
								}])
			});
	dataSstore.load();
	
	var grid = new Ext.grid.GridPanel({
				// autoHeight : true,
				// renderTo: 'grid',
				// title:'title',
//				store : store,
				store :dataSstore,
				// layout : 'fit',
				cm : cm,
				bbar : new Ext.PagingToolbar({
							pageSize : 10,
							store : dataSstore,
							displayInfo : true,
							displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
							emptyMsg : "没有记录"
						}),
				tbar : new Ext.Toolbar(['-', {
							text : '添加一行',
							handler : function() {

							}
						}, '-', {
							text : '删除一行',
							handler : function() {
								Ext.Msg.confirm('信息', '确定要删除？', function(btn) {
										});
							}
						}, '-', {
							text : '修改',
							handler : function() {
							}
						}])
			});
	var tabs = new Ext.TabPanel({
				region : 'center',
				margins : '3 3 3 0',
				activeTab : 0,
				defaults : {
					autoScroll : true
				},
				items : [{
							title : '默认',

							layout : 'fit',
							// html: '内容',
							items : [grid]
						}, {
							title : '标签',
							html : '内容'

						}, {
							title : '可关闭',
							html : '内容',
							closable : true
						}]
			});

	var centerPanel = new Ext.Panel({
				border : false, //
				layout : 'fit',
				region : 'center', // 边界布局,必须有 center
				// html: '',
				items : [tabs]
			});

	var viewport = new Ext.Viewport({ // 生成一个 ExtJS 视窗 组件对象
		// renderTo : Ext.getBody(), // 呈现在 Html Body标签中
		layout : 'border', // 使用边界布局
		items : [northPanel, westPanel, centerPanel, southPanel]
			// items:[northPanel, eastPanel, southPanel, westPanel, centerPanel]
	});
}

Ext.onReady(alex.extjs.layout.PrettyPanel);

10-05.tree.txt

[
    {text:'01',children:[
        {text:'01-01',leaf:true},
        {text:'01-02',children:[
            {text:'01-02-01',leaf:true},
            {text:'01-02-02',leaf:true}
        ]},
        {text:'01-03',leaf:true}
    ]},
    {text:'02',leaf:true}
]

logo.png