第二单元 ExtJS - 布局.pptVIP

ExtJS布局 Border布局 效果 Border布局 JS源码 // 顶部面板声明 var top[微软用户1]? = new Ext.BoxComponent[微软用户2]?({ region:north[微软用户3]?, el:HEADER[微软用户4]?, height:80 }); ?[微软用户1]将页面的个部分什么到一个变量中 ?[微软用户2]这种是无title的panel ?[微软用户3]布局容器中的上方 ?[微软用户4]其中显示的内容来自于一个div，这里配置的就是这个div的id Border布局 JS源码 // 左边菜单声明 var menu = { region:west[微软用户1]?, layout[微软用户2]?:fit,//声明布局类型 el:MENU, title[微软用户3]?:各大栏目, split: true[微软用户4]?, collapsible: true[微软用户5]?, width: 200 }; ?[微软用户1]布局容器的左方 ?[微软用户2]让内容自动填充满整个区域 ?[微软用户3]这种是有title的panel ?[微软用户4]可拖动的分隔条 ?[微软用户5]窗体右上角缩进个伸展的按钮 Border布局 JS源码 // 中间主内容声明 var content = { region:center[微软用户1]?, el:CONTENT, title:主要内容, width: 200 }; ?[微软用户1]?[微软用户1]布局容器的中间 Border布局 JS源码 // 右边附件内容声明 var msg = { region:east[微软用户1]?, el:MSG, title:主要内容, width: 40 }; ?[微软用户1]布局容器的右方?[微软用户1]?[微软用户1]布局容器的中间 Border布局 JS源码 // 下边底部声明 var bottom = new Ext.BoxComponent({ region:south[微软用户1]?, el:BOTTOM, height:40 }); ?[微软用户1]?[微软用户1]布局容器的下方 Border布局 JS源码 // 布局整合 Ext.onReady(function(){ //每一个ext的应用都必须放在Ext.onReady()里，表示当ext完全加载后执行定义的方法 // 执行过程 new Ext.Viewport({ //实例化布局对象 layout:border, //声明为border布局 items:[微软用户1]?[ top, menu, content, bottom ] }); }); ?[微软用户1]大面板包含小面板，都用items的方式把小面板引入 Border布局 页面： 引入包含前边JavaScript的JS文件 body div id=HEADERAnyFo - Parents/div div id=MENU/div div id=CONTENT/div div id=MSG/div div id=BOTTOMcopy;AnyFo/div /body Accordion布局 效果 Accordion布局 JS: var menuPanel = new Ext.Panel({//创建一个面板 height: 430, split:true, iconCls:icon[微软用户1]?, maxSize:400, collapsible:true, layout:accordion,//声明布局类型 layoutConfig: { animate[微软用户2]?: true //动画效果启用 }, items:[{ iconCls[微软用户3]?:USER, title:菜单1, html:菜单1的内容//这里可用div，方便其他元素插入 }, { title:菜单2, html:菜单2的内容 }] }); ?[微软用户1]这是 ?[微软用户2]各项之间上下滑动的动画效果 ?[微软用户3]每一项抬头的图标名称 Accordion布局 页面： body div id=HEADERAnyFo - Parents/div div id=MENU/div div id=CONTENT/div div id=MSG/div div id=BOT