2025年Panel的使用

科技前沿 • 2025-03-11 21:58 • 阅读 26

大家好，我是讯享网，很高兴认识大家。

1.之前已经学习过了关于ExtJs的一些基本知识，通过导入Extjs所必须的几个包能够进行写出几个基本的小例子；
下面要学习的是Extjs的另一个基本组件---->Pannel面板。
Pannel面板在java的Swing中是非常常用的一个基本组件，同样，Extjs是受到了Java Swing的启迪，在浏览器中同样可以使用Pannel。
2.下面开始Pannel的学习。
首先要在HTML的<body></body>中定义一个div：<div id="myPannel"></div>随后将Pannel定义在这个div中。
首先先写一个简单的Pannel实例：

<script type="text/javascript">
	Ext.onReady(function myPannel{
		new Ext.Panel({
		   	title:"这是一个面板",
		   	collapsible:true,  //是否允许收缩
		   	renderTo:"myPannel", //指定渲染的是id为myPannel的div
		   	width:400,
		   	html:"<h1>Pannel使用</h1>"
		});
	});
</script>

讯享网

这样就会创建一个简单的面板，并且能够实现上拉下拉的功能。
3.下面是几个基本的工具栏的定义：
bbar：显示在底部的工具栏
buttons：显示在底部的按钮集合
tbar：顶部工具栏
tools：头部工具栏
4.tools中提供了很多图标。功能十分强大。
tools:[{id:"save"},{id:"help"},{id:"close"},{id:"toggle"},{id:"minimize"},{id:"pin"},{id:"right"},{id:"up"},{id:"refresh"},
{id:"plus"},{id:"search"},{id:"maximize"},{id:"gear"},{id:"unpin"},{id:"left"},{id:"down"},{id:"minus"}]

讯享网
5.下面的是一个综合实例：

讯享网<script type="text/javascript">
	Ext.onReady(function Pannel(){
		new Ext.Panel({
			title:"这是一个面板",
			collapsible:true,  //是否允许收缩
			renderTo:"basic", //指定渲染的是id为basic的div
			width:400,
			html:"<h1>Pannel使用</h1>",
			tbar:[new Ext.Button({text:"新增"}),new Ext.Button({text:"保存"}),new Ext.Button({text:"修改"})],
			tools:[{id:"save"},{id:"help"},{id:"close"}],
			buttons:[{text:"保存",handler:worning},{text:"取消",handler:worning2}]
		 }); 
		new Ext.dd.DDProxy("basic");//id为basic的div可以进行拖动
	});
	function worning(){
		Ext.MessageBox.alert("提示","你确定保存？");
	}
	function worning2(){
		Ext.MessageBox.alert("提示","你确定要取消？");
	}
</script>

6.Ext.Panel中的主要配置
配置项 animCollapse
参数类型 Boolean
设置面板折叠或展开时是否显示动画效果，如果 Ext.Fx 类可用则默认
为true，否则为fasle。

配置项 applyTo
参数类型 Mixed
一个页面上已经存在的元素或元素id，组件将会追加到该元素的后面，而不是将其作为新组件的容器

2025年Panel的使用

相关推荐