/*//Viewport function() { var vport=new Ext.Viewport( { enableTabScroll:false, layout:"fit",//border items:[ {title:"面板",html:"esfsdf", tbar:[{text:"按钮1"},{text:"按钮2"}], bbar:[{text:"按钮1"},{text:"按钮2"}] } ] } ); }*/ /*//Viewport--窗口布局 function() { var vport=new Ext.Viewport( { enableTabScroll:true, layout:"border", items:[ { title:"面板", region:"north",//位置 collapsible:false,//是否允许隐藏 width:300, html:"<h1>XXXXXXXX管理系统</h1>" }, { title:"面板", region:"south", collapsible:true, width:300, html:"<h1>XXXXXXXX管理系统</h1>" }, { title:"面板", region:"east", collapsible:true, width:300, html:"<h1>XXXXXXXX管理系统</h1>" }, { title:"菜单", region:'west', width:200, collapsible:true, html:'菜单栏' }, { xtype:'tabpanel', region:'center', items:[ {title:'面板1'}, {title:'面板2'} ] } ] } ); }*/ /*//布局--感性认识 function() { var panel=new Ext.Panel( { renderTo:'paneldiv', width:400, height:200, layout:'column',//column:设定比例,fit:单个子元素自动充满,border:,form:子元素原有大小自动排列,card,table items:[ {columnWidth:0.5,title:'面板1',height:100,collapsible:true,html:'aaa'}, {columnWidth:0.5,title:'面板2',height:100,collapsible:true,html:'bbb'}, {columnWidth:0.5,title:'面板2',height:100,collapsible:true,html:'ccc'} ] } ); }*/ /*//布局-border:将容器分为五个区域:east,south,west,north,center function() { var vport=new Ext.Viewport( { enableTabScroll:true, layout:"border", items:[ { title:"顶部面板", region:"north",//位置 collapsible:false,//是否允许隐藏 height:50, html:"" }, { title:"底部面板", region:"south", collapsible:true, height:50, html:"" }, { title:"右部面板", region:"east", collapsible:true, width:100, html:"" }, { title:"左部面板", region:'west', width:100, collapsible:true, html:'菜单栏' }, { xtype:'tabpanel', region:'center', items:[ {title:'面板1'}, {title:'面板2'} ] } ] }); }*/ /*//布局-column:把整个容器看成一列,然后向容器放入子元素时,可通过在子元素中指定columnWidth或width来设定子元素所占的列宽, //columnWidth:百分比,width:实际尺寸 //可混合用,混合用时:比例表示占剩余部分的百分比 function() { var panel=new Ext.Panel( { renderTo:'paneldiv', title:'容器组件', layout:'column', width:500, height:100, items:[ {title:'列1',width:100}, {title:'列1',width:100}, {title:'列1',width:100}, {title:'列1',width:100}, {title:'列1',columnWidth:1} ] } ); }*/ /*//布局-fit:一个子元素将充满整个容器(如果多个子元素则只有一个元素充满整个容器) function() { var panel=new Ext.Panel( { renderTo:'paneldiv', title:'容器组件', layout:'fit', width:500, height:100, items:[ {title:'子元素1'}, {title:'子元素2'}, {title:'子元素3'}, {title:'子元素4'}, {title:'子元素5'} ] } ); }*/ /*//布局-form:是一种专门用于管理表单中输入字段的布局 function() { var panel=new Ext.Panel(//Ext.formPanel就是Panel中用了form布局 { renderTo:'paneldiv', title:'容器组件', layout:'form', width:300, height:200, defaultType:'textfield',//设置表单字段的默认类型 hideLabels:false,//是否隐藏表单内的标签 labelAlign:"right",//标签对齐方式 items:[ {fieldLabel:"请输入姓名",name:'name'}, {fieldLabel:"请输入地址",name:'address'}, {fieldLabel:"请输入电话",name:'tel'}, {fieldLabel:"请输入电话",name:'time',xtype:'datefield'} ] } ); }*/ /*//布局-accordion-可折叠的布局,注意其中用到了layoutConfig. function() { var panel=new Ext.Panel(//Ext.formPanel就是Panel中用了form布局 { renderTo:'paneldiv', title:'容器组件', layout:'accordion', width:500, height:200, layoutConfig:{animate:false}, items:[ {title:'元素1',html:''}, {title:'元素2',html:''}, {title:'元素3',html:''}, {title:'元素4',html:''} ] } ); }*/ //布局-table:按照普通表格的方法布局子元素,用layoutConfig:{columns:3},//将父容器分成3列 //用rowspan或colspan指定子元素所横跨的单元格数 function() { var panel=new Ext.Panel( { renderTo:'paneldiv', title:'容器组件', layout:'table', width:500, height:200, layoutConfig:{columns:3},//将父容器分成3列 items:[ {title:'元素1',html:'ssssssssss',rowspan:2,height:100}, {title:'元素2',html:'dfffsddsdfsdf',colspan:2}, {title:'元素3',html:'sdfsdfsdf'}, {title:'元素4',html:''} ] } ); }