Экземпляр внешней рассылки extJs

Question

У меня есть 3 extJs Windows. Каждый из них имеет некоторый контроль формы, а затем две вкладки, отображающие диаграмму. В настоящее время все окна появляются в одном месте, и мне нужно перетащить их, чтобы они стояли в строке, подобной этой | | | , Как я могу создать 3 столбца на экране и разместить каждое окно в одном из них. Пожалуйста, найдите код одного из приведенных ниже окон. И да, я видел эту ссылку http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/layout/table.html, но это не помогает моей причине. Ни один контент не отображается, если я создаю 3-х столбчатый макет, например, то, что упоминается в ссылке. Предположим, что все окна имеют одинаковый код и предлагают способ. Еще одна вещь, у меня есть закрывающая и максимизируемая функция во всех окнах. Спасибо.

var win = Ext.create('Ext.Window', { 
    id: 'r1', 
    width: eachWindowWidth, 
    height: eachWindowHeight, 
    hidden: false, 
    maximizable: true, 
    title: 'Registered Hosts', 
    renderTo: Ext.getBody(), 
    tbar: [{ 
     xtype: 'combo', 
     width: 50, 
     store: optionRegistered, 
     mode: 'local', 
     fieldLabel: '', 
     name: 'answer', 
     anchor: '90%', 
     displayField: 'answer', 
     valueField: 'id' 
    }, { 
     xtype: 'datefield', 
     width: 90, 
     name: 'time', 
     fieldLabel: '', 
     anchor: '90%' 
    }, { 
     xtype: "label", 
     width: 20, 
     fieldLabel: text, 
     name: 'txt', 
     text: 'to' 
    }, { 
     xtype: 'combo', 
     id: 'c22devices', 
     width: 50, 
     store: optionRegistered, 
     mode: 'local', 
     fieldLabel: '', 
     name: 'answer', 
     anchor: '90%', 
     displayField: 'answer', 
     valueField: 'id' 
    }, { 
     xtype: 'datefield', 
     id: 'cl22devices', 
     width: 90, 
     name: 'time', 
     fieldLabel: '', 
     anchor: '90%' 
    }, { 
     xtype: 'button', 
     text: 'Ok' 
    }], 
    items: [ 

    { 
     xtype: "label", 
     fieldLabel: text, 
     name: 'txt', 
     text: text 
    }, { 
     xtype: 'tabpanel', 
     id: "tabs1", 
     activeTab: 0, 
     width: eachTabWidth, 
     height: eachTabHeight, 
     plain: true, 
     defaults: { 
      autoScroll: true, 
      bodyPadding: 10 
     }, 
     items: [{ 
      title: 'Normal Tab', 
      items: [{ 
       id: 'chartCmp1', 
       xtype: 'chart', 
       height: 300, 
       width: 300, 
       style: 'background:#fff', 
       animate: true, 
       shadow: true, 
       store: storeRouge, 
       axes: [{ 
        type: 'Numeric', 
        position: 'left', 
        fields: ['total'], 
        label: { 
         renderer: Ext.util.Format.numberRenderer('0,0') 
        }, 
        grid: true, 
        minimum: 0 
       }, { 
        type: 'Category', 
        position: 'bottom', 
        grid: true, 
        fields: ['date'], 
       }], 
       series: [{ 
        type: 'column', 
        axis: 'left', 
        highlight: true, 
        tips: { 
         trackMouse: true, 
         width: 140, 
         height: 28, 
         renderer: function (storeItem, item) { 
          this.setTitle(storeItem.get('date') + ': ' + storeItem.get('total') + ' $'); 
         } 
        }, 
        label: { 
         display: 'insideEnd', 
         'text-anchor': 'middle', 
         field: 'total', 
         renderer: Ext.util.Format.numberRenderer('0'), 
         orientation: 'vertical', 
         color: '#333' 
        }, 
        xField: 'date', 
        yField: 'total' 
       }] 
      }] 
     }, { 
      title: 'Table View', 
      xtype: 'grid', 
      id: "gridChart1", 
      width: 200, 
      height: 200, 
      collapsible: false, 
      store: storeRouge, 
      multiSelect: true, 
      viewConfig: { 
       emptyText: 'No information to display' 
      }, 
      columns: [{ 
       text: 'Devices', 
       flex: 50, 
       dataIndex: 'date' 
      }, { 
       text: 'Pass', 
       flex: 50, 
       dataIndex: 'total' 
      }] 
     }] 
    }], 
    listeners: { 

     resize: function() { 
      Ext.getCmp("tabs1").setWidth(this.width); 
      Ext.getCmp("tabs1").setHeight(this.height); 
      Ext.getCmp("chartCmp1").setWidth(this.width * 100/100); 
      Ext.getCmp("gridChart1").setWidth(this.width * 100/100); 
      Ext.getCmp("gridChart1").setWidth(this.width * 100/100); 
      Ext.getCmp("gridChart1").setWidth(this.width * 100/100); 
     } 
    } 
}); 

Answer 1

Проблемы есть, Ext.Window, будучи descendand из Ext.Panel не соблюдает правила расположения, как нормальное Ext.Panels делать, он плавает сам по себе и ограничивается только пределами элемент DOM, которому они подвергаются (тело по умолчанию).

Это означает, что вам придется перепрыгивать некоторые петли, чтобы расположить и расположить окна вручную. Вы также можете попытаться создать некоторый класс descendand из Ext.WindowGroup, чтобы помочь вам управлять своими окнами и сохранять их красивыми и аккуратными.