Ext4详解

Extjs4布局详解(三)—accordion布局2012-02-08来源：mhzg作者：mhzg(共0条评论)accordion布局：accordion布局也称手风琴布局，在accordion布局下，在任何时间里，只有一个面板处于激活状态。其中每个面边都支持展开和折叠。accordion布局：accordion布局也称手风琴布局，在accordion布局下，在任何时间里，只有一个面板处于激活状态。其中每个面边都支持展开和折叠。注意：只有Ext.Panels和所有Ext.panel.Panel子项，才可以使用accordion布局。示例代码：1.Ext.create('Ext.panel.Panel',{2.title:'AccordionLayout',3.width:300,4.height:300,5.x:20,6.y:20,7.layout:'accordion',8.defaults:{9.bodyStyle:'padding:15px'10.},11.layoutConfig:{12.titleCollapse:false,13.animate:true,14.activeOnTop:true15.},16.items:[{17.title:'Panel1',18.html:'Panelcontent!'19.},{20.title:'Panel2',21.html:'Panelcontent!'22.},{23.title:'Panel3',24.html:'Panelcontent!'25.}],26.renderTo:Ext.getBody()27.});Extjs4布局详解(二)—border布局2012-02-05来源：mhzg作者：mhzg(共0条评论)border布局：border布局也称边界布局，他将页面分隔为west,east,south,north,center这五个部分，我们需要在在其items中指定使用region参数为其子元素指定具体位置。border布局：border布局也称边界布局，他将页面分隔为west,east,south,north,center这五个部分，我们需要在在其items中指定使用region参数为其子元素指定具体位置。注意：north和south部分只能设置高度（height），west和east部分只能设置宽度（width）。northsouthwesteast区域变大，center区域就变小了。参数split:true可以调整除了center四个区域的大小。参数collapsible:true将激活折叠功能，title必须设置，因为折叠按钮是出现标题部分的。center区域是必须使用的，而且center区域不允许折叠。Center区域会自动填充其他区域的剩余空间。尤其在Extjs4.0中，当指定布局为border时，没有指定center区域时，会出现报错信息。示例代码：1.Ext.create('Ext.panel.Panel',{2.width:500,3.height:400,4.title:'MHZG.NET-BorderLayout',5.layout:'border',6.x:20,7.y:20,8.items:[{9.title:'SouthRegionisresizable',10.region:'south',11.xtype:'panel',12.height:80,13.split:true,14.margins:'0555'15.},{16.title:'WestRegioniscollapsible',17.region:'west',18.xtype:'panel',19.margins:'5005',20.width:200,21.collapsible:true,22.id:'west-region-container',23.layout:'fit'24.},{25.title:'CenterRegion',26.region:'center',27.xtype:'panel',28.layout:'fit',29.margins:'5500',30.html:'在Extjs4中，center区域必须指定，否则会报错。'31.}],32.renderTo:Ext.getBody()33.});Extjs4布局详解(一)—Fit布局2012-02-01来源：mhzg作者：mhzg(共0条评论)在Fit布局中，子元素将自动填满整个父容器。注意：在fit布局下，对其子元素设置宽度是无效的。如果在fit布局中放置了多个组件，则只会显示第一个子元素在Fit布局中，子元素将自动填满整个父容器。注意：在fit布局下，对其子元素设置宽度是无效的。如果在fit布局中放置了多个组件，则只会显示第一个子元素。典型的案例就是当客户要求一个window或panel中放置一个GRID组件，grid组件的大小会随着父容器的大小改变而改变。示例代码：1.varmyData=[2.['3mCo',71.72,0.02,0.03,'9/112:00am'],3.['AlcoaInc',29.01,0.42,1.47,'9/112:00am'],4.['AltriaGroupInc',83.81,0.28,0.34,'9/112:00am'],5.['AmericanExpressCompany',52.55,0.01,0.02,'9/112:00am'],6.['AmericanInternationalGroup,Inc.',64.13,0.31,0.49,'9/112:00am'],7.['AT&TInc.',31.61,-0.48,-1.54,'9/112:00am'],8.['BoeingCo.',75.43,0.53,0.71,'9/112:00am'],9.['CaterpillarInc.',67.27,0.92,1.39,'9/112:00am'],10.['Citigroup,Inc.',49.37,0.02,0.04,'9/112:00am'],11.['E.I.duPontdeNemoursandCompany',40.48,0.51,1.28,'9/112:00am'],12.['ExxonMobilCorp',68.1,-0.43,-0.64,'9/112:00am'],13.['GeneralElectricCompany',34.14,-0.08,-0.23,'9/112:00am'],14.['GeneralMotorsCorporation',30.27,1.09,3.74,'9/112:00am'],15.['Hewlett-PackardCo.',36.53,-0.03,-0.08,'9/112:00am'],16.['HoneywellIntlInc',38.77,0.05,0.13,'9/112:00am'],17.['IntelCorporation',19.88,0.31,1.58,'9/112:00am'],18.['InternationalBusinessMachines',81.41,0.44,0.54,'9/112:00am'],19.['Johnson&Johnson',64.72,0.06,0.09,'9/112:00am'],20.['JPMorgan&Chase&Co',45.73,0.07,0.15,'9/112:00am'],21.['McDonald\'sCorporation',36.76,0.86,2.40,'9/112:00am'],22.['Merck&Co.,Inc.',40.96,0.41,1.01,'9/112:00am'],23.['MicrosoftCorporation',25.84,0.14,0.54,'9/112:00am'],24.['PfizerInc',27.96,0.4,1.45,'9/112:00am'],25.['TheCoca-ColaCompany',45.07,0.26,0.58,'9/112:00am'],26.['TheHomeDepot,Inc.',34.64,0.35,1.02,'9/112:00am'],27.['TheProcter&GambleCompany',61.91,0.01,0.02,'9/112:00am'],28.['UnitedTechnologiesCorporation',63.26,0.55,0.88,'9/112:00am'],29.['VerizonCommunications',35.57,0.39,1.11,'9/112:00am'],30.['Wal-MartStores,Inc.',45.45,0.73,1.63,'9/112:00am']31.];32.varstore=Ext.create('Ext.data.ArrayStore',{33.fields:[34.{name:'company'},35.{name:'price',type:'float'},36.{name:'change',type:'float'},37.{name:'pctChange',type:'float'},38.{name:'lastChange',type:'date',dateFormat:'n/jh:ia'}39.],40.data:myData41.});42.43.Ext.define('DataWindow',{44.extend:'Ext.window.Window',45.title:'MHZG.NET---Fit布局示例代码',46.width:550,47.layout:'fit',48.items:{49.xtype:'gridpanel',50.store:store,51.columns:[52.{53.text:'Company',54.flex:1,55.sortable:false,56.dataIndex:'company'57.},58.{59.text:'Price',60.width:75,61.sortable:true,62.renderer:'usMoney',63.dataIndex:'price'64.},65.{66.text:'Change',67.width:75,68.sortable:true,69.dataIndex:'change'70.},71.{72.text:'%Change',73.width:75,74.sortable:true,75.76.dataIndex:'pctChange'77.},78.{79.text:'LastUpdated',80.width:85,81.sortable:true,82.renderer:Ext.util.Format.dateRenderer('m/d/Y'),83.dataIndex:'lastChange'84.}]85.}86.});87.88.Ext.onReady(function(){89.varwin=Ext.create(DataWindow,{90.x:10,91.y:20,92.});93.});94.Extjs4MVC页面空白分析95.2011-12-17来源：mhzg作者：mhzg(共6条评论)96.写了一份开发笔记，很多问题都集中到了一篇文章上，那就是：Extjs4开发笔记(二)——框架的搭建。很多读者反映，照着例子做，页面一片空白，神马都不显示97.写了一份开发笔记，很多问题都集中到了一篇文章上，那就是：Extjs4开发笔记(二)——框架的搭建。很多读者反映，照着例子做，页面一片空白，神马都不显示。也有一些网友加我QQ，问我这到底是什么情况，跟一些网友进行讨论后，发现错误基本都发生以下几个方面。98.1、目录结构错误：这个就不表明了，提供一份截图。只要按照这个目录结构去