1. ホーム
  2. 質問と答え
  3. 境界線を持つext jsでレイアウト2X2レイアウトを作成するにはどうすればよいですか？

境界線を持つext jsでレイアウト2X2レイアウトを作成するにはどうすればよいですか？

2017-12-14 16 views
1

2X2レイアウトを作成する必要があります。境界線としてレイアウトを使用しているため、以下のコードを試しました。ブラウザのコンソールで以下の例外が発生しています。 キャッチしないTypeError：プロパティ 'コンポーネント'of nullと私が試した私のコードです。 ext jsで2X2レイアウトを作成する方法を教えてもらえますか？あなたが作成されませんのでごDOMのこの問題を得ている境界線を持つext jsでレイアウト2X2レイアウトを作成するにはどうすればよいですか？

<!DOCTYPE html> 
<html> 
    <head> 
     <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" 
     rel = "stylesheet" /> 
     <script type = "text/javascript" 
     src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script> 

     <script type = "text/javascript"> 

      Ext.onReady(function() { 
    var panelHeightLandingPage = (screen.height/2) - 150; 
    var viewPort = new Ext.Viewport({ 
    layout: 'border', 
    autoScroll: true, 
    items: [{ 
     // The header bar. 
     region: 'north', 
     layout: 'fit', 
     margins: '0 0 0 0', 
     border: false, 
     contentEl: 'header', 
     autoHeight: true 
    },{ 
     region: 'center',     
     layout: 'fit', 
     border: false, 
     margins: '5 5 5 5', 
     items: [tabPanelLayout], 
     contentEl: 'content' 
    }], 
    renderTo: Ext.getBody() 
    }); 

     var tabPanelLayout = new Ext.TabPanel({ 
    id:'tabPanel', 
    renderTo: 'content', 
    activeTab: 0, 
    deferredRender:true, 
    defaults:{ height: 500 }, 
    listeners: { 
     tabchange: function (tabPanel,newTab) { 
      if(newTab.getId() == 'landingTab') { 
       currentTab = 1; 
       //this is the initial load 

      } 
     } 
    }, 
    items:[{ 
     id: 'landingTab', 
     title:"Booking Summary & Inventory View", 
     layout: 'fit', 
     items: landingPanel 
    }] 
}); 

    var landingPanel = new Ext.Panel({ 
    layout:'border',  
    items: [{ 
     region:'east', 
     width: 500, 
     layout: 'fit', 
     border: false, 
     items: chartPanels 
    },{ 
     region:'center', 
     layout: 'fit', 
     border: false, 
     items: gridPanels 
    }] 
}); 

var gridPanels = new Ext.Panel({ 
    layout:'border', 
    items: [{ 
     region: 'north', 
     height: panelHeightLandingPage, 
     layout: 'fit', 
     border: false, 
     items : { 
       title: 'Chassis Pool Maintenance', 
      // region:'west', 
       html: 'This is Panel 1', 
       width: screen.availWidth-600 
      }    
    },{ 
     region: 'center', 
     layout: 'fit', 
     border: false, 
     items : { 
       title: 'Chassis Pool Maintenance', 
      // region:'west', 
       html: 'This is Panel 1', 
       width: screen.availWidth-600 
      }    
    }]  
}); 

//This contains the charts layout 
var chartPanels = new Ext.Panel({ 
    layout:'border', 
    items: [{ 
     region:'north', 
     title: 'Booking Summary Chart', 
     height: panelHeightLandingPage, 
     layout: 'fit', 
     border: true, 
     id: 'pie', 
     contentEl:'pieChart', 
     autoScroll: true    
    },{ 
     region: 'center', 
     title: 'Inventory View Chart', 
     layout: 'fit', 
     border: true, 
     id: 'bar', 
     contentEl: 'barGraph', 
     autoScroll: true 
    }] 
}); 

}); 

     </script> 
    </head> 

    <body> 
    </body> 
</html>

出典

2017-12-14 ASR

答えて

1

（私は内線JSライブラリ3.3.1バージョンを使用しています）。詳細はsencha forumのリンクUncaught TypeError: Cannot read property 'dom' of nullerrorを参照してください。

この場合、renderTo: 'content'はerrorを作成しています。

このFIDDLEの中で、私はあなたのコードを使用し、要件に応じていくつかの変更を加えました。これがあなたを助けたり、あなたの問題を解決するためにあなたを導くことを願っています。

コードスニペット

Ext.onReady(function() { 
    var panelHeightLandingPage = (screen.height/2) - 150, 
     gridPanels = new Ext.Panel({ 
      layout: 'border', 
      items: [{ 
       region: 'north', 
       height: panelHeightLandingPage, 
       layout: 'fit', 
       border: false, 
       items: { 
        title: 'Chassis Pool Maintenance', 
        // region:'west', 
        html: 'This is Panel 1', 
        width: screen.availWidth - 600 
       } 
      }, { 
       region: 'center', 
       layout: 'fit', 
       border: false, 
       items: { 
        title: 'Chassis Pool Maintenance', 
        // region:'west', 
        html: 'This is Panel 1', 
        width: screen.availWidth - 600 
       } 
      }] 
     }), 
     chartPanels = new Ext.Panel({ //This contains the charts layout 
      layout: 'border', 
      items: [{ 
       region: 'north', 
       title: 'Booking Summary Chart', 
       height: panelHeightLandingPage, 
       layout: 'fit', 
       border: true, 
       id: 'pie', 
       // contentEl: 'pieChart', 
       autoScroll: true 
      }, { 
       region: 'center', 
       title: 'Inventory View Chart', 
       layout: 'fit', 
       border: true, 
       id: 'bar', 
       // contentEl: 'barGraph', 
       autoScroll: true 
      }] 
     }), 
     landingPanel = new Ext.Panel({ 
      layout: 'border', 
      items: [{ 
       region: 'east', 
       width: 500, 
       layout: 'fit', 
       border: false, 
       items: chartPanels 
      }, { 
       region: 'center', 
       layout: 'fit', 
       border: false, 
       items: gridPanels 
      }] 
     }), 
     tabPanelLayout = new Ext.TabPanel({ 
      id: 'tabPanel', 
      activeTab: 0, 
      deferredRender: true, 
      defaults: { 
       height: 500 
      }, 
      listeners: { 
       tabchange: function(tabPanel, newTab) { 
        if (newTab.getId() == 'landingTab') { 
         currentTab = 1; 
         //this is the initial load 
        } 
       } 
      }, 
      items: [{ 
       id: 'landingTab', 
       title: "Booking Summary & Inventory View", 
       layout: 'fit', 
       items: landingPanel 
      }, { 
       title: 'Second Tab' //Only for test. 
      }] 
     }), 
     viewPort = new Ext.Viewport({ 
      //renderTo:document.body, you can put renderTo here aslo 
      layout: 'border', 
      autoScroll: true, 
      items: [{ 
       // The header bar. 
       region: 'north', 
       layout: 'fit', 
       margins: '0 0 0 0', 
       border: false, 
       // contentEl: 'header', 
       autoHeight: true 
      }, { 
       region: 'center', 
       layout: 'fit', 
       border: false, 
       margins: '5 5 5 5', 
       items: [tabPanelLayout], 
       //contentEl: 'content' 
      }] 
     }); 

    //you can put renderTo here aslo like this. 
    viewPort.render(Ext.getBody()); 
});

出典

2017-12-15 05:40:46

 関連する問題

  • 関連する問題はありません^_^