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