ExtJs 布局学习笔记

1、BorderLayout布局

例：

var viewPort=new Ext.Viewport({
  layout:'border',
  items:[{
   region:'north',
   html:'<h1>dwadwadw</h1>'
  },{
   region:'west',
   html:'<h1>dwadwadw</h1>'
  },{
   region:'center',
   html:'<h1>dwadwadw</h1>'
  }]
  
 });  

以上用Viewport类对整体页面进行布局，

layout:是布局采用的方式：border：表示使用了BorderLayout的边界布局方式。

将网页分为东、南、西、北、中----------使用region来为组件布局。

north:上---west:左---center:中间---south:下---east:右

注：center:必须有，不能省略。中间的center大小是通过其他部分计算的。

(1)、north、south只能设置高度	west、aset只能设置宽度

(2)、split:允许用户自行拖放改变某一个区域的大小。

	split:true 允许改变大小

	minSize:最小大小

	maxSize:最大大小

  var viewport = new Ext.Viewport({
        layout: 'border',
        items: [{region:'north',html:'a',split:true},
    {region:'west',html:'v',split:true},
    {region:'center',html:'a'}]
    });

(3)、设置区域的折叠效果

	var viewport = new Ext.Viewport({
        layout: 'border',
        items: [{region:'north',html:'a',split:true},
    {region:'west',html:'v',split:true,title:'wesi',collapsible:true},
    {region:'center',html:'a'}]
    });

主要：collapsible:true 折叠按钮式出现在标题部分的，所以前边的title标题必须存在

----------------------------------------------------------------------

2、FitLayout布局

需求：页面中的grid 、要求随页面大小的变化而变化

		Ext.QuickTips.init();		
		var data=[
			['client_setup1','安装包','3.0.0.1','2014.07.31','是'],
			['client_setup2','安装包','3.0.0.1','2013.06.31',''],
			['client_setup3','插件包','3.0.0.1','2012.05.31','是'],
			['client_setup4','插件包','3.0.0.1','2011.04.31','']		  
		];
		
			var sm=new Ext.grid.CheckboxSelectionModel({
			checked:true									   
		});
		
		var cm=new Ext.grid.ColumnModel([
			sm,
			{header:'名称',dataIndex:'name'},
			{header:'类型',dataIndex:'type'},
			{header:'版本',dataIndex:'version'},
			{header:'上传时间',dataIndex:'time'},
			{header:'当前升级包',dataIndex:'nowPackage'}								 
		]);
												
		var store = new Ext.data.Store({
			proxy:new Ext.data.MemoryProxy(data),
			reader:new Ext.data.ArrayReader({},[
				{name:'name'},
				{name:'type'},
				{name:'version'},
				{name:'time'},
				{name:'nowPackage'}									
			])
		});
		store.load();
		
		var tbar=new Ext.Toolbar([
			
			{text:"添加",id:"add",iconCls:'add',handler:function(){add();}},
			{text:"查看",id:"view",iconCls:'view',handler:function(){add();}},
			{text:"删除",id:"delete",iconCls:'delete',handler:function(){add();}}						  
		]);
		var grid=new Ext.grid.GridPanel({
			viewConfig: {forceFit: true},
			store:store,
			cm:cm,
			sm:sm,
			tbar:tbar
		});					 
					 
	 var viewport = new Ext.Viewport({
       		 layout: 'fit',
       		 items: [grid]
    });

----------------------------------------------------------

viewConfig : {
<p> forceFit : false,  //false表示不会自动按比例调整适应整个grid，
<span style="color:#ff00;">true</span>表示依据比例自动智能调整每列以适应grid的宽度，
<span style="color:#ff00;">阻止水平滚动条的出现</span>。dataCM(ColumnModel)中任意width的设置可覆盖此配置项。</p><p>          
autoFill : false   //false表示按照实际设置宽度显示每列，
<span style="color:#ff00;">true</span>表示当grid创建后自动展开各列，自适应整个grid.且，还会对超出部分进行缩减，让每一列的尺寸适应grid的宽度大小，
<span style="color:#ff00;">阻止水平滚动条的出现</span>。</p>       
}

----------------------------------------------------------

3、制作伸缩菜单的布局----Accordion

             
     var viewport = new Ext.Viewport({
        layout: 'border',
        items: [{region:'north',html:'a',split:true},
                {
                    region:'west',
                    width:200,
                    layout:'accordion',
                    layoutConfig:{
                        titleCollapse:true,
                        animate:true,
                        activeOnTop:false
                        },
                    items:[{
                                title:'第一栏',
                                html:'第一栏'
                           },
                           {
                               title:'第二栏',
                               html:'第二栏'
                               },
                           {
                               title:'第三栏',
                               html:'第三栏'
                               }]
                },{
                 region:'center',<pre name="code" class="javascript">                 html:'grid'}]
    }); 

(1)、accordion没有提供默认的标题，不设置标题是不会出错的。

(2)、layoutConfig 与布局有关的配置参数都写在其中,这也是在Ext.Conainer中定义好的。在随后的布局中会自动赋值给对应的layout实例。

        * titleCollapse:默认为true,单击标题就可以折叠子面板.若为false,就只能通过单击右键的图标折叠面板。

        *animate：展开和折叠时是否使用动画效果

        *activeOnTop：默认为false执行展开和折叠操作后，子面板的顺序不会改变。

                                   true：会随着展开和折叠的顺序而改变，展开的面板总会在最上面。

4、操作向导的布局--------CardLayout

5、控制大小和位置的布局--------AnchorLayout 和AbsoluteLayout

(3)、

()()