Extjs4의 격자 창에 아무 것도 표시되지 않습니까?

Question

격자 패널을 작성하려고했지만 응답이 비어 있습니다. app.js는 다음과 같습니다

//create panel 
Ext.create('Ext.grid.Panel', { 
    renderTo: Ext.getBody(), 
    store: userStore, 
    width: 400, 
    height: 200, 
    title: 'Application Users', 
    columns: [{ 
     text: 'Name', 
     width: 100, 
     sortable: false, 
     hideable: false, 
     dataIndex: 'name' 
    }, { 
     text: 'Email Address', 
     width: 150, 
     dataIndex: 'email', 
     hidden: true 
    }, { 
     text: 'Phone Number', 
     flex: 1, 
     dataIndex: 'phone' 
    }] 
}); 

그리고 모델 및 저장 :

Ext.define('User', { 
    extend: 'Ext.data.Model', 
    fields: [ 'name', 'email', 'phone' ] 
}); 

// create store 
var userStore = Ext.create('Ext.data.Store', { 
    model: 'User', 
    data: [{ 
      name: 'Lisa', 
      email: 'lisa@simpsons.com', 
      phone: '555-111-1224' 
    }, { 
      name: 'Bart', 
      email: 'bart@simpsons.com', 
      phone: '555-222-1234' 
    }] 
}); 

나는 시도했지만 브라우저는 비어 없으며 경고 정보를 정기적으로. 페이지가 비어있는 이유는 무엇입니까?

Answer 1

코드가 정확하고 어쩌면 당신은 Ext.onReady를 사용하지 않는 제대로

Ext.onReady(function() { 
    Ext.define('User', { 
     extend: 'Ext.data.Model', 
     fields: [ 'name', 'email', 'phone' ] 
    }); 

    // create store 
    var userStore = Ext.create('Ext.data.Store', { 
     model: 'User', 
     data: [{ 
       name: 'Lisa', 
       email: 'lisa@simpsons.com', 
       phone: '555-111-1224' 
     }, { 
       name: 'Bart', 
       email: 'bart@simpsons.com', 
       phone: '555-222-1234' 
     }] 
    }); 

    Ext.create('Ext.grid.Panel', { 
     renderTo: Ext.getBody(), 
     store: userStore, 
     width: 400, 
     height: 200, 
     title: 'Application Users', 
     columns: [{ 
      text: 'Name', 
      width: 100, 
      sortable: false, 
      hideable: false, 
      dataIndex: 'name' 
     }, { 
      text: 'Email Address', 
      width: 150, 
      dataIndex: 'email', 
      hidden: true 
     }, { 
      text: 'Phone Number', 
      flex: 1, 
      dataIndex: 'phone' 
     }] 
    }); 
}); 

CHECK DEMO

작업 또는이 당신이 당신의 디버거의 콘솔에서 확인할 수있는 자바 스크립트 오류가 일부