extjs 布局

最新推荐文章于 2023-01-30 16:56:49 发布

转载最新推荐文章于 2023-01-30 16:56:49 发布 · 39 阅读

·

0

·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qiiuji0135/p/3357144.html

文章标签：

本文详细介绍了ExtJS中九种不同的布局类型，包括absolute、accordion、anchor、border、card、column、fit、form和table布局，并提供了每种布局的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

extjs的容器组件都可以设置它的显示风格，它的有效值有 absolute, accordion, anchor, border, card, column, fit, form and table. 一共9种。简单总结一下，帮助记忆。
[list]

- absolute 顾名思义，在容器内部，根据指定的坐标定位显示
- accordion 这个是最容易记的，手风琴效果
  Java代码
  1. Ext.OnReady(function(){
  2. var panel=new Ext.Panel(//Ext.formPanel就是Panel中用了form布局
  3. {
  4. renderTo:'paneldiv',
  5. title:'容器组件',
  6. layout:'accordion',
  7. width:500,
  8. height:200,
  9. layoutConfig:{animate:false},
  10. items:[
  11. {title:'元素1',html:''},
  12. {title:'元素2',html:''},
  13. {title:'元素3',html:''},
  14. {title:'元素4',html:''}
  15. ]
  16. }
  17. );
  18. });
- anchor 这个效果具体还不知道有什么用，就是知道注意一下
  1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽，
  2.anchor值通常只能为负值(指非百分比值)，正值没有意义，
  3.anchor必须为字符串值
  Java代码
  1. Ext.onReady(function() {
  2. var panel1 = new Ext.Panel({
  3. title: "panel1",
  4. height: 100,
  5. anchor: '-50',
  6. html: "高度等于100，宽度=容器宽度-50"
  7. });
  9. var panel2 = new Ext.Panel({
  10. title: "panel2",
  11. height: 100,
  12. anchor: '50%',
  13. html: "高度等于100,宽度=容器宽度的50%"
  15. });
  17. var panel3 = new Ext.Panel({
  18. title: "panel3",
  19. anchor: '-10, -250',
  20. html: "宽度=容器宽度-10,高度=容器宽度-250"
  22. });
  24. var win = new Ext.Window({
  25. title: "Anchor Layout",
  26. height: 400,
  27. width: 400,
  28. plain: true,
  29. layout: 'anchor',
  30. items: [panel1, panel2,panel3]
  31. });
  32. win.show();
  33. });
- border 将容器分为五个区域:east,south,west,north,center
  Java代码
  1. Ext.onReady(function() {
  3. var button = Ext.get('show-btn');
  4. var win;
  6. button.on('click', function() {
  8. //创建TabPanel
  9. var tabs = new Ext.TabPanel({
  10. region: 'center', //border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间
  11. margins: '3 3 3 0',
  12. activeTab: 0,
  13. defaults: {
  14. autoScroll: true
  15. },
  16. items: [{
  17. title: 'Bogus Tab',
  18. html: "第一个Tab的内容."
  19. }, {
  20. title: 'Another Tab',
  21. html: "我是另一个Tab"
  22. }, {
  23. title: 'Closable Tab',
  24. html: "这是一个可以关闭的Tab",
  25. closable: true
  26. }]
  27. });
  29. //定义一个Panel
  30. var nav = new Ext.Panel({
  31. title: 'Navigation',
  32. region: 'west', //放在西边，即左侧
  33. split: true,
  34. width: 200,
  35. collapsible: true, //允许伸缩
  36. margins: '3 0 3 3',
  37. cmargins: '3 3 3 3'
  38. });
  40. //如果窗口第一次被打开时才创建
  41. if (!win) {
  42. win = new Ext.Window({
  43. title: 'Layout Window',
  44. closable: true,
  45. width: 600,
  46. height: 350,
  47. border : false,
  48. plain: true,
  49. layout: 'border',
  50. closeAction:'hide',
  51. items: [nav, tabs]//把上面创建的panel和TabPanel放在window中，并采用border方式布局
  52. });
  53. }
  54. win.show(button);
  55. });
  56. });
- card 像安装向导一样，一张一张显示
  Java代码
  1. Ext.onReady(function() {
  3. var i = 0;
  5. var navHandler = function(direction) {
  6. if (direction == -1) {
  7. i--;
  8. if (i < 0) { i = 0; }
  9. }
  11. if (direction == 1) {
  12. i++;
  13. if (i > 2) { i = 2; return false; }
  14. }
  17. var btnNext = Ext.get("move-next").dom.document.getElementsByTagName("button")[1];
  18. var btnBack = Ext.get("move-next").dom.document.getElementsByTagName("button")[0];
  20. if (i == 0) {
  21. btnBack.disabled = true;
  22. }
  23. else {
  24. btnBack.disabled = false;
  25. }
  27. if (i == 2) {
  28. btnNext.value = "完成";
  29. btnNext.disabled = true;
  30. }
  31. else {
  32. btnNext.value = "下一步";
  33. btnNext.disabled = false;
  34. }
  36. card.getLayout().setActiveItem(i);
  38. };
  41. var card = new Ext.Panel({
  42. width: 200,
  43. height: 200,
  44. title: '注册向导',
  45. layout: 'card',
  46. activeItem: 0, // make sure the active item is set on the container config!
  47. bodyStyle: 'padding:15px',
  48. defaults: {
  49. border: false
  50. },
  51. bbar: [
  52. {
  53. id: 'move-prev',
  54. text: '上一步',
  55. handler: navHandler.createDelegate(this, [-1])
  56. },
  57. '->',
  58. {
  59. id: 'move-next',
  60. text: '下一步',
  61. handler: navHandler.createDelegate(this, [1])
  62. }
  63. ],
  65. items: [{
  66. id: 'card-0',
  67. html: '<h1>欢迎来到注册向导!</h1><p>Step 1 of 3</p>'
  68. }, {
  69. id: 'card-1',
  70. html: '<h1>请填写注册资料!</h1><p>Step 2 of 3</p>'
  71. }, {
  72. id: 'card-2',
  73. html: '<h1>注册成功!</h1><p>Step 3 of 3 - Complete</p>'
  74. }],
  76. renderTo: "container"
  77. });
  81. });
- column 把整个容器看成一列,然后向容器放入子元素时
  Java代码
  1. Ext.onReady(function() {
  2. var win = new Ext.Window({
  3. title: "Column Layout",
  4. height: 300,
  5. width: 400,
  6. plain: true,
  7. layout: 'column',
  8. items: [{
  9. title:"width=50%",
  10. columnWidth:0.5,
  11. html:"width=(容器宽度-容器内其它组件固定宽度)*50%",
  12. height:200
  13. },
  14. {
  15. title:"width=250px",
  16. width: 200,
  17. height:100,
  18. html:"固定宽度为250px"
  19. }
  20. ]
  21. });
  22. win.show();
  23. });
- fit 一个子元素将充满整个容器（如果多个子元素则只有一个元素充满整个容器）
  Java代码
  1. Ext.OnReady(function(){
  2. var panel=new Ext.Panel(
  3. {
  4. renderTo:'paneldiv',
  5. title:'容器组件',
  6. layout:'fit',
  7. width:500,
  8. height:100,
  9. items:[
  10. {title:'子元素1'},
  11. {title:'子元素2'},
  12. {title:'子元素3'},
  13. {title:'子元素4'},
  14. {title:'子元素5'}
  15. ]
  16. }
  17. );
  18. });
- form 是一种专门用于管理表单中输入字段的布局
  Java代码
  1. Ext.onReady(function() {
  2. var win = new Ext.Window({
  3. title: "form Layout",
  4. height: 150,
  5. width: 230,
  6. plain: true,
  7. bodyStyle: 'padding:15px',
  8. items:
  9. {
  10. xtype: "form",
  11. labelWidth: 30,
  12. defaultType: "textfield",
  13. frame:true,
  14. items:
  15. [
  16. {
  17. fieldLabel:"姓名",
  18. name:"username",
  19. allowBlank:false
  20. },
  21. {
  22. fieldLabel:"呢称",
  23. name:"nickname"
  24. },
  25. {
  26. fieldLabel: "生日",
  27. xtype:'datefield',
  28. name: "birthday",
  29. width:127
  30. }
  31. ]
  32. }
  33. });
  34. win.show();
  35. });
- table 按照普通表格的方法布局子元素，用layoutConfig:{columns:3},//将父容器分成3列
  Java代码
  1. Ext.onReady(function(){
  2. var panel=new Ext.Panel(
  3. {
  4. renderTo:'paneldiv',
  5. title:'容器组件',
  6. layout:'table',
  7. width:500,
  8. height:200,
  9. layoutConfig:{columns:3},//将父容器分成3列
  10. items:[
  11. {title:'元素1',html:'ssssssssss',rowspan:2,height:100},
  12. {title:'元素2',html:'dfffsddsdfsdf',colspan:2},
  13. {title:'元素3',html:'sdfsdfsdf'},
  14. {title:'元素4',html:''}
  15. ]
  16. }
  17. );
  18. });

转载于:https://www.cnblogs.com/qiiuji0135/p/3357144.html

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。