EXTJS grid from google spreadsheet

by hiroshi shimizu

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.2a/resources/css/ext-all-gray.css">

JavaScript

Ext.define('User2', {
    extend: 'Ext.data.Model',
    fields: [ {name:'name', mapping:'gsx$type.$t'}] //,
//              {name:'email', mapping:'gsx$type.$t'},
//              {name:'phone', mapping:'gsx$enviroment.$t'} ]
});

var store2 = Ext.create('Ext.data.Store', {
    model: 'User2',
    proxy: {
        type: 'scripttag',
        url : 'https://spreadsheets.google.com/feeds/list/0AkSDPC69_vxUdHN2NnlLS3BMa1R3MWdhdzNEeVdzN3c/od6/public/values?alt=json',
        reader: {
                        type: 'json',
                        root: 'feed.entry'
                    }
           }
});


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

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' }
    ]
});


Ext.create('Ext.grid.Panel', {
    renderTo: Ext.getBody(),
//    store: userStore,
      store: store2,
    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'
        }
    ]
});