extJsの列レイアウトの問題

Question

私は3つのextJs Windowsを持っています。それぞれにはフォームコントロールがいくつかあり、次にチャートを表示する2つのタブがあります。現在のところ、すべてのウィンドウが同じ場所に表示され、私はそれらをドラッグして、次のような行に置く必要があります。 | | 。どのように私は画面上に3つの列を作成し、それらのいずれかに各ウィンドウを配置することができます。下のウィンドウのコードを見つけてください。そしてはい私はこのリンクを見た http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/layout/table.htmlしかし、それは私の原因を助けません。リンクに記載されているような3列のレイアウトを作成した場合、コンテンツは表示されません。すべてのウィンドウに同じコードがあり、方法を提案してください。もう1つ、私は閉じることができ、すべてのウィンドウで最大化可能な機能を持っています。ありがとうございます。

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.Panelsが行うようExt.Panelのdescendandあることは、レイアウトのルールを遵守しないが、それ自体によって浮上のみの制限によって制約され、Ext.WindowありますレンダリングされるDOM要素（デフォルトでは本文）。

これは、ウィンドウを手動で配置およびレイアウトするためにいくつかのループをジャンプする必要があることを意味します。 Ext.WindowGroupからいくつかの子孫クラスを作成して、あなたのウィンドウを管理し、それらをきちんと整理しておくのに役立てることもできます。