테두리가있는 ext j에 레이아웃 2X2 레이아웃을 만들려면 어떻게해야합니까?

2X2 레이아웃을 만드는 데 필요한 요구 사항이 있습니다. 레이아웃을 테두리로 사용하고 있으며 아래 코드를 시도했지만 브라우저 콘솔에서 아래 예외가 발생했습니다. 캐치 유형 오류 : 속성 '구성 요소를 설정할 수 없습니다. 'of null 및 아래에 내가 시도한 내 코드입니다. ext js에서 2X2 레이아웃을 작성하는 방법에 대해 도움을 줄 수 있습니까? 당신은 생성되지 않기 때문에 당신의 DOM의이 문제를 얻고있다테두리가있는 ext j에 레이아웃 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

(나는 내선 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

테두리가있는 ext j에 레이아웃 2X2 레이아웃을 만들려면 어떻게해야합니까?

답변

관련 문제