ext的学习笔记3-layout(一)[转]

布局修改器         东east         西:west         南：south         北：north
1 简单布局
<div id ="header"></div>
<div id ="footer"></div>
<div id ="nav"></div>
<div id ="content"></div>

                        var layout = new Ext.BorderLayout(document.body, {         //参数为应用面板的根元素         边框布局
                             north: {                                                 //使用对象方式设定布局         北
                                 split:false,                                         //分割线
                                 initialSize: 35                                         //初始化大小
                             },
                             south: {                                                                         南
                                 split:false,
                                 initialSize: 20
                             },
                             west: {                                                                         西
                                 split:false,
                                 initialSize: 200,
                                 collapsible: false
                             },
                             center: {
                                 autoScroll: true                                 自动滚动                         中间
                             }
                         });
                         layout.beginUpdate();
                         layout.add('north', new Ext.ContentPanel('header', {fitToFrame:true}));         //为布局添加内部元素         内容面板          参数为适合结构
                         layout.add('south', new Ext.ContentPanel('footer', {fitToFrame:true}));
                         layout.add('west', new Ext.ContentPanel('nav', {fitToFrame:true}));
                         layout.add('center', new Ext.ContentPanel('content'));
                         layout.endUpdate();


2 复杂布局

                        var layout = new Ext.BorderLayout(document.body, {
                             west: {
                                 split:true,
                                 initialSize: 240,
                                 titlebar: true,
                                 collapsible: true,
                                 minSize: 100,
                                 maxSize: 400
                             },
                             center: {
                                 autoScroll: true
                             },
                             east: {
                                 split:true,
                                 initialSize: 240,
                                 titlebar: true,
                                 collapsible: true,
                                 minSize: 100,
                                 maxSize: 400
                             }
                         });
                                        
                         layout.beginUpdate();
                        
                         layout.add('west', new Ext.ContentPanel('nav1', {title: '翻译项目', fitToFrame:true, closable:false}));
                         layout.add('west', new Ext.ContentPanel('nav2', {title: '审校项目', fitToFrame:true, closable:false}));
                         layout.add('west', new Ext.ContentPanel('nav3', {title: '所有项目', fitToFrame:true, closable:true}));
                       
                                     var innerLayout = new Ext.BorderLayout('content', {
                             south: {
                                 split:true,
                                 initialSize: 200,
                                 minSize: 100,
                                 maxSize: 400,
                                 autoScroll:true,
                                 collapsible:true,
                                 titlebar: true
                             },
                             center: {
                                 autoScroll:true
                             },
                                                 north: {
                                 split:true,
                                 initialSize: 200,
                                 minSize: 100,
                                 maxSize: 400,
                                 autoScroll:true,
                                 collapsible:true,
                                 titlebar: true
                                                 }
                         });
                        
                                         innerLayout.add('south', new Ext.ContentPanel('inner1', "更多信息"));
                                         innerLayout.add('south', new Ext.ContentPanel('inner3', "更多信息"));
                         innerLayout.add('center', new Ext.ContentPanel('inner2', "文档列表"));
                         innerLayout.add('north', new Ext.ContentPanel('inner2', "文档列表"));
                                        
                                         layout.add('east', new Ext.ContentPanel('nav4',{title: 'kao',fitToFrame:true, colsable:false}))
                         layout.add('center', new Ext.NestedLayoutPanel(innerLayout));
                         layout.endUpdate();


布局的使用方法是 先创建Ext.BorderLayout 然后设定边框布局的样式
                             west: {
                                 split:true,
                                 initialSize: 240,
                                 titlebar: true,
                                 collapsible: true,
                                 minSize: 100,
                                 maxSize: 400
                             },
                             center: {
                                 autoScroll: true
                             },
                             east: {
                                 split:true,
                                 initialSize: 240,
                                 titlebar: true,
                                 collapsible: true,
                                 minSize: 100,
                                 maxSize: 400
                             }
然后layout.beginUpdate(); 然后添加布局内容
                         layout.add('west', new Ext.ContentPanel('nav1', {title: '翻译项目', fitToFrame:true, closable:false}));
最后layout.endUpdate();
                

关键点在于对页面上存在的一些元素的引用

对象传递参数的方法是 {属性:'值',属性:'值'}

布局时候使用在边上的参数可以是
                                 split:true,                         //分割线，可以允许拖动
                                 initialSize: 202,
                                 minSize: 175,
                                 maxSize: 400,                        
                                 titlebar: true,                         //工具条，包括关闭按钮 和标签页的头信息显示
                                 collapsible: false,                 //可以缩进
                                 animate: false                         //缩进时使用动画

                 在中间的参数
                                 titlebar: true,                         //顶部的工具栏
                                 autoScroll:true,                 //
                                 closeOnTab: true                 //Tab上可以使用close按钮