布局修改器 东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按钮
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按钮