Ask Cutter: Calling functions when paging the CF8 DataGrid
Yesterday, Mischa posted the following comment on my post on CF8 Ajax Grid: Renderers and Events:
Hi Steve, thank you for this example and your explanation! Do I understand correctly that init will fire once? Is there a way to fire init or any other function when the user pages through the grid using the page forward button? Thanks! Mischa.
Great question! Yes, to my knowledge the init() method is only called once. And, chances are, you really want it to only be called once. However, when the grid is initialized, and on every paging request, the data store runs it's load() method. The data store object, one of the underlying ExtJS pieces of the data grid, has a publicly available event that you can listen for, 'load'. I would go something like this.
grid = ColdFusion.Grid.getGridObject('reportsGrid');
cm = grid.getColumnModel();
ds = grid.getDataSource();
cm.setRenderer(2,redBold);
var gridHead = grid.getView().getHeaderPanel(true);
var tb = new Ext.Toolbar(gridHead, [{
text: 'Add Art',
handler : showRecWin
}]);
grid.reconfigure(ds,cm);
ds.on('load',function(){alert('it just loaded the Data Store')});
}
It's that last line that's the kicker. What I've done here is used the data store's on() method to assign an Event Listener to the 'load' event, with my own custom function. This will now kick off with whenever the data store calls the load() method, which happens on initialization, as well as each paging request (forwards or backwards).
There is a wealth of available knowledge, for interacting with these components, that is available in the ExtJS 1.1 API documentation. Looking at their online examples gives you an idea of how these components are built and interact, and knowing that can point you to the API documentation that will help you get the job done.
http://en.wikipedia.org/wiki/ExtJS
I have a cflayout type=tab. It is an order entry system. One of the tabs shows the shopping cart, allowing the user to delete lines and update quantities. The delete/update works fine and the result is properly shown in a cfwindow. My problem is that I need to reload the contents of the tab to reflect the changes the user made. I have tried:
myTabs = ColdFusion.Layout.getTabLayout("FulfillmentProcess");
myTabsa = Ext.get("tst"); // name of the tab
mytabmgr = myTabsa.getUpdateManager();
mytabmgr.setDefaultUrl("/internet/test/cftest7.cfm"); // up until here no errors and firebug shows that all variables are properly set
mytabmgr.refresh();
but that fails with the error: "CN has no properties". I also tried something like
myTabsa = myTabs.getTab("tst");
myTabsa.setUrl("/internet/test/cftest7.cfm");
myTabsa.refresh();
but that throws the same error. I can't find much info on that error, other than that for some reason the libraries cannot be loaded (which doesn't make sense). Thanks! Mischa.
If your dataset has 20 fields in it - can you set a default display of say 10 of them and have the other 10 set so the user can add them if they wish via clicking column headings and columns?
Also could you then allows users to save their layouts as a variable to a cookie or backed system so they next time the come in the datagrid would be set-up as they like it?
Thanks
For part two of your question, this is definitely possible with Ext 2.0's 'state' objects. I've only glanced over the documentation on this, but basically you can give any object a 'stateID' that you can then reference to set state points that can then later be referenced. Haven't gone too in depth myself, but it seems very reminiscent of state control in Flex.
first of all, keep doing what you're doing cuz its very very helpful!!!!
i just stumbled upon your post and its almost exactly what i'm looking for.
Just one question, have you tried to get the EXTJS loadMask property
to work with the CFGrid? It works with a EXTJS Grid but not cfgrid.
I want to be able to use the loading mask when the user clicks on the
arrows to page through the grid. The on.load method fires after the grid
has been populated. Do you know of another method that captures the
event before the on.load... ?
Honestly, I don't use the cfgrid for anything other than rapid prototyping. The minute I show it to a client they say 'Man, that looks fantastic! But, can you make it do...?' That's when I quote them custom development and go ahead and write it in ExtJS 2.2, which is faster, more robust, and (in my opinion) much easier to work with.
http://www.storecoders.com