Threaded View

  1. #1
    Sencha User
    Join Date
    Nov 2012
    Posts
    10
    Vote Rating
    0
    Answers
    1
    kerum is on a distinguished road

      0  

    Default Answered: Simple Grid not rendering with CDN

    Answered: Simple Grid not rendering with CDN


    Hello,

    I'm new to Ext JS and have problem to combine simple grid example
    from page http://www.sencha.com/learn/the-grid-component/
    with CDN http://cdn.sencha.io/ where Ext classes are stored.
    I'm getting no errors but grid is not rendering.

    Here the complete html file, could you tell me what is wrong?

    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <title>Grid</title>
        <link href="http://cdn.sencha.io/ext-4.1.1-gpl/resources/css/ext-all.css" rel="stylesheet" />
        <script src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all.js"></script>
    
        <script type="text/javascript">
    
    Ext.define('User', {
        extend: 'Ext.data.Model',
        fields: [ 'name', 'email', 'phone' ]
    });
    
    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' },
            { name: 'Homer', email: 'home@simpsons.com', phone: '555-222-1244' },
            { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
        ]
    });
    
    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'
            }
        ]
    });
    
        </script>
      </head>
      <body></body>
    </html>
    Regards,
    kris

  2. You should put your code inside Ext.onReady(function(){...});
    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <title>Grid</title>
        <link href="http://cdn.sencha.io/ext-4.1.1-gpl/resources/css/ext-all.css" rel="stylesheet" />
        <script src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all.js"></script>
    
    
        <script type="text/javascript">
    Ext.onReady(function(){
        Ext.define('User', {
            extend: 'Ext.data.Model',
            fields: [ 'name', 'email', 'phone' ]
        });
    
    
        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' },
                { name: 'Homer', email: 'home@simpsons.com', phone: '555-222-1244' },
                { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
            ]
        });
    
    
        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'
                }
            ]
        });
    });
        </script>
      </head>
      <body></body>
    </html>

Thread Participants: 1