1. 31 Jan 2013 11:52 AM #1
    Shwini
    Shwini is offline
    Sencha User
    Join Date
    Jan 2013
    Posts
    2
    Vote Rating
    0
    Shwini is on a distinguished road
      0  

    Default Unable to render a grid panel (New to extjs!)

    Unable to render a grid panel (New to extjs!)


    Hi,
    I am new to js and trying simple examples to get get the hang of it. In this example i'm trying to display a simple grid panel by applying the mvc model. I do not get any error msgs but nothing is displayed on the page and I cannot figure out what I am doing wrong. Any help is appreciated! Thanks in advance!

    Here is my code:

    grid.html
    <html>
    <head>
    <title>Example1_datagrid</title>
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="extjs/bootstrap.js"></script>
    <script type="text/javascript" src="myapp.js"></script>
    </head>
    <body></body>
    </html>

    myapp.js

    Ext.application({
    name: "MyApp",
    appFolder: "app",
    controllers: ["MyController"],
    // Not aware of scoping
    init: function() {
    console.log("MyApp >> init() >> started");
    console.log("MyApp >> init() >> completed");
    },
    // Aware of current scoping, "this" is a global namespace
    launch: function() {
    try {
    // "this" is application object and a pointer to global variables/namespace
    console.log("MyApp >> launch() >> started");
    console.log("MyApp >> launch() >> completed");

    } catch(e) {
    console.log("ERROR>> "+e.message);
    };
    }
    });

    MyController.js
    Ext.define('MyApp.controller.MyController', {
    extend: 'Ext.app.Controller',


    stores: ['Dates'],
    views: ['Datagrid'],



    init: function() {
    console.log("MyApp.controller.MyController >> init() >> started");
    console.log("MyApp.controller.MyController >> init() >> completed");
    },

    onLaunch: function() {
    console.log("MyApp.controller.MyController >> onLaunch() >> started");


    console.log("Creating an instance of Dates --");
    var dates = Ext.create("MyApp.store.Dates");
    dates.load();

    console.log("Creating an instance of Datagrid --");
    var view = Ext.create('MyApp.view.Datagrid');

    console.log("MyApp.controller.MyController >> onLaunch() >> completed");
    }
    });


    Dates.js
    Ext.define('MyApp.store.Dates', {
    extend: 'Ext.data.Store',
    storeId:'datesStore',
    fields:['date1', 'date2', 'date3', 'date4', 'date5'],
    data:{'items':[
    { date1: '1/1/12', date2: '1/1/12', date3: '1/1/12', date4: '1/1/12', date5:'1/1/12' },
    { date1: '1', date2: '2', date3:'3', date4: '4', date5: '5' },
    ]},
    });

    Datagrid.js
    Ext.define('MyApp.view.Datagrid', {
    extend: 'Ext.grid.Panel',
    title: 'dates',
    selType: 'cellmodel',
    store: dates,
    columns: [
    { header: 'Date1',
    dataIndex: 'date1'
    },
    { header: 'Date2',
    dataIndex: 'date2'
    },
    { header: 'Date3',
    dataIndex: 'date3'
    },
    { header: 'Date4',
    dataIndex: 'date4'
    },
    { header: 'Date5',
    dataIndex: 'date5'
    }
    ],
    height: 200,
    width: 400,
    constructor: function() {
    console.log("MyApp.view.Datagrid >> Constructor");
    },
    renderTo: Ext.getBody()
    });
    Reply With Quote Reply With Quote
  2. 31 Jan 2013 10:31 PM #2
    m.sudharsanreddy
    m.sudharsanreddy is offline
    Sencha User
    Join Date
    Aug 2012
    Posts
    12
    Vote Rating
    0
    m.sudharsanreddy is on a distinguished road
      0  

    Default


    Hi Swini,

    Remove comma(,) which is highlighted in red color.
    And try it.

    Ext.define('MyApp.store.Dates', {
    extend: 'Ext.data.Store',
    storeId:'datesStore',
    fields:['date1', 'date2', 'date3', 'date4', 'date5'],
    data:{'items':[
    { date1: '1/1/12', date2: '1/1/12', date3: '1/1/12', date4: '1/1/12', date5:'1/1/12' },
    { date1: '1', date2: '2', date3:'3', date4: '4', date5: '5' },
    ]},
    });
    Reply With Quote Reply With Quote
  3. 1 Feb 2013 8:23 AM #3
    Shwini
    Shwini is offline
    Sencha User
    Join Date
    Jan 2013
    Posts
    2
    Vote Rating
    0
    Shwini is on a distinguished road
      0  

    Default


    No change even after removing the comma, I dont think its a syntactical error, but not sure if I'm missing something. Thanks!
    Reply With Quote Reply With Quote