как я буду использовать макет границы в extjs - PullRequest
Новая
       4

как я буду использовать макет границы в extjs

0 голосов
/ 31 августа 2011

У меня следующий код, я хочу, чтобы открытое окно использовало Ext.layout.BorderLayout, а также в левой части окна есть Ext.tree.TreePanel ... Я пробовал, но когда я использую BorderLayout, страница не открывается?Кто-нибудь может мне помочь с этим? 

Ext.onReady(function() {
  var window = Ext.create('Ext.Window', {
    title: 'Hello',
    height: 100,
    width: 100
  });
  
  window.show();
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all-neptune.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all.min.js"></script>

Ответы [ 3 ]

3 голосов
/ 31 августа 2011

Некоторое дополнение к ответу bmoeskau. Я рекомендую вам не использовать зарезервированные слова JavaScript, такие как окно, документ, номер и т. Д.

0 голосов
/ 08 декабря 2015

Просто дайте вашему окну макет border и установите region s для ближайших детей. У каждого ребенка будет свой макет и дочерние элементы. 

Ext.onReady(function() {
  var treeStore = Ext.create('Ext.data.TreeStore', {
    root: {
      expanded: true,
      children: [{
        text: "Wake up",
        leaf: true
      }, {
        text: "Go to Work",
        expanded: true,
        children: [{
          text: "Eat Lunch",
          leaf: true
        }, {
          text: "Finish Report",
          leaf: true
        }]
      }, {
        text: "Go to Sleep",
        leaf: true
      }]
    }
  });

  var myWindow = Ext.create('Ext.Window', {
    title: 'Hello World',
    width: 480,
    height: 220,
    layout: 'border',
    items: [{
      layout: 'fit',
      region: 'west',
      title: 'Tasks',
      width: 180,
      split: true,
      collapsible: true,
      floatable: false,
      items: [{
        xtype: 'treepanel',
        store: treeStore,
        rootVisible: false,
      }]
    }, {
      layout: 'fit',
      region: 'center',
      items: [{
        xtype: 'textarea',
        value: new Lorem().createText(6, Lorem.TYPE.SENTENCE),
        flex: 1
      }]
    }]
  });

  myWindow.show();
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all-neptune.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all.min.js"></script>
<script src="https://cdn.rawgit.com/f/loremjs/master/lorem.js"></script>
0 голосов
/ 31 августа 2011

Вот официальный пример , показывающий окно с BorderLayout. Недостаточно просто добавить layout:'border', необходимо добавить панели в контейнер макета, а также правильно настроить области макета.

например:. 

        var window = Ext.create('Ext.Window', {
            title: 'Hello',
            width: 100,
            height: 100,
            layout: 'border',
            items: [{
                region: 'west',
                title: 'Sidebar',
                width: 200,
                split: true,
                collapsible: true,
                floatable: false
            }, {
                region: 'center',
                html: 'Some content'
            }]
        });
...