EXTJs 布局

               

<1>FitLayout 自适应布局

FitLayout 是布局的基础类，对应面板布局配置项（layout）的名称为 fit，使用 fit 布局将使面板子元素自动充满容器，如果在当前容器中存在多个子面板则只有第一个会被显示。

Ext.onReady(function(){    //数据存储    var store = new Ext.data.SimpleStore(     {      fields: ['id', 'name', 'desc'],      data: [        ['1', '埃尔克森', '广州恒大'],        ['2', '埃杜', '辽宁宏运'],        ['3', '布鲁诺', '青岛中能'],        ['4', '武磊', '上海东亚'],        ['5', '高迪', '杭州绿城'],        ['6', '艾德华', '上海申花'],        ['7', '王永珀', '山东鲁能'],      ]     }    );    //表格    var grid = new Ext.grid.GridPanel(     {      title: '2013中超射手榜',      viewConfig: {forceFit: true},      store: store,      columns: [       {header:'排名', dataIndex: 'id'},       {header:'姓名', dataIndex:'name'},       {header:'球队', dataIndex:'desc'}      ],      //工具条      tbar: new Ext.Toolbar(['添加','修改','删除']),      bbar: new Ext.PagingToolbar(       {        pageSize: 15,        store: store       }      )     }    );    //布局    /*     Fitlayout:     <1>layout: 'fit',组件的items只能放一个组件。即使放几个组件，也只有第一个组件会起作用。     <2>items中的表格里千万不要使用aotuHeight:true参数，这个参数会使Fitlayout失效。    */    var viewport = new Ext.Viewport(     {      layout: 'fit',      items: [grid]     }    );   }  );

<2>BorderLayout边框布局

因为LitLayout布局每次只能使用一个组件，更复杂的布局它根本无法胜任。

现实中使用最多的就是边框布局，他将整个区域分成东西南北中五部分。除了中间区域其他区域都是可以省略的。

Ext.onReady(function()    {     var viewport = new Ext.Viewport(      {       layout: 'border',       items: [        //north和south两个区域只能指定高度值，宽度值由BorderLayout自动计算。        //east和west两个区域只能指定宽度值，高度值由BorderLayout自动计算。        {region:'north',html:'north',height:120},        {region:'south',html:'south',height:30},        {region:'east',html:'east',width:40},        {region:'west',html:'west',width:100},        {region:'center',html:'center'}       ]      }      );    }   );

使用split并限制他的范围

使用了就可以允许用户自行拖放以改变某一区域的大小。

//north和south两个区域只能上下拖放east和west两个区域只能左右拖放        //minSize:菜单区域的最小范围maxSize:菜单区域的最大范围        {region:'west',html:'west',width:100,split:true,minSize:80,maxSize:120},

子区域的折叠和展开

Ext.onReady(function()    {     var viewport = new Ext.Viewport(      {       layout: 'border',       items: [        //north和south两个区域只能指定高度值，宽度值由BorderLayout自动计算。        //east和west两个区域只能指定宽度值，高度值由BorderLayout自动计算。        {region:'north',html:'north',height:120},        {region:'south',html:'south',height:30},        {region:'east',html:'east',width:40},        //collapsible:true激活了west区域的折叠功能。title是必须的，如果没有设置标题，折叠按钮就无法显示。        {region:'west',html:'west',width:100,title:'菜单栏',width:150,collapsible:true},        {region:'center',html:'center'}       ]      }      );    }   );

<3>制作伸缩菜单的布局 Accordion

/*   设置layout: 'accordion',在使用items添加三个元素，每个子元素都要加上title参数。   */   Ext.onReady(function()    {     var viewport = new Ext.Viewport(      {       layout:'border',       items:[        {         region: 'west',         width: 200,         layout: 'accordion',         //与布局有关的参数         layoutConfig: {           titleCollapse: true,//点击标题时就可以折叠面板           animate: true,//展开和折叠都是用动画           activeOnTop: false//默认是false执行展开和折叠操作后子面板的顺序不会变。如果是true展开的子面板总是放在上面。         },         items: [          {           title: '中超',           html: '山东鲁能  19'          },          {           title: '中甲',           html: '河南建业 22'          },          {           title: '英超',           html: ' 曼联 85'          }         ]        },        {         region: 'center',         split: true,         border: true        }       ]      }     );    }   );

<4>AnchorLayout   控制位置和大小的布局

/*   AnchorLayout提供了一种比较灵活的布局方式，既可以为items中的每个组件指定与总体布局大小的差值，也可以   设置一个比例使子组件可以根据整体自己计算本身的大小。   <1>使用百分比进行配置   anchor:'50% 80%' 宽度占整体宽度的50% 高度占整体高度的80%   anchor:'50%'  宽度占整体宽度的50% 高度自动设置为auto   <2>直接设置与右侧和底部的边距   anchor:'-50 -100' 距右侧50像素 距底部100像素   <3>使用前提是为作为整体布局的父组件和布局内的子组件都设置好width,height和auchorSize属性   Anchor会记录布局整体与子组件在大小的差值   anchor：'r b' 也可写成anchor:'right buttom'   */   Ext.onReady(function()    {     var viewport = new Ext.Viewport(      {       layout: 'anchor',       items: [        {         title:'panel 1',         html:'panel 1',         anchor:'-50 -100'        },       ]      }      );    }   );

Ext.onReady(function()    {     var viewport = new Ext.Viewport(      {       layout: 'anchor',       anchorSize:{width:400,height:300},       items: [        {         title:'panel 1',         html:'panel 1',         width:200,         height:100,         anchor:'r b'        },        {         title:'panel 2',         html:'panel 2',         width:100,         height:200,         anchor:'r b'        },       ]      }      );    }   );

<5>表单布局 formLayout

Ext.onReady(function()    {     var viewport = new Ext.Viewport(      {       layout: 'fit',       items: [        {         xtype:'form',         title:"name",         labelAlign:"right",         labelWidth:50,         frame:true,         defaultType:"textfield",         items:[          {           fieldLabel:"名称",           name:"name",           anchor:'90%',          },          {           fieldLabel:"生日",           name:"birthday",           xtype:'datefield',           anchor:'90%',          },          {           fieldLabel:"备注",           name:"desc",           xtype:'textarea',           anchor:'90% -100',          },         ]        },       ]      }      );    }   );

<6>TabPanel

Ext.onReady(function()    {     var simple = new Ext.FormPanel(      {       labelWidth: 70,       frame: true,       title: 'Simple Form',       bodyStyle: 'padding:5px 5px 0',       width: 800,       defaults:        {        width: 300       },       defaultType: 'textfield',       items: [        {         xtype : "tabpanel",         //初始显示第几个Tab页           activeTab : 0,         plain : true,         height : 195,         defaultType : "panel",         bodyStyle : "padding:5px;",         //当Tab标签过多时,出现滚动条         enableTabScroll: true,            items : [          {           title : "联系方式",           layout : "form",           defaultType : "textfield",           defaults : {            widht : 400,            anchor : "96%,96%"           },           items : [            {             fieldLabel : "单位负责人",             name : "principal",             id : "principal"            },             {             fieldLabel : "传真",             name : "customer.fax",             xtype : "numberfield",             id : "fax"            },             {             fieldLabel : "网址",             name : "customer.site",             id : "site"            },              ]          },           {           title : "公司信息",           layout : "form",           defaults : {           widht : 400,            anchor : "96%,96%"           },           defaultType : "textfield",           items : [            {             fieldLabel : "公司规模",             hiddenName : "customer.companyScale",             id : "companyScale",             xtype : "combo",             mode : "local",             editable : false,             triggerAction : "all",             store : [              ["1", "1-20人"],              ["2", "20-50人"],              ["3", "50-100人"],              ["4", "100-200人"],              ["5", "200-500人"],              ["6", "500-1000人"],              ["7", "1000人以上"]             ]            },              {             fieldLabel : "开户银行",             name : "customer.openBank",              id : "openBank"            },             {             fieldLabel : "银行账号",             xtype : "numberfield",             name : "customer.accountsNo",             id : "accountsNo"            },             {             fieldLabel : "税号",             name : "customer.taxNo",             id : "taxNo"            }           ]          },           {           title : "其它信息",           layout : "form",           defaultType : "textarea",           defaults : {            widht : 400,            anchor : "96%,96%"           },           items : [            {             fieldLabel : "公司描述",             name : "customer.otherDesc",             id : "otherDesc"            },             {             fieldLabel : "备注",             name : "customer.notes",             id : "notes"            }           ]          }         ]        }       ]      }     );     simple.render('spinner');    }   );

           

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.youkuaiyun.com/jiangjunshow