Thanks. Extending my knowledge in the implementation of Extjs4 with Spring and Hibernate I am following this tutorial - http://loianegroner.com/2010/09/extj...agrid-example/. From the start I am a bit confused about how the files in the projects are placed. I am trying to figure out how to create the proxy file, and the rest of the files mentioned in the project. As an example, from the documentation, the directory structure of Extjs4 in an Eclipse web-app project is like this:
---WebContent
---app
---model
---view
---controller
---store
---data
---.json files
---extjs4
---resources
---src

Code:
// The new DataWriter component.

   var writer = new Ext.data.JsonWriter({
       encode: true,
       writeAllFields: true
   });
Code:
var Contact = Ext.data.Record.create([

{name: 'id'},
{
    name: 'name',
    type: 'string'
}, {
    name: 'phone',
    type: 'string'
}, {
    name: 'email',
    type: 'string'
}]);
Code:
var proxy = new Ext.data.HttpProxy({

    api: {
        read : 'contact/view.action',
        create : 'contact/create.action',
        update: 'contact/update.action',
        destroy: 'contact/delete.action'
    }
});
Code:
var reader = new Ext.data.JsonReader({

    totalProperty: 'total',
    successProperty: 'success',
    idProperty: 'id',
    root: 'data',
    messageProperty: 'message'  // <-- New "messageProperty" meta-data
},
Contact);
Code:
var editor = new Ext.ux.grid.RowEditor({
    saveText: 'Update'
});
 
// create grid
var grid = new Ext.grid.GridPanel({
    store: store,
    columns: [
        {header: "NAME",
         width: 170,
         sortable: true,
         dataIndex: 'name',
         editor: {
            xtype: 'textfield',
            allowBlank: false
        }},
        {header: "PHONE #",
         width: 150,
         sortable: true,
         dataIndex: 'phone',
         editor: {
             xtype: 'textfield',
             allowBlank: false
        }},
        {header: "EMAIL",
         width: 150,
         sortable: true,
         dataIndex: 'email',
         editor: {
            xtype: 'textfield',
            allowBlank: false
        }})}
    ],
    plugins: [editor],
    title: 'My Contacts',
    height: 300,
    width:610,
    frame:true,
    tbar: [{
        iconCls: 'icon-user-add',
        text: 'Add Contact',
        handler: function(){
            var e = new Contact({
                name: 'New Guy',
                phone: '(000) 000-0000',
                email: 'new@loianetest.com'
            });
            editor.stopEditing();
            store.insert(0, e);
            grid.getView().refresh();
            grid.getSelectionModel().selectRow(0);
            editor.startEditing(0);
        }
    },{
        iconCls: 'icon-user-delete',
        text: 'Remove Contact',
        handler: function(){
            editor.stopEditing();
            var s = grid.getSelectionModel().getSelections();
            for(var i = 0, r; r = s[i]; i++){
                store.remove(r);
            }
        }
    },{
        iconCls: 'icon-user-save',
        text: 'Save All Modifications',
        handler: function(){
            store.save();
        }
    }]
});
I downloaded the code and browsed through the directory but could not find the data folder. If it is just a convention to use this structure and not a rule please let me know. If it is, my questions are these:
1. Where and what name is the writer, reader and proxy file named?
2. I saw like it is created in the store, but the code in the one downloaded is different from the one in the documentation I referenced above.