ExtJs Simple Grid

Simple Grid Example

HTML

<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css">
<!-- corresponding blog at http://blog.jardalu.com/2013/5/24/simple-grid-sample-extjs -->
<title>Simple Grid Sample for ExtJs</title>
<div id="example-grid"></div>

CSS

body {
    padding: 50px 20px 0 20px;
}

JavaScript

Ext.require([
    'Ext.data.*',
    'Ext.grid.*'
]);
Ext.onReady(function(){
    var data=[
        {'Name':'fahdi','dob':'dob','Resource':[{
            'current':'1','target':'1'
        },{'current':'0','target':'1'}]}
        
    ];
    
    Ext.define('Person',{
        extend: 'Ext.data.Model',
        fields: [
            'Name', 'dob','Resource'
        ],
         hasMany: [{
          name: 'Resource',
          model: 'Resource',
          associationKey: 'Resource'
  }]
    });
    Ext.define('Resource',{
        extend: 'Ext.data.Model',
        fields: [
            'current', 'target'
        ]
    });
    

    // create the Data Store
    var store = Ext.create('Ext.data.Store', {
        model: 'Person',
        autoLoad: true,
        proxy: {
            type: 'memory',
                data: data,
                reader: {
                    type: 'json'
                }
        }
    });

    // create the grid
    Ext.create('Ext.grid.Panel', {
        store: store,
        columns: [
            {text: "Name",  dataIndex: 'Name'},
            {text: "dob",  dataIndex: 'dob'},
            {text: "dox"},
            {text: "doc"},
            {text: "dov"},
            {text: "dob"},
            {text: "Resources", columns:[
                {text: "current",
                 renderer:function (value, metaData, record, rowIdx, colIndex ){
                     return record.data.Resource[(colIndex-6)/2].current;
                 }
                },
                {text: "target",
                renderer:function (value, metaData, record, rowIdx, colIndex ){
                   return record.data.Resource[Math.floor((colIndex-6)/2)].target;
                 }}
            ]},{text: "Resources", columns:[
                {text: "current",
                 renderer:function (value, metaData, record, rowIdx, colIndex ){
                     return record.data.Resource[(colIndex-6)/2].current;
                 }
                },
            ...