Ext Js入门第9篇-容器，面板，窗口_ext.panel.panel tooltip-CSDN博客

本文链接：https://blog.csdn.net/qq_29258777/article/details/72731343

Ext Js所有界面组件继承了Ext.Component，而Ext.Component的子类：Ext.container.Container则是其他组件的容器，用于盛装其他组件

1.使用Ext.Component

该组件是一个空白区域，根据实际情况使用

<script>
		var comp=Ext.create('Ext.Component',
		{
			html:'Ext Js学习</br>',
			width:300,
			height:200,
			padding:20,
			shadow:true,
			resizable:true,
			style:{
				color:'#f66',
				backgroundColor:'#afa'
			},
			renderTo:Ext.getBody()//指定组件追加到<body>中
		});
		comp.center();
	</script>

2.使用Ext.container.Container创建容器

Ext.container.Container创建的是一个空白的容器，根据实际情况使用

<script>
	     Ext.onReady(function()
	     {
	     	 //创建容器对象
		     var con=Ext.create('Ext.container.Container',
		     {
		     	//指定不惧方式
		     	layout:{
		     		type:'vbox',
		     		align:'center'
		     	},
		     	width:350,
		     	height:160,
		     	renderTo:Ext.getBody(),//将容器添加到body中
		     	style:{
		     		border:'1px solid black',
		     		backgroundColor:'#afa'
		     	},
		     	//指定对容易中所有添加项进行默认设置
		     	defaults:{
		     		labelWidth:120,
		     		flex:1
		     	},
		     	//指定该容器包含对的组件
		     	items:[
		     	     //设置第一个组件，xtype是datefield,表明是一个日期选择框
		     	     {
		     	     	xtype:'datefield',
		     	     	name:'startDate',
		     	     	iconCls: 'Add',
		     	     	fieldLabel:'开始日期'
		     	     },
		     	     //设置第二个组件xtype是datefield,表明是一个日期选择框
		     	     {
		     	     	xtype:'datefield',
		     	     	name:'endDate',
		     	     	iconCls: 'Accept',
		     	     	fieldLabel:'结束日期'
		     	     },
		     	     //设置第三个组件xtype是button,表明是一个按钮
		     	     {
		     	     	xtype:'button',
		     	     	text:'确定',
		     	     	width:100,
		     	     	height:20,
		     	     	padding:'0px',
		     	     	margin:'10px',
		     	     	flex:0//控制该组件缩放时所占比例
		     	     }
		     	]
		     });
	     });
		
	</script>

3.使用Ext.panel.Panel创建面板

Ext.panel.Panel继承Ext.container.Container，因此他也是一个容器

<script>
	     Ext.onReady(function()
	     {
	     	//创建Ext.panel.Panel对象
	     	var con=Ext.create('Ext.panel.Panel',
	     	{
	     		//指定布局形式
	     		layout:{
	     			align:'center'
	     		},
	     		title:'查询图书',
	     		height:280,
	     		renderTo:Ext.getBody(),
	     		defaults:{
	     			style:{
	     				padding:'5px',
	     			},
	     			bodyPadding:5
	     		},
	     		//为pannel设置工具按钮
	     		tools:[
	     		     {
	     		     	//指定刷新工具按钮
	     		     	type:'refresh',
	     		     	//工具提示
	     		     	tooltip:'刷新页面',
	     		     	iconCls:'Tablerefresh',
	     		     	//单击该工具按钮的时间处理函数
	     		     	handler:function(event,toolEl,panel){
	     		     		alert("用户刷新数据");
	     		     	}
	     		     },
	     		     {
	     		     	type:'save',
	     		     	tooltip:'保存数据',
	     		     	iconCls:'Tablesave',
	     		     	handler:function(event,toolEl,panel){
	     		     		alert("用户保存数据");
	     		     	}
	     		     }
	     		],
	     		items:[
	     		     {
	     		     	//第一个组件，没有指定xtype,默认pannel,表明圈套一个pannel
	     		     	title:'出版社信息',
	     		     	height:120,
	     		     	items:[
	     		     	     {
	     		     	     	fieldLabel:'输入出版社',
	     		     	     	xtype:'textfield'
	     		     	     }
	     		     	],
	     		     	flex:2
	     		     },
	     		     //第二个组件，默认pannel
	     		     {
	     		     	title:'作者信息',
	     		     	height:120,
	     		     	items:[
	     		     	     {
	     		     	     	fieldLabel:'输入作者',
	     		     	     	xtype:'textfield'
	     		     	     }
	     		     	],
	     		     	flex:2
	     		     }
	     		]
	     	}
	     	);
	     });
	</script>