Friday, June 12th, 2009
Category: Ext
There has be some interesting news in Ext land recently, so we wanted to do a quick roundup post to get it out there:
Ext JS 3.0 RC2 Release - Stable, Robust, and Enhanced
Some of the major fixes include:
- Items are now automatically laid out when they are first shown - rather than trying to calculate dimensions when they are hidden. This will solve a number of layout issues that occur across all components.
- The toolbar overflow has been improved to support all toolbar items, including CycleButtons and Buttons with toggle enabled (both grouping and otherwise).
- Issues with some animations in the Fx library have been corrected.
There are new examples that test out new features such as REST support and the DataWriter.
Ext GWT 2.0 Milestone 2 Released
Ext GWT 2.0 works with GWT 1.6. With GWT 1.6, the application deployment design was changed to make it easier to integrate your GWT application into an existing J2EE application. Ext GWT 2.0 has been updated to take advantage of the new GWT design.
Ext GWT 2.0 introduces several new UI Components and enhancements to many existing components.
Implementation Spotlight: Zipwhip and Ext JS
Abraham Elias sits down with the Zipwhip folks and shares a case study:
Zipwhip is a utility for text messaging from the web. Text messaging is the fastest growing communication medium, but is still locked inside the mobile phone. We aim to help bring text messaging everywhere.
To pull off our ambitious goals, we’re using just about every web 2.0 trick in the book—comet to send carrier delivery receipts back to the browser in real-time, Ajax for server communications, download-on-demand Javascript packages (with preloading), Flash for audio notifications, and many others.
Fab’s Boombox
Fab’s Boombox is a javascript library for a music player. It is built on top of Sound Manager 2 by Scott Schiller and the Ext 3.0 Core library.
weight loss dr s tx? Delivered Phentermine “yorkshire terriers weight loss heart worms”
Weight loss cookies weight loss surgery uk 200. Help Finding Phentermine elizabeth edwards weight loss
weight loss fitness nutrition Phentermine Alternatives weight loss body wrap
wicker hanging basket resin all-weather lined Inexspensive Phentermine moly resin
deadweight loss, Complete Phentermine Information From Drugs Com la weight loss review
weight loss program hospital richmond virginia Phentermine Discount weight loss clinics in florida
v mixer resin Cheap Herbal Phentermine v mixer resin
vegetarian weight loss diets Purepac Phentermine eat an afternoon snack weight loss
low carbohydrate weight loss plans Best Prices For Phentermine Diet Pill medical weight loss clinics
huntsman resin Dangers Of Phentermine health spa weight loss retreat,
lipotropic weight loss products Phentermine Doctor Columbus Ohio “buy phentermine using pay pal”
caffeine weight loss Phentermine Online Us Pharmacy vinyl ester resin?
biblical weight loss james d sweetwater, Phentermine Online Sales celexa and weight loss;
Calorie diet loss weight hypothyroidism and weight loss 888. Phentermine Blue No Prescription weight loss god’s way
range of motion weight loss? Phentermine Stories epoxy cast resin transformers
tony ferguson weight loss Generic Fastin chelated resin msds!
levothyroxine weight loss, Phentermine Diet Pills Di juice fasting weight loss?
37.5mg adipex Diet Tablets Phentermine severe weight loss
weight loss surgery cost Adipex D Order Online phenolic resin used in fireworks,
weight loss reflexology points; Ordering Adipex Online online phentermine 37.5mg prices
biblical weight loss james d sweetwater, Adipex Online No Script Needed morbid obesity weight loss medicine
weight loss dr s tx? Cheapest Price On Phentermine “yorkshire terriers weight loss heart worms”
Weight loss cookies weight loss surgery uk 200. Phentermine Online No Credit Card elizabeth edwards weight loss
weight loss fitness nutrition Phentermine No Prescription Us Pharmacy weight loss body wrap
wicker hanging basket resin all-weather lined Order Phentermine Online Without Prescription Cheap moly resin
Thursday, May 7th, 2009
Category: Ext
Two pieces of news related to Ext JS hit at the same time. Firstly, Ext JS in Action has gone into early access mode, and Jesus Garcia has been kind enough to give the Ajaxian community some exclusive chapters for free:
The Component Life Cycle
This article is taken from the book Ext JS in Action. As part of a primer chapter on the core fundamental concepts of the framework, this segment goes through each phase of the component life cycle, making sure that your custom widgets remain on track.
Data Submission and Loading
As part of a chapter on building and customizing input forms, this segment teaches you how to submit and load data into your newly created forms.
Manning has also given us the discount code “ajaxian35″ that gives you 35% off of any version of this book. So, if you like what you see in the excerpts, get it cheap!
Ext JS 3.0 RC1.1 Released
Aaron Conran has announced the latest release candidate for Ext JS 3.0:
There are many enhancements in Ext JS 3.0, too many to include in a single post. Some of the major features in Ext JS 3.0 are the splitting of Ext Core and Ext JS, Charting for visualizations, additional User Interface improvements, CRUD-like support with Ext.data.DataWriter, Remoting using Ext.Direct, CSS enhancements to make theming easier, and Accessibility improvements - Section 508 and ARIA support. We also fixed several browser issues for the latest Chrome and Safari releases and added IE8 support.
I always love looking at how nice the widgets look, like this:
Read the post for a detailed view on the changes.
Monday, April 6th, 2009
Category: Ext
We all witnessed the full licensing toil wrt ExtJS over the years. Now the team has released Ext Core 3.0 beta with an MIT license.
What is different?
Ext Core is a subset of the upcoming Ext JS 3.0 release optimized for speed & file size. Developers familiar with Ext JS can leverage their existing skillset to provide an enhanced user experience to their web pages.
- DOM manipulation and traversal
- CSS management
- Event handling
- Dimensions and Sizing
- AJAX and JSON Support
- Animations
In addition to providing cross-browser abstractions for the DOM, Ext Core also includes some of the most used and popular utilities from Ext JS.
- Classical Inheritance Class System
- Observable Class
- Markup generation and Templating
- Timed code execution
- URL encoding and decoding
It appears that you get the guys of Ext via MIT now, and if you want the component library, styles etc, that is when you go to ExtJS.
What do you think of the move?
Wednesday, February 25th, 2009
Category: Adobe, Bespin, Ext, JavaScript
As we’ve been exploring ways to take Bespin to the desktop, we’ve looked closely at some of the single-site browser technologies and their individual APIs to work out which platform we favor. As we went through this exercise, Adobe AIR really impressed us with the richness of its JavaScript APIs which wrap native APIs (as well as the accompanying documentation).
There’s no other competing JavaScript API that we’ve seen that comes close to this level of comprehensiveness (please correct us in the comments in we’re wrong).
We weren’t able to use AIR as its implementation of <canvas> is a bit old, but we’re excited to play with it as soon as we can.
Ext JS and Pixel Bender Explorer
We’re not the only ones who have been playing with AIR. Aaron Conran from the Ext JS crew blogged about Pixel Bender Explorer, an AIR app they wrote to demonstrate how to integrate Ext JS with AIR’s Pixel Bender technology that lets you apply pretty amazing effects to interfaces.
Pixel Bender can spruce up an Ext.air application by adding custom animations to wow your users. However, you should be cautious about the over-use of these filters throughout your application. For a good example of how effective these filters and animations can be to provide proper user feedback you should check Adobe’s signature sample BlackBookSafe. Each time an animation occurs it is clear why it happened, not a surprise to the user and adds character to the application. When using these animations you should strive for the same goal, not to surprise your user, but to impress them.
Check out the AIR application to see some pretty amazing fx.
Tuesday, November 25th, 2008
Category: Adobe, Ext
Aaron Conran has created a new set of AIR classes, as well as an example called ExtPlayer to show them off.
Ext.air.MusicPlayer
Ext 2.0.2 introduced an Ext.air.Sound class, which is useful for playing small sounds such as beep and chimes. In contrast, Ext.air.MusicPlayer is meant for long running sounds such as music and podcasts which you would never want multiple files playing at the same time. MusicPlayer supports all of the basic operations, stop, pause, play and skipTo along with supporting events. The MusicPlayer enables the developer to add music and podcasts to their AIR-enabled Ext application very quickly.
JAVASCRIPT:
-
-
var mp = new Ext.air.MusicPlayer();
-
mp.adjustVolume(0.5);
-
mp.play(url);
-
Ext.air.Notify
The new notification class allows you to notify your users with toast or growl-like messages from the operating system. This allows you to notify users that something important has occurred even when your application may not be visible. By displaying these notifications at the operating system level it is sure to get the users attention without being lost within a browser tab.
JAVASCRIPT:
-
-
var msg = 'Title: {0}<br />Artist: {1}';
-
var sample = new Ext.air.Notify({
-
msg: String.format(msg, id3info.songName, id3info.artist),
-
icon: '../famfamfam/music.png'
-
});
-
Ext.air.Clipboard
Ext.air.Clipboard allows you to interact with the system’s clipboard. Developers can determine if a particular format has data, set the data and get the data. At this point, this is largely a pass through to an existing class from Adobe air.Clipboard.generalClipboard. There may be enhancements or workarounds which Ext will add in the future including integration with drag and drop.
JAVASCRIPT:
-
-
Ext.air.Clipboard.setData('air:text', 'Sample set on the clipboard');
-
var data = Ext.air.Clipboard.getData('air:text');
-
Ext.air.VideoPanel
xt.air.VideoPanel enables you to embed flash based video while maintaining the same functionality as an Ext.Panel. VideoPanel’s can also take part in Ext layout management. This means that you can nest your Video’s in a border layout, add toolbars, buttons, just as you have become accustomed to. You just need to provide the recorded FLV to playback or provide a camera connected to the PC. You can even watch the video fullscreen in high definittion!
JAVASCRIPT:
-
-
var vp = new Ext.Viewport({
-
layout: 'fit',
-
items: [{
-
id: 'video',
-
xtype: 'videopanel'
-
}]
-
});
-
Ext.getCmp('video').loadVideo('sample.flv');
-
Thursday, November 20th, 2008
Category: Ajax, Cloud, Ext, Yahoo!, jQuery
YUI and Google
Most everyone knows that Google has really stepped up to the plate by helping many JavaScript library projects host their builds on the Google AJAX Libraries API. Apart from providing a central distribution point for these libraries, the bandwidth cost savings alone go a long way in helping frameworks service their users in a sustainable manner.
Google continues it's commitment to helping out by adding the Yahoo UI to the growing list of supported JavaScript libraries.
Thanks to Vadim Spivak at Google and Dion Almaer (now at Mozilla) for helping to make this additional option available to the YUI developer community. We love that Google is supporting web developers in this way — grabbing YUI files from Google’s global infrastructure is a fantastic option to have.
This is great news for YUI developers who now have a choice of linking directly to YUI via yui.yahooapis.com and ajax.googleapis.com. YUI team lead, Eric Miraglia, has a great write-up on the YUI blog about this and goes into detail on how the framework's users can take advantage of this new hosting option.
jQuery and Amazon CloudFront
With nearly 2.5 million requests per day to the jQuery website, the jQuery project team is constantly on the look out for ways to decrease hosting costs while still managing the growing number of requests for the site's resources. Originally leveraging Amazon S3 for many of their static pages, the project has now turned to Amazon's new CloudFront CDN. The change has allowed for jQuery pages to be globally hosted as opposed to being centrally located in Amazon's Seattle-based S3 hosting center.
In tests, John Resig, team lead for the jQuery project, noticed substantial performance gains based on the switch:
I ran a similar test here in Boston and even managed to see a large improvement. I was seeing latency of anywhere from 50-200ms on Amazon S3, but only a latency of 17-19ms with CloudFront.
What does all of this mean? It means that the jQuery site is going to load even faster than it does now. We already receive some excellent hosting from Media Temple but being able to off-load these static files to the fast-loading servers will only make for a better browsing experience.
In less than 24 hours the project had received almost 2.5 million requests for over 50GB of data. The only drawback is an increase in bandwidth costs but still substantially less than that of a traditional hosting plan. The jQuery project makes use of the Google AJAX API as well and recommends it as choice for linking to the jQuery and jQuery UI libraries.
Ext JS and CacheFly
The team at Ext JS has taken an interesting approach to CDN usage by extending their library build manager to allow users to host their own custom build on the CacheFly CDN.
The hosting is free and what makes it unique to something like the Google CDN is that it allows Ext developers a central access point for their own custom builds.
We are pleased to announce that Ext has partnered with CacheFly, a global content network, to provide free CDN hosting for the Ext JS framework. Cachefly’s globally distributed network and aggressive caching accelerate the delivery of web content like JavaScript and CSS, making for an even faster Ext experience.
Monday, November 10th, 2008
Category: Ext
Alex Moore wrote in to highlight a couple of developments in the Ext JS community. First, the Ext JS roadmap has been updated with goals for the 2009-targetted 3.0 release:
# All new lightweight, high-speed core base library
# Flash Charting API
# Ext.Direct - Remoting and data streaming/comet support
# Integrated client-server data binding/marshaling of updates
# ListView component
# Enhanced Button and Toolbar components
# ARIA/Section 508 accessibility improvements
# CSS updates for reset style scoping and easier custom theming
# Update the Ext event registration model
# Ext.Ajax enhancements
Second, Alex provided a link to a preview screencast of a new Ext JS visual developer tool, currently in early development:
4.5 rating from 136 votes
Tuesday, November 4th, 2008
Category: Ext, Testing
Darrell Meyer has written a detail article on testing Ext applications, both Ext JS and GXT versions:
Both Ext JS and Ext GWT applications can benefit from Selenium tests. In fact, with few exceptions, the tests created for one product should be interchangeable as both products produce the same DOM structure.
With GXT applications, GWT provides built in JUnit support. This provides a great way to test your application. However, these tests run only in host mode. Being able to test your compiled application in multiple browsers is important as some issues only appear within your compiled application.
In general, you create Selenium tests and then execute them in a variety of ways. This tutorial will demonstrate creating tests with Selenium IDE, a Firefox plugin, and creating tests within Java. Tests will be loaded and executed within the Selenium IDE, and Java JUnit tests will be executed using Selenium Remote Control.
Darrell walks through Selenium IDE and shows creating a test, and then Selenium Remote Control, which runs tests in the various browsers:
Selenium IDE provides a great way to create your tests and execute them in Firefox. Tests can only be run by manually opening Firefox and executing tests. What if you want to run you want to automate your tests and run them in other browsers? This is where Selenium Remote Control comes into play.
From the Selenium website: “Selenium Remote Control (RC) is a test tool that allows you to write automated web application UI tests in any programming language against any HTTP website using any mainstream JavaScript-enabled browser. Selenium RC comes in two parts. 1. A server which automatically launches and kills browsers, and acts as a HTTP proxy for web requests from them. 2. Client libraries for your favorite computer language.”
Monday, October 13th, 2008
Category: Ext
Aaron Conran has developed a nice Ext extension to tie that world to the Google Visualization API:
Working with different API’s can present hurdles as we attempt to massage the same data in two different data structures - one for a grid and another for a pie chart. To address this specific challenge, I developed a short user extension Ext.ux.GVisualizationPanel enabling users to integrate visualizations into Ext JS applications without concern for these issues. The GVisualizationPanel adapts any Ext data Store into the google’s format and enables you to embed any type of visualization into a panel.
He then shows some examples, such as this intensity map:
JAVASCRIPT:
-
-
var countryStore = new Ext.data.SimpleStore({
-
fields: [{
-
name: 'Country',
-
type: 'string'
-
},{
-
-
name: 'pop',
-
type: 'int'
-
},{
-
name: 'area',
-
type: 'int'
-
}],
-
data: [
-
['CN', 1324, 9640821],
-
['IN', 1134, 3287263],
-
['US', 304, 9629091],
-
['ID', 232, 1904569],
-
['BR', 187, 8514877]
-
]
-
});
-
var intensityMap = new Ext.ux.GVisualizationPanel({
-
id: 'intensityMap',
-
visualizationPkg: 'intensitymap',
-
title: 'Intensity Map Sample',
-
store: countryStore,
-
columns: ['Country',{
-
dataIndex: 'pop',
-
label: 'Population (mil)'
-
},{
-
dataIndex: 'area',
-
label: 'Area (km2)'
-
}]
-
});
-
3.5 rating from 203 votes
Wednesday, September 24th, 2008
Category: Ext, Usability
I am a strong believe in making the keyboard a first class citizen for your applications, including on the Web. Thus, I was interested to read how Ext JS has keyboard handling that ties into the entire system:
Ext.KeyMap
Ext provides several components that support keyboard navigation out of the box such as GridPanel, ComboBox, and TreePanel. To implement custom keyboard handling, developers can use the Ext.KeyMap and Ext.KeyNav classes to attach keyboard bindings to any component or element they wish.
The first set of keys we wanted to handle was all of the Function keys (F1-12). While most browsers reserve some/all of these keys, with some ext-pertise, we are able to override the default function if need be for our application. The application we were working with was completely dynamic and server driven, so we really couldn’t define all of the handlers ahead of time. This led to us dynamically building an array of key handler configuration objects and passing them all through to our new Ext.KeyMap object.
JAVASCRIPT:
-
-
var keys = [];
-
for(var i = 0;i <buttons.length;i++) {
-
var btn = buttons[i];
-
// fkey property contains a string referencing the Ext constants (ie: Ext.EventObject.F1)
-
var fk = eval(button.fkey);
-
btn.handler = this.handleKey.createDelegate(this, [fk]);
-
-
keys.push({
-
key: fk,
-
handler: this.handleKey.createDelegate(this, [fk]),
-
stopEvent: true,
-
scope: this
-
});
-
}
-
Ext.KeyNav
The next set of key handling added was some additions to the grid keyboard navigation. The GridPanel has built in key navigation from the RowSelectionModel that it creates. Check out this grid example and select a row, you can then use the arrow keys to move up/down and even hold shift and press down to select a range of rows. We added a simple way to navigate through a large paged data set by extending GrindPanel. The PagingToolbar provides keyboard handling once you’ve focused within the built-in TextField, but we wanted to allow the users to just hit ‘page down’ or ‘end’ when focus was anywhere within the GridPanel and ensure it functions as expected.
JAVASCRIPT:
-
-
MyGrid = Ext.extend(Ext.grid.GridPanel,{
-
...
-
afterRender : function() {
-
MyGrid.superclass.afterRender.call(this);
-
-
this.nav = new Ext.KeyNav(this.getEl(),{
-
pageDown: this.pagingNav.createDelegate(this,['next']),
-
pageUp: this.pagingNav.createDelegate(this, ['prev']),
-
home: this.pagingNav.createDelegate(this,['first']),
-
end: this.pagingNav.createDelegate(this,['last']),
-
scope: this
-
});
-
},
-
-
pagingNav: function(page) {
-
var pt = this.getBottomToolbar();
-
if (!pt[page].disabled) {
-
pt.onClick(page);
-
}
-
},
-
...
-
});
-
Thursday, September 18th, 2008
Category: Ext, GWT
Darrell Meyer has announced the release of Ext GWT 1.1 which is said to "shortens the feature set gap between Ext JS."
New Features
The Grid component wraps the Ext JS grid, and it includes support for grid plugins which fit into component lifecycles. You can also use a subclass, EditableGrid which.... allows you to edit content on the fly.
Auto complete has been added to the combo boxes a la Google Suggest.
Portal is a custom layout container that uses a multi-column layout on contains Portlets. Each Porlet can be drag and dropped to change order or move to another column. Each Portlet can contain any content and supports icons to expand / collapse, close, etc.
The desktop mimics the behavior of the operating system look at feel. It is now possible to create multi-window applications with support for a task bar and start menu. Windows support normal, maximize, and minimize states. The start menu is a custom menu that allows new menu items. In addition, there is support for a “task” area for adding additional items.
Java Bean Support with BeanModel
The Ext GWT Store and Binder API work with ModelData instances. The primary goal of ModelData is to provide a type of “introspection” as GWT does not allow runtime inspection of Java objects. You can query ModelData for a list of properties it contains, and these properties can be retrieved and set using the parameter name with the get and set methods.
Although this approach works, it forces you to either implement the ModelData interface in your Java Beans or extend the Ext GWT base classes that implement the ModelData interface. What is missing is a way to use your Java Beans as is, without having to extend the Ext GWT base classes or implement an “invasive” interface.
There are also new examples:
- Forum search is an example of a combo box, using a custom XTemplate, and remote data. The data can be paged with built-in support for a paging toolbar.
- Image Chooser shows loading a ListView in a Window. Each item has a linked details view, and the ListView supports custom sorting and filtering.
- This example shows a Dialog using an AnchorLayout to “anchor” the form fields to the dialog dimensions. When resized, the fields will adjust their size to match the dimensions of the dialog.
Wednesday, August 6th, 2008
Category: Ext
Ext 2.2 has been released, and it has features to complement the usual maintenance bug fixes and performance updates (Ext now works better in Firefox 3).
New features include:
CheckboxGroup / RadioGroup
Technically, while the individual Checkbox and Radio controls are not new, they may as well be, considering the overhaul they have had in this release. Gone are the ugly standard browser input controls, now replaced by attractive, visually-consistent Ext-ified versions (a long-overdue improvement).
In addition to that, we’ve added group controls for both that support complex layouts with just a config option or two. Previously in order to accomplish similar grouping layouts you would have had to create a container with a ColumnLayout and manually place your controls across multiple column configs.
History
Another component that has been missing in Ext is a browser history utility to enable history stack navigation within your single-page Ext application. The new Ext.History singleton makes it extremely easy to do exactly that, and it uses an event-based API to notify you when the browser history as changed.
MultiSelect / ItemSelector
These two components were contributed to Ext by community member TJ Stuart (thanks TJ). The MultiSelect is a traditional list control that allows for selecting multiple list items, and the ItemSelector combines two MultiSelects into a more sophisticated control that includes drag-and-drop list selection and bulk selection and deselection among other features.
FileUploadField
This is an official extension provided as a sample for implementing a useful form component. Not everyone needs a form upload component, but if you do, you can’t live without it. This control is fully styled and has an API consistent with other Ext form controls. It also supports both Text+Button (read-only text) and Button-only modes, and can participate fully in form layouts.
XmlTreeLoader
This official extension provides a great demonstration of extending an existing Ext component to provide functionality that you need in your own application. Again, loading an XML document into a tree is not needed by everyone, but if you do need something similar, this should be a great demo.
GMapPanel
This extension was originally written up as a demo for one of our previous blog posts. However, it proved to be such a hit with the community that we transformed it into an official extension. This is another useful example of extending a standard Ext component, in this case to interface with an external API.
3.8 rating from 110 votes
Monday, August 4th, 2008
Category: Ext, Python
Are you an ExtJS and Django user? If so, you will want to check out this article by Matt of Tangible Worldwide on Using ExtJS's Grid Filtering with Django.
He goes into detail on how to tweak the grid filtering system that is aimed at PHP, and getting it to work in a way that allows you to write this Django code:
PYTHON:
-
-
# take a ContentType model name (say, from the URL)
-
# and create a QuerySet
-
ctype = ContentType.objects.get(model=ctype_model)
-
model_class = ctype.model_class()
-
obj_qs = model_class.objects.filter()
-
-
# 'q' is the set of POSTed filtering parameters
-
filter_params = request.POST.get('q', '[]')
-
-
# decode the filtering parameters w/ simplejson
-
filter_params = simplejson.loads(filter_params)
-
-
# apply the filtering params
-
filtered_qs = get_queryset_from_ext_filters(obj_qs, filter_params)
-
ExtJS 2.1 saw inclusion of the popular (at least in my world) user extension for AJAX filtering of data by grid columns. As useful as this is (provided you can abide by the GPL or paid licensing options), the filter parameters serialized as a PHP array, which is not particularly useful for other languages. With a quick modification to the grid filtering serialization method and a helper function for Django, we can rewire the system to send a JSON string that Django can use to directly apply filtering to a QuerySet. I've found that most clients love having this sort of command and flexibility over their data -- especially the kind that don't necessarily realize that this visualization and control exists. I like that. Additionally, the amount of work and code required is minimal, and the code both reusable and straight-forward. I like that, too.
There are 4 steps to this process:
- Modify the serialization method in GridFilters.js
- Set up the helper function that will process the QuerySet with the grid filter parameters
- Slightly customize your models (see below)
- Add (simple) helper code to your Ajax view
Wednesday, July 16th, 2008
Category: Ext
Many developers really like the live scrolling functionality popularized by DZone. As you scroll down the page, a XHR call is made which pulls back data and instantly refreshes and allows you to continue to scroll down almost endlessly. Aaron Conran has built a widget for the Ext JS library which provides this functionality in an easy-to-use user extension:
A LiveDataPanel can enhance your site by deferring the load of additional content until the user is ready to see it. Markup will never be generated unless it’s needed and therefore the browsers DOM will have a smaller footprint. It’s important to remember to use this component where approriate, because it will load every record into memory and render that record’s markup to the browser. By building upon Ext’s foundation classes, we were able to create a useful component without having to do a lot of the lower level work.
The extension is easy to call and very configurable. The demo code looks like this:
JAVASCRIPT:
-
-
// Creating the panel is easy
-
var p = new Ext.ux.LiveDataPanel({
-
frame: true,
-
title: 'Latest Blog Entries',
-
height: 400,
-
width: 590,
-
itemSelector: '.entry',
-
tpl: Ext.XTemplate.from('tplBlog'),
-
store: myStore
-
});
-
p.render('entry-list');
-
Tuesday, July 8th, 2008
Category: Ext, GWT
Darrell Meyer has announced Ext GWT 1.0. This is the first fully stable release of the product and it includes a lot of goodies including:
- Documentation: new screencasts of the various steps
- GWT 1.5 support: "Ext GWT is a 100% native GWT application written in Java. Ext GWT does not wrap any 3rd party JavaScript and does not use any external JavaScript files. Ext GWT fully leverages the GWT API including the widget lifecylce, events, listeners, messaging, and RPC."
- "Performance was a high priority item for the Ext GWT 1.0 release. Many changes were made since the first beta releases. Initial rendering times are quicker and the new layout code reacts quicker to window resizing. Improvements can easily be seen in the Explorer demo."
- Advanced Form Layouts
- Improved Data Loading, Store, Binder, and Field API
Looks like a very solid release indeed. Congrats to the team.
Wednesday, June 11th, 2008
Category: Aptana, Ext
When Aptana released Jaxer, it really excited the community because you could now leverage your client-side skills on the server end of things. Rich Waters of Ext JS talks about how to leverage Ext JS on the server via Jaxer. The code created by Rich creates a Ext JaxerStore which allows you to run queries and directly put them into a Ext Store. This has the benefit of leveraging the same Ext language syntax you've become accustomed to for server-side processing by allowing Jaxer to wrap client and server-side communications up allowing either synchronous or asynchronous calls between the client and server.
I asked Rich why would developers do this versus doing a simple Ajax call to a template sitting on a server:
The template bit lets you generate the html before the page is served up so that no extra client side calls are necessary. I think the Ext template system is really slick and easier than even a lot of other existing server side templating systems. More or less it was also just an example to get people thinking about what could be done now that Ext can be run server-side.
The code snippet allows you to make the calls to Jaxer very easily:
JAVASCRIPT:
-
-
Ext.onReady(function() {
-
var store = new Ext.data.JaxerStore({
-
table : 'demo',
-
fields : [
-
{name : 'name'},
-
{name : 'phone'},
-
{name : 'email'}
-
],
-
readerConfig : {
-
sortInfo : {
-
sort : 'name',
-
dir : 'asc'
-
}
-
}
-
});
-
-
// create the Grid
-
var grid = new Ext.grid.GridPanel({
-
store : store,
-
columns : [
-
{header : "Name", sortable : true, dataIndex : 'name'},
-
{header : "Phone #", sortable : true, dataIndex : 'phone'},
-
{header : "Email", sortable : true, dataIndex : 'email'}
-
],
-
viewConfig : {
-
forceFit : true
-
},
-
stripeRows : true,
-
height : 350,
-
width : 680,
-
title : 'Jaxer Demo Grid',
-
renderTo : Ext.getBody()
-
});
-
});
-
which would then populate a grid control and render it accordingly.
The source code to this new functionality can be downloaded here.
Next Page »
