我做了一個與extjs設計器的選項卡面板的佈局

我做了與extjs設計器的選項卡面板的佈局，但它不顯示任何東西，如果我運行它。我做了一個與extjs設計器的選項卡面板的佈局

下面的代碼，請幫助我：

Ext.onReady(function(){ 
    Ext.BLANK_IMAGE_URL = 'extjs/s.gif'; 
    Ext.onReady(function(){ 
     MyTabPanelUi = Ext.extend(Ext.TabPanel, { 
      activeTab: 0, 
      width: 800, 
      height: 500, 
      title: 'Ledger', 
      itemId: 'ledger_tab', 
      initComponent: function() { 
       this.items = [ 
       { 
        xtype: 'panel', 
        title: 'Ledger', 
        autoScroll: true, 
        items: [ 
        { 
         xtype: 'editorgrid', 
         title: 'Ledger', 
         store: 'store', 
         height: 150, 
         footer: true, 
         stripeRows: true, 
         header: true, 
         loadMask: true, 
         id: 'leg_grid_up', 
         columns: [ 
         { 
          xtype: 'gridcolumn', 
          dataIndex: 'string', 
          header: 'Column', 
          sortable: true, 
          width: 100, 
          editor: { 
           xtype: 'textfield' 
          } 
         }, 
         { 
          xtype: 'numbercolumn', 
          dataIndex: 'number', 
          header: 'Column', 
          sortable: true, 
          width: 100, 
          align: 'right', 
          editor: { 
           xtype: 'numberfield' 
          } 
         }, 
         { 
          xtype: 'datecolumn', 
          dataIndex: 'date', 
          header: 'Column', 
          sortable: true, 
          width: 100, 
          editor: { 
           xtype: 'datefield' 
          } 
         }, 
         { 
          xtype: 'booleancolumn', 
          dataIndex: 'bool', 
          header: 'Column', 
          sortable: true, 
          width: 100, 
          editor: { 
           xtype: 'checkbox', 
           boxLabel: 'BoxLabel' 
          } 
         } 
         ], 
         tbar: { 
          xtype: 'toolbar', 
          height: 50, 
          items: [ 
          { 
           xtype: 'container', 
           layout: 'column', 
           width: 794, 
           height: 43, 
           items: [ 
           { 
            xtype: 'spacer', 
            width: 588, 
            height: 18 
           }, 
           { 
            xtype: 'spacer', 
            width: 200, 
            height: 18 
           }, 
           { 
            xtype: 'datefield' 
           } 
           ] 
          } 
          ]//toolbar items 
         } 
        }, 
        { 
         xtype: 'container', 
         height: 70 
        }, 
        { 
         xtype: 'editorgrid', 
         title: 'Ledger', 
         height: 150, 
         id: 'leg_grid_down', 
         columns: [ 
         { 
          xtype: 'gridcolumn', 
          dataIndex: 'string', 
          header: 'Column', 
          sortable: true, 
          width: 100, 
          editor: { 
           xtype: 'textfield' 
          } 
         }, 
         { 
          xtype: 'numbercolumn', 
          dataIndex: 'number', 
          header: 'Column', 
          sortable: true, 
          width: 100, 
          align: 'right', 
          editor: { 
           xtype: 'numberfield' 
          } 
         }, 
         { 
          xtype: 'datecolumn', 
          dataIndex: 'date', 
          header: 'Column', 
          sortable: true, 
          width: 100, 
          editor: { 
           xtype: 'datefield' 
          } 
         }, 
         { 
          xtype: 'booleancolumn', 
          dataIndex: 'bool', 
          header: 'Column', 
          sortable: true, 
          width: 100, 
          editor: { 
           xtype: 'checkbox', 
           boxLabel: 'BoxLabel' 
          } 
         } 
         ], 
         tbar: { 
          xtype: 'toolbar' 
         } 
        }, 
        { 
         xtype: 'container' 
        } 
        ]//ledger panel 
       } 
       ];//this 
       MyTabPanelUi.superclass.initComponent.call(this); 
      } 
     }); 
    }); 
});

來源

2011-03-25 suchita

甜領主格式化，最壞的情況比我想象了！你的問題顯示了你的努力和巨大的期望。 – gideon 2011-03-25 16:46:58

看到[寫完美的問題]（http://msmvps.com/blogs/jon_skeet/archive/2010/08/29/writing-the-perfect-question.aspx） – gideon 2011-03-25 16:47:33

你需要使它在某些HTML標記。您可以使用renderTo屬性將面板渲染到身體標記或某個設置爲id的某個div標記。

假設您打算渲染到body標籤。您需要添加renderTo : Ext.getBody()。 Ext.getBody方法只是返回body標籤。

MyTabPanelUi = Ext.extend(Ext.TabPanel, { 
      activeTab: 0, 
      width: 800, 
      height: 500, 
      renderTo: Ext.getBody(), 
      . 
      . 
      .

來源

2011-03-25 20:09:23

它仍然無法正常工作，雖然我已經呈現它 – suchita 2011-03-26 05:06:43

你在螢火蟲中有任何錯誤嗎？ – 2011-03-26 06:05:38

您沒有呈現它。

試試看渲染到Ext.getBody（）：

MyTabPanelUi.render(Ext.getBody());

來源

2011-03-25 20:10:09

我做了一個與extjs設計器的選項卡面板的佈局

回答

相關問題