javascript - 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(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'
        }]
    });
});

检查演示

也许您没有使用 Ext.onReady 或者您可以在调试器的控制台中检查一些 javascript 错误