Let me start off and like others say how great it is that the EXT.js library exists and is so rapidly evolving!
My only wish is that there be more examples that show the whole context of how to get things to work. Many times a code snippet doesn't help too much as its not clear what needs to be done before hand to create the environment for that snippet to work.
So here is my humble contribution, as a beginning ext.js user (and javascript noobie), of how I solved the problem of having a grid that gets automatically updated with server data at a periodic rate. Elements of this have been discussed in several forum posts but it took me a while to figure out how to put all the pieces together.
This example has the data sent from the Rails server to the Grid via JSON. I use the TaskMgr pattern that Jack described in an earlier post to this thread. Its not clear to me why the TaskMgr is undocumented though. It seems like a powerful and necessary feature!
I also tried using the startAutoRefresh that Animal described. It looks like that feature has been put into the Ext.data.Store in 1.1rc1 as it worked without a hitch just by using it without me extending Ext.data.Store myself.
I.E. I could use it just by saying:
legs_ds.startAutoRefresh(4,{url: zipdx_leg_url, start:0, limit:20});
instead of:
Ext.TaskMgr.start({
run: legs_ds.reload,
scope: legs_ds,
interval:4000,
args:[{params:{start:0, limit:20}, add:false}]
});
Its not clear if there is any advantage of one over the other. But neither are documented in the API docs.
One thing I couldn't get to work is filterBy. I think I don't understand where to call it. You can see in the following code, I call it after legs_ds has all been set up and loaded the first time and before starting the TaskMgr. It is only called once though.
So I would appreciate any general feedback on how to do auto grid updates better, and how to properly use the filterBy so that the filter is applied after each auto reload.
Thanks!
var legs_grid;
var legs_ds;
Ext.onReady(function(){
init_legs_grid();
});
function init_legs_grid() {
// Set up the data store so it gets its data from the
// server whose url is in the var zipdx_leg_url
legs_ds = new Ext.data.Store(
{
proxy: new Ext.data.HttpProxy({url: zipdx_leg_url}),
reader: new Ext.data.JsonReader(
{
root: 'Legs',
id: 'leg_uid'
},
[
{name: 'name'},
{name: 'hand_raised'},
{name: 'last_talked'},
{name: 'hard_mute'},
{name: 'soft_mute'},
{name: 'vote_value'},
{name: 'exit_time'},
{name: 'conf_room'}
]
),
}
);
// Set up the columnModel, nothing special here
var legs_cm = new Ext.grid.ColumnModel(
[{
id: 'leg_uid',
header: "Name",
dataIndex: 'name',
width: 150
},
{
header: "Hand",
dataIndex: 'hand_raised',
width: 50
},
{
header: "Talked",
dataIndex: 'last_talked',
width: 50,
},
{
header: "Mute",
dataIndex: 'soft_mute',
width: 50
},
{
header: "Vote",
dataIndex: 'vote_value',
width: 50,
},
{
header: "Conf",
dataIndex: 'conf_room',
width: 50
}]
);
legs_cm.defaultSortable = true;
// Create the grid using the previously defined data store and columnModel
legs_grid = new Ext.grid.Grid(
'legs_grid',
{
ds: legs_ds,
cm: legs_cm,
stripeRows: false
}
);
// Render the grid
legs_grid.render();
// Load the data for the first time. I guess I really don't need to do
// this since it will be loaded by the TaskMgr.
legs_ds.load({params:{start:0, limit:20}});
// Should not display rows where the exit_time column is > 0
// But it doesn't do it. Its only called once
// Does it need to go somewhere else or am I using
// the filterBy incorrectly?
//
// I got arround this in my app by just never sending the record
// from the server if exit_time > 0
legs_ds.filterBy(function(record){
if (record.get('exit_time') > 0) {
return false
}
else {
return true
}
});
// This will call legs_ds.reload every 4 seconds
// in the form legs_ds.reload({params:{start:0, limit:20}, add:false})
// I'm not sure if I really needed the add:false
Ext.TaskMgr.start({
run: legs_ds.reload,
scope: legs_ds,
interval:4000,
args:[{params:{start:0, limit:20}, add:false}]
});
// The following would do the equivilant as the above TaskMgr block:
// legs_ds.startAutoRefresh(4,{url: zipdx_leg_url, start:0, limit:20});
// I don't know if its exactly the same or which is prefered.
};
Here's the Rails Controller code that is relevant:
class LegsController < ApplicationController
# Default index function, it will auto-magically (by Rails) render
# the /app/views/legs/index.rhtml view that creates the original
# page with appropriate DOM elements for the grid
def index
end
# This is the function that gets called in response to the
# Ajax request from the legs_ds.load or legs_ds.reload from the client
def grid_data
@legs = Leg.find_all_by_conference_id params[:conference_id]
return_data = Hash.new()
# Walk thru all the @legs records and assemble an array of
# hashes for each leg. The hash contains the key values that map to the name values
# for the data store on the client side
return_data[:Legs] = @legs.collect do |u|
# This is so as to not send any records who have already exited
next if u.exit_time > 0
# Build the hash for he record
h = {}
u.attributes.each do |k, v|
h[k] = v
end
end
# Remove any nil elements in the array created by skipping exit_time > 0 records
# Took me a day to figure out that having an extra nil / null in the json record
# was causing the record to keep showing up in the grid!
return_data[:Legs].compact!
# This generates the response to the ajax request from the
# load/reload from the client
render :text => return_data.to_json, :layout => false
end
end
And here's the Rails View for the grid:
<!-- The update_page_tag is using RJS to send a raw javascript line to the
client to initialize the var that contains the path for the Ajax call that the
legs_ds.load / legs_ds.reload proxy uses
-->
<%= update_page_tag { |page| page << "var zipdx_leg_url = \"#{grid_data_legs_path}\";"} %>
<!--
This just includes the code shown above that implements my grid and data store, etc.
-->
<%= javascript_include_tag "legs_grid.js" %>
<!--
And this creates the DOM element for the grid
-->
<div id="legs_grid" style="border:1px solid #99bbe8; overflow:hidden; width:400px;"></div>
And for those curious how to do RESTful routes used to generate the named route "grid_data_legs_path" my entry in /config/routes.rb is:
ActionController::Routing::Routes.draw do |map|
map.resources :conferences do |conference|
# The :legs entry makes legs a nested route to conference
# /conferences/:conference_id/legs
conference.resources :legs, :collection => {:grid_data => :post}
end
# Rest of your routes.rb table would be here
end