2014-09-30 2 views
0

이전에 내 응용 프로그램은 JSP 페이지에서 ExtJs 격자를 사용하여 데이터를 표시하는 프레임을 사용하고있었습니다. 이제 프레임을 제거하고 표시를 위해 extjs 탭을 사용하려고합니다. 나는 내부 탭에 autoLoad : {url : "test.jsp"} 탭을 사용하여 JSP 페이지를 포함시킬 수 있습니다. 하지만 내 문제는 extjs 그리드 표시되지 않습니다. 검색하는 동안 나는 방금 autoLoad : {url : "test.jsp", scripts : true}를 정의하여 발견했습니다. JSP 페이지 내의 스크립트를 활성화합니다. 하지만 내 응용 프로그램을 실행하면 ext가 정의되지 않음이 표시됩니다. 나는 jsp 파일 안에 ext-all 스크립트를 포함 시켰기 때문에 그것이 어떻게 오는지 알지 못한다. 접근법이 올바른지 또는 extjs 탭으로 작업 할 때 격자를 표시하기 위해 무엇을해야하는지 알려주십시오.ExtJS - 탭 안에 extjs 격자가있는 JSP 페이지 포함

<script> 
function getRandomDate() { 
    var from = new Date(1900, 0, 1).getTime(); 
    var to = new Date().getTime(); 
    return new Date(from + Math.random() * (to - from)); 
} 
function createFakeData(count) { 
     var firstNames = ['Ed', 'Tommy', 'Aaron', 'Abe']; 
     var lastNames = ['Spencer', 'Maintz', 'Conran', 'Elias']; 

     var data = []; 
     for (var i = 0; i < count ; i++) { 
      var dob = getRandomDate();   
      var firstNameId = Math.floor(Math.random() * firstNames.length); 
      var lastNameId = Math.floor(Math.random() * lastNames.length); 
      var name  = Ext.String.format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]); 

      data.push([name, dob]); 
     } 
     return data; 
    } 
Ext.onReady(function(){ 
    Ext.define('Person',{ 
     extend: 'Ext.data.Model', 
     fields: [ 
      'Name', 'dob' 
     ] 
    }); 

// create the Data Store 
var store = Ext.create('Ext.data.Store', { 
    model: 'Person', 
    autoLoad: true, 
    proxy: { 
     type: 'memory', 
      data: createFakeData(10), 
      reader: { 
       type: 'array' 
      } 
    } 
}); 
// create the grid 
Ext.create('Ext.grid.Panel', { 
    store: store, 
    columns: [ 
     {text: "Name", width:120, dataIndex: 'Name'}, 
     {text: "dob", width: 380, dataIndex: 'dob'} 
    ], 
    renderTo:'example-grid', 
    width: 500, 
    height: 280 
    });  
}); 
</script> 

이 내가 내 응용 프로그램에 포함하는 것을 시도하고있는 예는 그대로

MainPage

Ext.onReady(function(){ 
Ext.create('Ext.tab.Panel', { 
height:300, 
    items: [ 
     { 
      title: 'eRAM summary', 
      autoLoad: {url: 'test1.jsp',scripts:true}, 
      closable:true 
     } 
    ], 
    renderTo : document.body 
}); 

test.jsp를 그리드를 포함

+0

같은

우리에게 몇 가지 코드를 제시해주십시오. [ask] –

+0

안녕하세요 @SanKrish 코드 스 니펫을 포함 시켰습니다. –

답변

2

당신이 사용하십니까

<c:url> 

ext-all.js를 포함하고 있습니까? 이

<head> 
    <link href="<c:url value='/resources/css/ext-all.css' />" rel="stylesheet"> 
    <script src="<c:url value='/extjs/ext-debug.js' />" type="text/javascript"></script> 
    <script src="<c:url value='/resources/css/ext-all.css' />app/app.js" type="text/javascript"></script> 
</head> 
+0

이것은 오히려 주석 일 수 있습니다. –

+1

첫 번째 게시물에 댓글을 달려면 50 명이 필요합니다. ( –

+0

Upvoted. 회신을 게시하고 편집하지 마십시오. 완전히 문제를 해결할 수있는 답변을 통해 평판을 얻을 수 있습니다. 제안은 완전한 대답이 아니라는 것을 기억하십시오 :) –