CODEWITHSUNDEEP
javascriptextjsextjs5
S. Moreno
S. Moreno

Reputation: 536

Trying extjs5 simple gridpanel (example doesnt work)

Im using this example to learn how to use extjs5, im creating a simple gridpanel, but doesnt work for me (in the example use the renderTo: Ext.getBody(), i changed this part to renderTo: 'example-grid' to show inside the <div id="example-grid"> but the div shows empty. Here is the code:

<head>
<html:base />
<title><bean:write name="UserFormBean" property="Nombre"/></title>

<link rel="stylesheet" href="../../../../config/ext-theme-classic/build/resources/ext-theme-classic-all.css" type="text/css" />
<link rel="stylesheet" href="../../../../config/ext-theme-classic/build/resources/ext-theme-classic-all-debug.css" type="text/css" />

<script src="../../../../config/js/ExtLocale/<%=request.getSession(true).getAttribute( "langSesion")%>"></script>
<script type="text/javascript" src="../../../../config/ext-theme-classic/build/ext-theme-classic.js"></script>
<script type="text/javascript" src="../../../../config/ext-theme-classic/build/ext-theme-classic-debug.js"></script>
<script type="text/javascript" src="../../../../config/js/ext-all-5.0.js"></script>
<script type="text/javascript" src="../../../../config/js/ext-all-debug-5.0.js"></script>

<script type="text/javascript">
Ext.onReady(function() {

    //MODEL
    Ext.define('User', {
        extend: 'Ext.data.Model',
        fields: [ 'name', 'email', 'phone' ]
    });

    // DATASTORE
    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' },
            { name: 'Homer', email: '[email protected]', phone: '555-222-1244' },
            { name: 'Marge', email: '[email protected]', phone: '555-222-1254' }
        ]
    });

    //GRIDPANEL
    Ext.create('Ext.grid.Panel', {
        renderTo: 'example-grid',
        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>
<div id="example-grid"></div>

Upvotes: 0

Views: 289

Answers (2)

Saki
Saki

Reputation: 5856

Your original code should work provided that you include necessary Ext files if you really need to use onReady approach (not recommended).

You can find a workable single-file approach here: Single File ExtJS 5 Application w/o Sencha Cmd. It is slightly different in that that it uses Ext.application() instead of onReady(). One way or another, both are not recommended.

The recommended approach is to use Sencha Cmd to initially generate, maintain during development and finally build the Ext application.

Upvotes: 1

Oliver Watkins
Oliver Watkins

Reputation: 13509

This is how I have it done in my project :

var grid = Ext.create('Ext.grid.Panel', {..})

var pageDivs = Ext.select('div .example-grid');

//get the .Page DIV should just be one.
var pageDiv = pageDivs.elements[0];

grid.render(pageDiv);

ie. use render instead of renderTo.

Upvotes: 0

Related Questions