Ext JS 4的布局和面板结构

允许我通过承认我是Ext JS的全新手来作为序言，所以请原谅我的无知。我熟悉HTML，CSS和JavaScript/JQuery，因此我可以在单个部分中获得大部分语法，但是我无法合并这些部分。Ext JS 4的布局和面板结构

我想首先构建一个基本的页面布局，其中包括一个横跨整个顶行的标题，一个占据剩余空间50％的左列和一个与列标题具有相同尺寸的右列剩下。最后，我想在面板中显示不同类型的内容，但现在我需要了解Ext JS布局和视口的基本语法和结构。就目前而言，我最终感到困惑。下面是我的一些代码第一次尝试的样品，但很显然的方式关闭基地：

var panel = new Ext.Panel({ 
    fullscreen: true, 
    layout: { 
     type: "Panel", 
     align: "fit", 
    }, 
    items: [ 
     { 
      xtype: "panel", 
      id: "topHeader", 
      title: "Header", 
      style: "height:200px;" 
     }, 
     { 
      xtype: "panel", 
      id: "left", 
      title: "Left", 
      style: "width:500px;z-index:2;background-color:#ccc;position:absolute;left:0px;" 
     }, 
     { 
      xtype: "panel", 
      id: "right", 
      title: "Right", 
      style: "width:500px;z-index:2;background-color:#000;position:absolute;right:0px;" 
     } 
    ] 
});

来源

2011-09-05 Carlos

http://blue-walrus.com/2014/09/layouts-in-extjs/ –

对于这一点，你需要使用“边界”的布局。边界布局允许您在各个区域添加组件，如北，中，左，右，南。

你可以在这里工作的例子 - http://docs.sencha.com/ext-js/4-0/#!/example（布局部分 - 边框式布局）

希望这有助于。

来源

2011-09-05 06:47:01 netemp

感谢您的回复@NetEmp。我已经注意到了边框布局，但是您可以制作没有标题和可折叠部分的布局吗？我想只是一个简单的网格，是用户不可见的...有道理？ – Carlos

除中心区域外，您可以取下所有区域。如果你想要这些区域，但不想让它们崩溃，那么你可以在定义这些区域时进行可折叠：false。请原谅我，但我无法获得 - “用户看不到的网格”。 – netemp

我想你的意思是这样的？

Ext.create('Ext.Viewport', { 
    layout: { 
     type: 'border', 
     padding: 5 
    }, 
    defaults: { 
     split: true 
    }, 
    items: [ 
     { 
      region: 'north', 
      collapsible: false, 
      border: false, 
      split: true, 
      height: 100, 
      html: 'north' 
     }, 
     { 
      region: 'west', 
      collapsible: false, 
      border: false, 
      split: true, 
      width: '50%', 
      html: 'west<br>I am floatable' 
     }, 
     { 
      region: 'center', 
      border: false, 
      html: ' I am center' 
     } 
    ] 
});

试试吧，让我知道。

来源

2011-09-07 11:23:32 Armance

Ext JS 4的布局和面板结构

回答

相关问题