组件、布局与面板

一、组件
//组件-----创建组件
	Ext.create('Ext.Component',{
			html:'你好  组件',
		//	renderTo:Ext.getBody(),  添加到jsp页面的body中
			renderTo:Ext.get('c'),
			width:200,
			height:100,
			padding:50,
			style:{
				color:'blue',
				backgroundColor:'pink'
			}	
		});
	//创建一个进度条的组件
		var cp=Ext.create('Ext.ProgressBar',{
			renderTo:Ext.get('cp'),//添加到页面中的cp都饿组件上
			width:300//宽度
		});
		cp.wait({
			increment:10,//10次把进度条走完
			text:'Updating...',//进度条上的文本    默认居中
			interval:1000,//每隔多长时间调用一次（每隔一定时间增加一次位移量）
			duration:5000,//持续时间，到多少时间后就不再走了
			fn:function(){//持续时间结束后执行的方法
				alert('停止啦');
			},
			animate:true//是否使用动画，默认是使用的，既默认值为true
		});
		
		//创建一个LoadMask------实现遮罩效果
		new Ext.LoadMask(Ext.get('lm'),{
			msg:'正在加载....'
		}).show();
Jsp页面
<div id="c"></div>
<div id="cp"></div>
<div id="lm" style="padding-top:200px"></div>
在head标签中不要忘记引入js文件哟

二、布局
Fit: fit代表面板窗口放大或者缩小，面板中的内容会始终填充整个面板，面板中的内容随面板的大小发生变化,每次只能显示一个组件，制约了面板中内容的复杂性
//创建一个面板
		var panel=Ext.create('Ext.panel.Panel',{
			width:300,
			height:300,
			title:'外部面板标题',
			layout:'fit',//面板布局方式
			items:{
				title:'内部面板标题',//标题
				html:'这里是面板中的内容',
				bodyPadding:20,
				border:false
			},
			renderTo:Ext.getBody()
		});
Border:
//创建一个面板    border布局的时候宽度和高度必须在创建的时候指定，不能变化
		var panel=Ext.create('Ext.panel.Panel',{
			width:600,
			height:400,
			title:'外部面板标题',
			layout:'border',//面板布局方式    
			items:[{
				region:'east',
				html:'东......',
				split:true,//可拆分     通过拖动改变大小，分割线会加粗
				collapsible:true
			},{
				region:'south',
				html:'南......',
				split:true,
				collapsible:true
			},{
				region:'west',
				html:'西......',
				split:true,
				collapsible:true
			},{
				region:'north',
				html:'北......',
				split:true,
				collapsible:true
			},{
				region:'center',
				html:'中......',
				split:true,
				collapsible:true
			}],
			renderTo:Ext.getBody()
		});
Accordion：
Ext.create('Ext.panel.Panel', {
							title : 'Accordion Layout',
							width : 300,
							height : 300,
							layout : 'accordion',
							defaults : {
								// applied to each contained panel
								bodyStyle : 'padding:15px'
							},
							layoutConfig : {
								// layout-specific configs go here
								titleCollapse : false,
								animate : false,
								multi : false,
								activeOnTop : false
								// 默认值false 表示的是展开和折叠后子面板顺序不变,true展开的子面板永远会在顶端
							},
							items : [{
										title : 'Panel 1',
										html : 'Panel content!'
									}, {
										title : 'Panel 2',
										html : 'Panel content!'
									}, {
										title : 'Panel 3',
										html : 'Panel content!'
									}],
							renderTo : Ext.getBody()
						});
Column:
Ext.create('Ext.panel.Panel', {
							title : 'Column Layout - Mixed',
							width : 350,
							height : 250,
							layout : 'column',
							items : [{
										title : 'Column 1',
										columnWidth:.4 //width:120 设置一个列的长度值后  剩余的宽度.7+.3=1
									}, {
										title : 'Column 2',
										columnWidth : .3 //这个代表的是列的宽度的比例 0-1之间
									}, {
										title : 'Column 3',
										columnWidth : .3   //30% //.7.3
									}],
							renderTo : Ext.getBody()
						});
Table:
Ext.create('Ext.panel.Panel', {
							title : 'Table Layout',
							width : 300,
							height : 150,
							layout : {
								type : 'table', //布局的方式
								// The total column count must be specified here
								columns : 3    //必须设置列的值
							},
							defaults : {
								// applied to each contained panel
								bodyStyle : 'padding:20px' //边框的样式
							},
							items : [{
										html : 'Cell A content',
										rowspan : 2  //合并的数行
									}, {
										html : 'Cell B content',
										colspan : 2 //合并的列数
									}, {
										html : 'Cell C content',
										cellCls : 'highlight' //单元格的样式
									}, {
										html : 'Cell D content'
									}],
							renderTo : Ext.getBody()
						});
			});

三、面板
		//面板也是组件       不过是一个容器的组件
		//创建一个面板
		Ext.create('Ext.panel.Panel',{
			id:'myPanel',
			title:'面板标题',//面板的标题
			width:300,//面板的宽度
			height:200,
			pageX:100,
			pageY:20,//其实的位置（面板距离左边和上边的距离）
			html:'<p>这是面板的内容</p>',//面板中的内容
			draggable:true,//面板是否可以拖拽                 拖动停止后，还是回到原来的地方
			collapsible:true,//面板是否可折叠
			frame:true,//使用圆角等风格渲染面板
			renderTo:Ext.getBody(),//添加到body中
			items:[{
				xtype:'button',
				text:'点击我1',
				handler:function(){
					alert("有病啊，点我干嘛");
				}
			},{
				xtype:'button',
				text:'点击我2'
			}]
		});
		如果上面的代码中没有items属性，那么可以通过下面的代码实现按钮触发事件
		//按钮的组件
		Ext.create('Ext.button.Button',{
			text:'点击我',
			renderTo:'myPanel',//根据id将按钮添加到面板中
			handler:function(){
				alert("有病啊，点我干嘛");
			}
		});