Ext 学习之旅 简单学习快乐学习之tree菜单优化和页面加载讲解

最新推荐文章于 2022-01-02 19:58:11 发布
最新推荐文章于 2022-01-02 19:58:11 发布
阅读量92 收藏
点赞数
分类专栏： Ext 文章标签： EXT CSS JavaScript HTML IE ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aqqqqa/article/details/83853957
版权

上一节中有写bug没有解决，这一节中将解决掉它，第一次写可能不够详细，有问题qq邮寄给我：380837242@qq.com，

先上代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<link type="text/css" rel="stylesheet" href="../shared/examples.css" />
<script type="text/javascript" src="../shared/examples.js"></script>
<title>index</title>
</head>

<body>
<script type="text/javascript">
var tab = new Ext.TabPanel({
	id:'centerPage',
	region:'center',
	deferredRender:false,
	activeTab:0,
	title:"中央面板",
	resizeTabs:true, // turn on tab resizing
	minTabWidth: 115,
	tabWidth:135,
	enableTabScroll:true
});
Ext.onReady(function(){ 
	new Ext.Viewport({
		enableTabScroll:true,
		layout:"border",
		items:[
			{
				id:'topPage',
				region:"north",
				//html: '<h1 class="x-panel-header">Page Title</h1>',
				//autoHeight: true,
				//border: false,
				//split: true,
				//margins: '0 0 0 0',
				collapsible: true,
				collapseMode: 'mini',
				height:50,
				title:"顶部面板"
			},{
				id:'bottomPage',
				region:"south",
				collapsible: true,
				html: 'Information goes here',
				collapseMode: 'mini',
				//split: true,
				height: 50,
				title:"底部面板"
			},tab,{
				id:'leftPage',
				region:"west",
				collapsible: true,
				collapseMode: 'mini',
				//split: true,
				width:200,
				title:"左边面板",
				layout: 'accordion',
				bodyStyle: {
					'background-color': '#eee'
				},
//				defaults: {
//					border: false
//				},
				items: [	
						{title: 'Item 1',border:false,html: '<div id="tree1" style="overflow:auto;width:100%;height:100%"></div>'},
						{title: 'Item 2',border:false,html: '<div id="tree2" style="overflow:auto;width:100%;height:100%"></div>'},
						{title: 'Item 3',border:false,html: '<div id="tree3" style="overflow:auto;width:100%;height:100%"></div>'}
					]
			},{
				id:'rightPage',
				region:"east",
				width:100,
				collapsible: true,
				collapseMode: 'mini',
				//split: true,
				title:"右边面板"
			}
		]
	}); 
	var root2=new Ext.tree.TreeNode({
		id:"root2",
		text:"树的根"
	});
	
	var c1=new Ext.tree.TreeNode({
		id:'c1',
		icon:'../../resources/images/yourtheme/menu/group-checked.gif',
		text:'源码网',
		listeners:{    
		'click':function(node, event) {    
			event.stopEvent();    
			var n = tab.getComponent(node.id);    
			if (!n) { //判断是否已经打开该面板    
				 n = tab.add({    
					'id':node.id,    
					'title':node.text,    
					 closable:true,  //通过html载入目标页    
					 html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="http://www.codefans.net"></iframe>'   
				 });    
			 }    
			 tab.setActiveTab(n);    
		 }    
		}
	});
	
	var c2=new Ext.tree.TreeNode({
		id:'c2',
		icon:'../../resources/images/yourtheme/menu/group-checked.gif',
		text:'博客园',
		listeners:{    
		'click':function(node, event) {    
			event.stopEvent();    
			var n = tab.getComponent(node.id);    
			if (!n) { //判断是否已经打开该面板    
				 n = tab.add({    
					'id':node.id,    
					'title':node.text,    
					 closable:true,  //通过html载入目标页    
					 html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="http://www.cnblogs.com/"></iframe>'   
				 });    
			 }    
			 tab.setActiveTab(n);    
		 }    
		}
	});
	
	var c3=new Ext.tree.TreeNode({
		id:'c3',
		icon:'../../resources/images/yourtheme/menu/group-checked.gif',
		text:'JavaEye',
		listeners:{    
		'click':function(node, event) {    
			event.stopEvent();    
			var n = tab.getComponent(node.id);    
			if (!n) { //判断是否已经打开该面板    
				 n = tab.add({    
					'id':node.id,    
					'title':node.text,    
					 closable:true,  //通过html载入目标页    
					 html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="http://www.iteye.com"></iframe>'   
				 });    
			 }    
			 tab.setActiveTab(n);    
		 }    
		}
	});
	var c4=new Ext.tree.TreeNode({
		id:'c4',
		icon:'../../resources/images/yourtheme/menu/group-checked.gif',
		text:'网易',
		listeners:{    
		'click':function(node, event) {    
			event.stopEvent();    
			var n = tab.getComponent(node.id);    
			if (!n) { //判断是否已经打开该面板    
				 n = tab.add({    
					'id':node.id,    
					'title':node.text,    
					 closable:true,  //通过html载入目标页    
					 html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="http://www.163.com"></iframe>'   
				 });    
			 }    
			 tab.setActiveTab(n);    
		 }    
		}
	});
	
	var c5=new Ext.tree.TreeNode({
		id:'c5',
		icon:'../../resources/images/yourtheme/menu/group-checked.gif',
		text:'新浪',
		listeners:{    
		'click':function(node, event) {    
			event.stopEvent();    
			var n = tab.getComponent(node.id);    
			if (!n) { //判断是否已经打开该面板    
				 n = tab.add({    
					'id':node.id,    
					'title':node.text,    
					 closable:true,  //通过html载入目标页    
					 html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="http://www.sina.com.cn"></iframe>'   
				 });    
			 }    
			 tab.setActiveTab(n);    
		 }    
		}
	});
	var c6=new Ext.tree.TreeNode({
		id:'c6',
		icon:'../../resources/images/yourtheme/menu/group-checked.gif',
		text:'百度',
		listeners:{    
		'click':function(node, event) {    
			event.stopEvent();    
			var n = tab.getComponent(node.id);    
			if (!n) { //判断是否已经打开该面板    
				 n = tab.add({    
					'id':node.id,    
					'title':node.text,    
					 closable:true,  //通过html载入目标页    
					 html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="http://www.baidu.com"></iframe>'   
				 });    
			 }    
			 tab.setActiveTab(n);    
		 }    
		}
	});
	var c7=new Ext.tree.TreeNode({
		id:'c7',
		icon:'../../resources/images/yourtheme/menu/group-checked.gif',
		text:'AddTable',
		listeners:{    
		'click':function(node, event) {    
			event.stopEvent();    
			var n = tab.getComponent(node.id);    
			if (!n) { //判断是否已经打开该面板    
				 n = tab.add({    
					title: 'New Tab ' + (++index),
					iconCls: 'tabs',
					html: 'Tab Body ' + (index) + '<br/><br/>'
							+ Ext.example.bogusMarkup,
					closable:true  
				 });    
			 }    
			 tab.setActiveTab(n);    
		 }    
		}
	});
	var c8=new Ext.tree.TreeNode({
		id:'c8',
		icon:'../../resources/images/yourtheme/menu/group-checked.gif',
		text:'upload',
		listeners:{    
		'click':function(node, event) {    
			event.stopEvent();    
			var n = tab.getComponent(node.id);    
			if (!n) { //判断是否已经打开该面板    
				 n = tab.add({    
					'id':node.id,    
					'title':node.text,    
					 closable:true,  //通过html载入目标页    
					 html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="upload.html"></iframe>'
				 });    
			 }    
			 tab.setActiveTab(n);    
		 }    
		}
	});
	//c1.appendChild(c2);
//	c1.appendChild(c22);
	root2.appendChild(c1);
	root2.appendChild(c2);
	root2.appendChild(c3);
	root2.appendChild(c4);
	root2.appendChild(c5);
	root2.appendChild(c6);
	root2.appendChild(c7);
	root2.appendChild(c8);
	//root2.appendChild(c3)
	
	var tree2=new Ext.tree.TreePanel({
		renderTo:"tree1",
		root:root2,    //对应 根节点
		animate:true,
		enableDD:false,
		border:false,
		rootVisible:false,
		lines:false,
		containerScroll: true
	});
	
	var index = 0;
    while(index < 7){
        addTab();
    }
    function addTab(){
        tab.add({
            title: 'New Tab ' + (++index),
            iconCls: 'tabs',
            html: 'Tab Body ' + (index) + '<br/><br/>'
                    + Ext.example.bogusMarkup,
            closable:true
        }).show();
    }
	
	new Ext.Button({
        text: 'Add Tab',
		width:198,
        handler: addTab
        //iconCls:'new-tab'
    }).render(document.body, 'tree2');
	
	/*dialog = new Ext.ux.UploadDialog.Dialog({
	  url: 'upload-dialog-request.php',
	  reset_on_hide: false,
	  allow_close_on_upload: true,
	  upload_autostart: true
	});
	dialog.show('tree3');*/
	function getDes(){
		alert(123);
	}
	new Ext.Button({
        text: 'upload',
		width:198,
        handler: getDes
        //iconCls:'new-tab'
    }).render(document.body, 'tree3');
});

</script>
</body>
</html>
把文件的路径后移了两个目录就可以直接显示数的菜单了，之前是图片照成的，我把代码注释一下讲解。
但我觉得代码没有什么要说的，看一下就懂，我把上传文件的页面给加载进来，有不懂得直接发邮件给我，
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Firefox3,IE6,IE7,IE8上传图片预览</title>
<style type="text/css">
#preview_wrapper{
	display:inline-block;
	width:150px;
	height:150px;
	background-color:#CCC;
}
#preview_fake{ /* 该对象用于在IE下显示预览图片 */
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
#preview_size_fake{ /* 该对象只用来在IE下获得图片的原始尺寸，无其它用途 */
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);	
	visibility:hidden;
}
#preview{ /* 该对象用于在FF下显示预览图片 */
	width:150px;
	height:150px;
}
</style>

<script type="text/javascript">
function onUploadImgChange(sender){
	if( !sender.value.match( /.jpg|.gif|.png|.bmp/i ) ){
		alert('图片格式无效！');
		return false;
	}
	
	var objPreview = document.getElementById( 'preview' );
	var objPreviewFake = document.getElementById( 'preview_fake' );
	var objPreviewSizeFake = document.getElementById( 'preview_size_fake' );
	
	if( sender.files &&  sender.files[0] ){
		objPreview.style.display = 'block';
		objPreview.style.width = 'auto';
		objPreview.style.height = 'auto';
		
		// Firefox 因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
		objPreview.src = sender.files[0].getAsDataURL();	
	}else if( objPreviewFake.filters ){ 
		// IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果
		//（相同环境有时能显示，有时不显示），因此只能用滤镜来解决
		
		// IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
		sender.select();
		var imgSrc = document.selection.createRange().text;
		
		objPreviewFake.filters.item(
			'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
		objPreviewSizeFake.filters.item(
			'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
		
		autoSizePreview( objPreviewFake, 
			objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight );
		objPreview.style.display = 'none';
	}
}

function onPreviewLoad(sender){
	autoSizePreview( sender, sender.offsetWidth, sender.offsetHeight );
}

function autoSizePreview( objPre, originalWidth, originalHeight ){
	var zoomParam = clacImgZoomParam( 150, 150, originalWidth, originalHeight );
	objPre.style.width = zoomParam.width + 'px';
	objPre.style.height = zoomParam.height + 'px';
	objPre.style.marginTop = zoomParam.top + 'px';
	objPre.style.marginLeft = zoomParam.left + 'px';
}

function clacImgZoomParam( maxWidth, maxHeight, width, height ){
	var param = { width:width, height:height, top:0, left:0 };
	
	if( width>maxWidth || height>maxHeight ){
		rateWidth = width / maxWidth;
		rateHeight = height / maxHeight;
		
		if( rateWidth > rateHeight ){
			param.width =  maxWidth;
			param.height = height / rateWidth;
		}else{
			param.width = width / rateHeight;
			param.height = maxHeight;
		}
	}
	
	param.left = (maxWidth - param.width) / 2;
	param.top = (maxHeight - param.height) / 2;
	
	return param;
}
</script>

</head>

<body>
	
	<input id="upload_img" type="file" οnchange="onUploadImgChange(this)"/>
	<div id="preview_wrapper">
		<div id="preview_fake">
			<img id="preview" οnlοad="onPreviewLoad(this)"/>
		</div>
	</div>
	<br/>
	<br/>
	<img id="preview_size_fake"/>
</body>
</html> 



 
 
aqqqqa
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Extjs学习笔记之四 工具栏和菜单
01-19
ToolBar的使用很简单，关键是向ToolBar上面添加内容，默认地ToolBar添加的是Button，不过实际上可以向Toolbar添加任意的组件。下面是一个例子： 代码如下: [removed] Ext.onReady(function() { var tb = new Ext....
extjs filefield java_ExtJS的FileUploadField组件上传多个文件
weixin_29011395的博客
02-23 722
一、在页面引入相关的JS文件Ext.ux.form.FileUploadField是ExtJS的文件上传组件，如果要使用它，可以从ExtJS的安装目录下的/examples/ux目录拷贝到项目中，然后在head里面引入js文件，比如放在网站的script目录下，可以这样写：当然，其他和ExtJS相关的JS文件和CSS文件照常引入。二、编写服务器端上传处理文件准备服务器端的上传处理文件，这里的后台处...
kotlin语言学习文档 for Android
绝地黑鹰的博客
05-22 3328
《Kotlin for android developers》中文版翻译 错别字、病句、翻译错误等问题可以提issues。请说明错误原因。在线阅读或下载GitBook 在线阅读 希望大家购买正版，建议阅读英文原版：https://leanpub.com/kotlin-for-android-developers Github: https://github.com/wangjiegulu/kot
linux基础学习思维导图及文档（17万字）
kali_yao的博客
01-02 8857
一.云计算基础二.虚拟机介绍与网络虚拟软件安装网络三.分区与格式化1.计算机容量单位2.分区3.分区命令四.linux安装真机Linux 安装VMware 安装 Centos7五.配置ip与远程工具1.nmtui配置IP2.远程工具3.nmcli配置ip六.linux使用注意事项1.Linux 严格区分大小写2.Linux 一切皆文件3.Linux 不靠扩展名区分文件类型4.Linux 中所有的存储设备都必须在挂载之后才能使用5.Windows 下的程序不能直接在 Linux 中使用七.linux...
ExtJS Web应用程序开发指南(第2版)(针对Ext JS 4.0更新)
华章IT官方博客
07-21 262
《ExtJS Web应用程序开发指南(第2版)》前言 ExtJS 的前身是YUI（Yahoo User Interface）。经过不断发展与改进，ExtJS现在已经成功发布了4.0版本，并且成为构建RIA Web应用的一套最完整、最成熟的JavaScript基础库。利用ExtJS构建的RIA Web应用具有与桌面程序一样的标准用户界面和操作方式，并且能够跨不同的浏...
Android JNI(二)——实战JNI入门之Hello World
hirezy
01-04 2758
上一篇我们讲解了ndk以及jni基础，接下来以实战方式讲解几种常见的jni调用方式，带你走进jni世界。 大纲 今天会详细讲解几种jni的实现方式，实战NDK实现 "hello world"之旅。 环境搭建 既然是Android ndk开发，那么肯定少不了Android开发工具。还好有Android studio，这是一款不错的开发工具，已经集成了不少的开发插件以及组件给我们使用，今天讲解的，它...
《Ext JS实战》——1.3 框架概览
weixin_34007879的博客
05-02 151
本节书摘来自异步社区《Ext JS实战》一书中的第1章，第1.3节，作者：【美】Jesus Garcia著，更多章节内容可以访问云栖社区“异步社区”公众号查看 1.3 框架概览 Ext JS作为一个框架，不仅提供了UI部件，还提供了许多其他特性。这些内容可以分成6大部分，即Ext JS核心、UI组件、Web远程调用、数据服务、拖放以及通用工具。图1-4说...
ExtJS Web应用程序开发指南(针对Ext JS 4.0更新)
cuad2192的博客
07-21 265
《ExtJS Web应用程序开发指南(第2版)》前言 ExtJS 的前身是YUI（Yahoo User Interface）。经过不断发展与改进，ExtJS现在已经成功发布了4.0版本，并且成为构建RIA Web应用...
source insight使用简介
china_sky
02-24 1713
随着linux的逐步普及，现在有不少人对于Linux的安装及设置已经比较熟悉了。与Linux 的蓬勃发展相适应，想深入了解Linux的也越来越多。而要想深入了解Linux，就需要阅读和分析linux内核的源代码。 　　 Linux的内核源代码可以从很多途径得到。一般来讲，在安装的linux系统下，/usr/src/linux目录下的东西就是内核源代码。另外还可以从互连网上下载,解压缩后文
Ext.Net学习笔记之button小结
01-02
1.触发客户端事件 代码如下:<ext ID=”Button1″ runat=”server” Text=”快点我”>　<Listeners>　”Greet()”></Click>　</Listeners></ext> [removed]function Greet() {alert(“Hello World!”);}...
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
12-01
ExtJS中的renderTo和applyTo的差别 对applyTo和renderTo的理解和思考个人认为这两篇文章写的不够通俗。写一个简单的例子来看看最终生成了什么代码， 代码如下: <head> <title>RenderTo and ApplyTo</...
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
01-19
1. 子类父类  2.Vue.extend() //创建vue的子类 　组件的语法器 Vue.extend(options) 　Profile().$mount('#app') // 挂在app上，并替换app 　新建 initExend 　==》 Vue.extend  3....　==> if(!...
JAVAWEB之SSH框架学习实例大全
07-22
资源名称：JAVA WEB之SSH框架学习实例大全资源目录：【】11MySQL【】EXT【】jar包【】JavaEE的PPT【】shoppingCart【】ssh2【】SSH框架下的增删改查【】Training【】Web开发 java ssh框架【】web项目ssh框架分页【】...
基于GEC6818五子棋游戏GEC6818_Gomoku.zip
05-12
五子棋游戏想必大家都非常熟悉，游戏规则十分简单。游戏开始后,玩家在游戏设置中选择人机对战，则系统执黑棋，玩家自己执白棋。双方轮流下一棋，先将横、竖或斜线的5个或5个以上同色棋子连成不间断的一排者为胜。 【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【技术】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes
单片机C语言Proteus仿真实例左右来回的流水灯
05-12
单片机C语言Proteus仿真实例左右来回的流水灯提取方式是百度网盘分享地址
电能表接线错误分析软件.zip
05-12
电能表接线错误分析软件
setuptools-3.8.1.tar.gz
最新发布
05-12
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
ext 6.5.3学习
09-18
EXT 6.5.3是指年级六数学课本中的第三单元第五课，主要内容是关于长方体和立方体的学习。 在学习EXT 6.5.3之前，我们先了解长方体和立方体的概念。长方体是由6个矩形面组成的空间图形，每个面都相互平行，并且相邻...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值