# How it works

**URL:** <https://www.ruby-forum.com/t/how-it-works/175982>\
**Category:** Rails\
**Created:** [September 23, 2009, 11:22am UTC](https://www.ruby-forum.com/t/how-it-works/175982 "2009-09-23T11:22:03Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![newb](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/n/2acd7d/32.png) [@newb](https://www.ruby-forum.com/u/newb)\
**Post date:** [September 23, 2009, 11:22am UTC](https://www.ruby-forum.com/t/how-it-works/175982/1 "2009-09-23T11:22:03Z")

</div>

def list  
#-------

# gets params[:start] from account-grid.js

start = (params[:start] || 0).to\_i

# gets params[:limit] from account-grid.js

#size variable has count per page  
size = (params[:limit] || 20).to\_i

# page variable gives current page number

page = ((start/size).to\_i) + 1

@accounts = Account.find(:all,:page =\> {:current =\> page,:size =\> 5})

respond\_to do |format|

```
#render html format
format.html

#render xml format
format.xml

```

end

end

//This function is to list Accounts in the grid

Ext.onReady(function(){

```
// create the Data Store
var accountStore = new Ext.data.Store({

    // load using HTTP
    proxy: new Ext.data.HttpProxy({

        url: '/accounts/list?format=xml',
        method: 'GET'
    }),

    // the return will be XML, so lets set up a reader
    reader: new Ext.data.XmlReader({
           // records will have a "Person" tag
           record: 'Account',
           id: 'id',
           totalRecords: 'TotalResult'
       }, [
           // set up the fields mapping into the xml doc
           // The first needs mapping, the others are very basic
          'id','CompanyName'
       ])
});

 // create the PagingBar for Pagination
 var pagingBar = new Ext.PagingToolbar({
    pageSize: 5,
    store: accountStore,
    displayInfo: true,
    displayMsg: 'Displaying topics {0} - {1} of {2}',
    emptyMsg: "No topics to display"

});

// create the grid
var accountGrid = new Ext.grid.GridPanel({
    store: accountStore,
    columns: [
        {header: "SNo", width: 35, dataIndex: 'id', sortable: true},
        {header: "Company Name", width: 180, dataIndex:

```

‘CompanyName’, sortable: true}  
],

```
    // customize view config
    viewConfig: {
        forceFit:true,
        enableRowBody:true,
        showPreview:true

    },

    renderTo:'account_grid',
    width:600,
    height:200,
    buttons: [{
        text: 'Add Account',
        handler: function() {
            window.location.href = '/accounts/create';
        }
    }],
    // paging bar on the bottom
    bbar: pagingBar
});

accountStore.load({params:{start: 0, limit: 5}});
accountGrid.render();

```

});

when i excecute the above code it correctly loads the grid…  
could u pls help me to understand what happen in the above code.  
which goes first whether controller code or js…  
Thanks in advance

---

<div class="post-metadata">

**Author:** ![newb](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/n/2acd7d/32.png) [@newb](https://www.ruby-forum.com/u/newb)\
**Post date:** [September 23, 2009, 11:33am UTC](https://www.ruby-forum.com/t/how-it-works/175982/2 "2009-09-23T11:33:59Z")

</div>

2009/9/23 Newb N. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid):

> Â Â #render xml format
> 
> Â Â Â Â Â Â Â ‘id’,‘CompanyName’
> 
> Â Â Â Â ],  
> Â Â Â Â width:600,
> 
> when i excecute the above code it correctly loads the grid…  
> could u pls help me to understand what happen in the above code.  
> which goes first whether controller code or js…

Have you had a look at the rails guides at  
[http://guides.rubyonrails.org/](http://guides.rubyonrails.org/) ? Particularly the getting started  
guide. The railscasts are good also.

Colin