一、组件//组件-----创建组件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 panelbodyStyle : 'padding:15px'},layoutConfig : {// layout-specific configs go heretitleCollapse : 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 herecolumns : 3 //必须设置列的值},defaults : {// applied to each contained panelbodyStyle : '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("有病啊，点我干嘛");}});
