DevFest Building Scalable JavaScript Apps Slide Deck and Demos | .NET Zone – http://dotnet.dzone.com/articles/devfest-building-scalable-0?utm_medium=referral&utm_source=pulsenews
Advertisements
Category: ExtJS 4
ExtJS 4.0: Keeping a row at the top position in a GridPanel
I’ve had the need for a grid I am working on keep a row representing the user currently logged in as the top row in the grid. Mind you there is no paging on this grid. I am using a slightly outdated version of ExtJS, i.e 4.0. I tried listening to the viewready event on the grid itself or its view but those events were not firing. Seems the viewready event is only available on the view as of ExtJS 4.1. To alleviate this problem the next best thing available to me was the refresh event, which event though would be called many times over did the job of informing me of when the view rows are actually displayed, which the afterrender event does not provide.
I ended adding the following listener to my grid’s viewConfig definition:
viewConfig:{
loadingUseMsg:true,
listeners:{
refresh:{
fn:me.moveUserRowToTop,
scope:this
}
}
}
and the moveUserRowToTop function does this:
moveUserRowToTop:function(gridView, eOpts)
{
var store = gridView.getStore();
var currentUserRecordIndex = store.find('id',currentUser.get('id'))
if(currentUserRecordIndex > 0)
{
var currentUserRecord = store.getAt(currentUserRecordIndex);
store.removeAt(currentUserRecordIndex);
store.insert(0, [currentUserRecord]);
gridView.refresh();
}
}
So as you can see even though the event gets fired a lot depending on your grid usage, mine is average it will only move the row if it is present and at an index greater than 0, which is exactly my use case.
Hope it helps
An Overview of the new ExtJS 4 Javascript framework
Having worked with ExtJS 3.1, it’s a real pleasure to see them keep pushing forward today with the release of version 4. ExtJS is a great framework for doing specific types of UI, and it takes a minute to wrap your mind around the mainly class system configuration programming style required to get things rolling but once you do, you realize the genius and flexibility behind. So kudos to the Sencha team on this achievement. I’ve looked at the press release and notes and there is some improvement all around. The’ve added a lot more documentation than with previous releases. The class system has been extended to support dynamic loading, mixins and live dependency calculation. It is also completely sandboxed which for example allows you to run multiple versions of ExtJS within the same page. A major change, not that major if you have been following their work with the Sencha Touch mobile development framework, is the introduction of an MVC application architecture which should help streamline application development and faciliate transitions between team members. Welcomed as well is the addition of SDK tools with support for Javascript code optimization.
Topping the new feature list is the introduction of whole new plugin-free charting package (which Sench uses as an example of the sandboxing mentioned earlier by providing a chart written in ExtJS4 running fine within an ExtJS3 desktop) built on web technologies (SVg and VML). Also, the Grid, which i have used extensively in ExtJS3 is getting a makeover and has been modularized and is now extensible. Some of the extensions used in ExtJS3 and previous versions to enable for example column locking or cell editing are now obsolete as those features are available out of the box. Even better yet, the markup used to render the grid, which turned out to be quite a challenge for me as it was not 508 compatible, is now generated on demand which makes the need for pagination unecessary. TreeGrid has been integrated within the core code and supports all of the normal Grid functionality.
The Data package has been revamped and supports HTML5 localStorage and introduces the new Model class which allows you to accurately model your data layer. I’ve somehow played with its Touch counterpart, and will probably expand on it later, but it consists mainly of Fields, which represent the data fields, a Proxy, which is responsible for loading and saving data from a source, Associations which defines how Models relate to each other, and Validations for validating fields before a save. This very much reminds me of the CakePHP MVC architecture, which itself is based on the RoR model.
I would mention in passing improved support for theming, a new FocusManager class which makes it easier to enable keyboard navigation in your application, which should really help with with accessibility and 508 compliance.
Overall, I think that Sencha is maintaining a good direction with their product and as soon as I find a good project whose requirements fit the features offered by the framework, it will be on top of my list of possibilities. In the mean time as I am working on some mobile development with Sencha Touch, it will allow be to familiarize myself better with all the new features.
Check out the press release for yourself: http://www.sencha.com/blog/ext-js-4-final/
