Extjs中面板布局的应用 (转载)

      Panel布局类有10种：容器布局，自适应布局，折叠布局，卡片式布局，锚点布局，绝对位置布局，表单布局，列布局，表格布局，边框布局

      1，Ext.layout.ContainerLayout 容器布局

      提供容器作为布局的基础逻辑，通常会被扩展而不通过new 关键字直接创建，一般作为默认布局存在  

      2，Ext.layout.FitLayout 自适应布局

      使用layout:'fit' 将使面板子元素自动充满容器，如果有多个子面板也只会第一个会被显示

      3，Ext.layout.AccordionLayout 折叠布局  （很常有哦！！！）

       扩展自适应布局，layout:'accordion' 它包含了多个子面板，任何时候都只有一个子面板处于打开状态，每个面板都有展开和收缩的功能

      4 ，Ext.layout.CardLayout 卡片式布局  （也很有用的哦！！）

       扩展自适应布局，layout:'card' 它包含了多个子面板，只有一个面板处于显示状态，它用来制作向导或标签页，使用setActiveItem来激火面板

      5，Ext.layout.AnchorLayout 锚点布局

       根据容器的大小为其所包含的子面板进行定位的布局 layout:'anchor'  分为：百分比，偏移，参考边 三种方式的定位

      6，Ext.layout.AbsoluteLayout 绝对位置布局

       根据面板中配置 x/y 坐标进行定位，layout:'absolute' 坐标值支持使用固定值和百分比两种形式

      7，Ext.layout.FormLayout  表单布局

       用来管理表单字段的显示，内制了表单布局，提供了表单提交，读取等表单功能，layout:'form'

     8, Ext.layout.ColumnLayout 列布局

      多列风格的布局格式，每一列的宽度都可以通过百分比和数值确定宽度，layout:'column'

     9, Ext.layout.TableLayout 表格布局

      可以指定列数，跨行，跨列，可以创建出复杂的表格布局 layout:'table'

    10, Ext.layout.BorderLayout 边框布局

     该布局包含多个面板，是一个面向应用的UI风格的布局，它包含5个部分：east,south,west,north,center,layout:'border' 通过region来配置面板

     viewport的应用：作为浏览器窗口的整个显示部分，其有着panel的功能，但是一定要注意的是一个页面只有一个viewport

py function Read1() { var MyPanel=new Ext.Panel({ title:'自适应布局', width:250, height:200, x:300, y:50, floating:true, renderTo:id1, frame:true, layout:'fit', items:[ { title:"面板一", html:"面板一内容" }, { title:'面板二', html:'面板二内容' } ] }); } function Read2() { var Mypanel=new Ext.Panel({ layout:'accordion', title:'折叠布局', renderTo:id1, width:250, height:300, x:300, y:50, floating:true, frame:true, collapsible:true, titleCollapse:true, layoutConfig:{ activeOnTop:false, fill:true, hideCollapseTool:false, titleCollapse:true, animate:true }, items:[ { title:"面板一", html:"面板一内容" }, { title:'面板二', html:'面板二内容' }, { title:'面板3', html:'面板3内容' }, { title:'面板4', html:'面板4内容' }, { title:'面板5', html:'面板5内容' } ] }); } function Read3() { var Mypanel=new Ext.Panel({ layout:'card', title:'卡片布局', renderTo:id1, width:250, height:300, x:300, y:50, floating:true, frame:true, collapsible:true, titleCollapse:true, activeItem:0, items:[ { title:"面板一", html:"面板一内容", id:'p1' }, { title:'面板二', html:'面板二内容', id:'p2' }, { title:'面板三', html:'面板三内容', id:'p3' } ], buttons:[ { text:'上一页', handler:change }, { text:'下一页', handler:change } ] }); function change(btn) { var index=Number(Mypanel.layout.activeItem.id.substring(1)); if (btn.text=='上一页') { index-=1; if (index<1) { index=1; } } else { index+=1; if (index>3) { index=3; } } Mypanel.layout.setActiveItem('p'+index); } } function Read4() { var Mypanel=new Ext.Panel({ title:'锚点布局', renderTo:id1, frame:true, width:300, height:200, x:300, y:50, floating:true, collapsible:true, titleCollapse:true, layout:'anchor', items:[{ anchor:'50%,50%', draggable:true, title:'子面板' }, { anchor:'-10,-10', title:'子面板2' }] }); } function Read5() { var Mypanel=new Ext.Panel({ title:'绝对位置布局', renderTo:id1, frame:true, width:300, height:200, x:300, y:50, floating:true, collapsible:true, titleCollapse:true, layout:'absolute', items:[{ x:'10%', y:10, width:100, height:50, title:'子面板' }, { x:90, y:70, width:100, height:50, title:'子面板2' }] }); } function Read6() { var MyPanel=new Ext.Panel({ layout:'form', title:'表单布局', renderTo:id1, frame:true, width:300, height:200, x:300, y:50, floating:true, collapsible:true, titleCollapse:true, defaultType:'textfield', labelSeparator:':', defaults:{msgTarget:'side'}, items:[ { fieldLabel:'用户名称', allowBlank:false }, { fieldLabel:'用户密码', allowBlank:false } ] }); } function Rand7() { Ext.QuickTips.init(); var MyPanel=new Ext.Panel({ title:'列布局', renderTo:id1, frame:true, width:300, height:200, x:300, y:50, floating:true, layout:'column', items:[ { title:'面板1', width:100, height:100 }, { title:'面板2', width:100, height:100 } ] }); } function Read8() { var Mypanel=new Ext.Panel({ title:'表格布局', renderTo:id1, frame:true, width:400, height:300, x:350, y:50, floating:true, collapsible:true, titleCollapse:true, draggable:{ insertProxy: false,//拖动时不虚线显示原始位置 onDrag : function(e){ var pel = this.proxy.getEl(); this.x = pel.getLeft(true); this.y = pel.getTop(true);//获取拖动时panel的坐标 var s = this.panel.getEl().shadow; if (s){ s.realign(this.x, this.y, pel.getWidth(), pel.getHeight()); } }, endDrag : function(e){ this.panel.setPosition(this.x, this.y);//移动到最终位置 } }, layout:'table', layoutConfig:{ columns:3 }, items:[ { title:'面板1', html:'面板一内容', rowspan:2, height:80 }, { title:'面板2', html:'面板2内容', colspan:2 }, { title:'面板3' }, { title:'面板4' } ] }); } function Read9() { var Mypanel=new Ext.Viewport({ layout:"border", items:[ { region:"north", height:50, title:"顶部面板" }, { region:"south", height:50, title:"底部面板" }, { region:"center", title:"中央面板" }, { region:"west", width:100, title:"左边面板" }, { region:"east", width:100, title:"右边面板" } ] }); } function Read10() { var b = new Ext.Button({ id:"show-btn", //定义按钮的ID text:"弹出按钮", //定义按钮的标题 renderTo:document.body//将弹出按钮渲染到窗体上 }); var button = Ext.get('show-btn'); var win; button.on('click', function() { //创建TabPanel var tabs = new Ext.TabPanel({ region: 'center', //border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间 margins: '3 3 3 0', activeTab: 0, //当前选项卡是第1个(从0开始) defaults: { autoScroll: true }, items: [ { title: 'Bogus Tab', html: "第一个Tab的内容." }, { title: 'Another Tab', html: "我是另一个Tab" }, { title: 'Closable Tab', html: "这是一个可以关闭的Tab", closable: true //显示关闭按钮 } ] }); //定义一个Panel var nav = new Ext.Panel({ title: 'Navigation', region: 'west', //放在西边，即左侧 split: true, //设置为分割 width: 200, collapsible: true, //允许伸缩 margins: '3 0 3 3', cmargins: '3 3 3 3' }); //如果窗口第一次被打开时才创建 if (!win) { win = new Ext.Window({ title: 'Layout Window', closable: true, //显示关闭按钮 width: 600, height: 350, border : false, plain: true, layout: 'border', closeAction:'hide', items: [nav, tabs]//把上面创建的panel和TabPanel放在window中，并采用border方式布局 }); } win.show(button); }); }; Ext.onReady(Read10);