1. 17 Nov 2012 12:29 AM #1
    kerum
    kerum is offline
    Sencha User
    Join Date
    Nov 2012
    Posts
    1
    Vote Rating
    0
    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
    Reply With Quote Reply With Quote
  2. Best Answer Posted by vietits

    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>
  3. 17 Nov 2012 1:05 AM #2
    vietits
    vietits is offline
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Vote Rating
    101
    Answers
    343
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all
      1  

    Default


    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>
    Its.grid.column.Component, Its.grid.feature.Sorting, Its.tab.plugin.Tool
    Reply With Quote Reply With Quote