CODEWITHSUNDEEP
javascriptextjs
Leo
Leo

Reputation: 639

Grid pane in Extjs4 not displaing anything?

I try to write a grid panel but the response is blank. The app.js is:

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

And the Model and Store:

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: '[email protected]',
          phone: '555-111-1224'
     }, {
          name: 'Bart',
          email: '[email protected]',
          phone: '555-222-1234'
     }]
});

I tried but the browser is blank, and no warning infos. Why the page is blank?

Upvotes: 0

Views: 54

Answers (1)

Saket Patel
Saket Patel

Reputation: 6683

your code is correct and working properly

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: '[email protected]',
              phone: '555-111-1224'
         }, {
              name: 'Bart',
              email: '[email protected]',
              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

Maybe you are not using Ext.onReady or there is some javascript error which you can check in console of your debugger

Upvotes: 1

Related Questions