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

CHECK DEMO

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

Extjs 4中的网格面板没有显示任何内容？

1 个答案: