and tags—is registered. This is clearly not a very practical solution, and so we must take a different approach.

Dealing with drag data

We need to deal with this issue on a slightly higher level. Rather than dealing with each individual child node, we will look at overriding the default behavior of Ext.dd.DragZone in order to achieve our goal. The getDragData method of the DragZone class is called whenever a mousedown occurs within the DragZone container. This means that we can use it to listen for the start of a drag event no matter which child node is clicked. In our circumstances, we'll examine the target of the mousedown event and navigate up through the DOM until we find the person node that represents the item we really want to use in our drag operation. So the code for setting up our DragZone would look like this: new Ext.dd.DragZone(personView.getEl(), { getDragData : function(e) { var container = e.getTarget('div.person', 5, true); return { ddel : container } } }); [ 267 ]

Drag-and-drop

As mentioned earlier, we get the person container node from the mousedown event, and we use it to populate the ddel property of the object that is returned from getDragData. Earlier in the chapter, when dealing with dropping a node onto a DropZone, we looked at the dragData.ddel property to find the node that was being dropped. This is the same data, but from the other point of view—this is how it gets populated.

Now we've got our DataView working as we expected, but there are a couple of interesting additions that we can make at this point. Let's examine those now.

Proxies and metadata

When we specified the ddel property in getDragData, we were essentially populating the proxy that was going to follow the mouse pointer as we dragged our node around. This is a useful consideration. Consider the following code: return { ddel : container.down('h1').dom }

Now, instead of our proxy appearing as the full node, it'll only appear as the

tag within our node. When we've talked about proxies before, we've mentioned that dragging a cut-down version of the full item can be a very useful approach, and this is how it can be achieved when using DragZones. We also have the option of passing extra data into the drag by using other properties of dragData. In fact, any information that we add to the object will be available when the item is dropped. Here's what we're going to do in our example code: return { ddel : container.down('h1').dom, record : personView.getRecord(container.dom) } [ 268 ]

Chapter 12

We can actually pass the record associated with the item that was clicked as a data item in our drag operation. This is going to come in very handy when we come to populate our FormPanel.

Dropping in the details

This is the other side of the coin—handling the drop action that is triggered when we release a dragged node from our DataView. The concepts behind this will be familiar from our previous examples. We need to create a DropTarget from the FormPanel and then override its notifyDrop method to dictate what will happen when the drop action occurs. Let's take a look at the code for our FormPanel: var detailForm = new Ext.form.FormPanel({ width: 250, height: 80, defaultType: 'textfield', items: [ { fieldLabel: 'Name', name:'name' }, { fieldLabel: 'City', name:'city' }, { fieldLabel: 'Country', name:'country' } ] });

This is all pretty standard stuff, but note that the names of the form fields match up with the names of the fields in our data record that was used to populate the drag node. We can now set up the DropTarget: new Ext.dd.DropTarget(detailForm.body.dom, { notifyDrop : function(source, e, data){ var record = source.dragData.record; detailForm.getForm().loadRecord(record); return true; } });

Note that we can grab the full record straight from the dragData on the drag source, and load it into the form. That's the strength of being able to put any data we like into dragData, and here it shows how we can populate the form with a minimum amount of code.

[ 269 ]

Drag-and-drop

Drag-drop groups

We started off our tour of Ext.dd by looking at how individual nodes could be moved around the screen and placed in designated containers. From there, we described the methods used to enable dragging for many nodes at once, and how these could be dropped within containers with child nodes. When you're dealing with lots of draggable elements, there's a third facility that can be used to make sure that your nodes behave in the way you'd expect: drag-drop groups. DragSource, DragZone, DropTarget, and DropZone accept the configuration option ddGroup that in turn accepts a string identifier indicating which group you'd like to assign your instance to. But what does this configuration option actually do, in practical terms, and what new features does it provide for your applications? Well, strictly speaking, it means that a drag-drop class instance will only be able to interact with other drag-drop instances in the same group, but that's a rather dry way of explaining it. Let's look at a real-world use case.

Nursing our drag-drop to health

Imagine that you have a screen in your application with four separate containers, each of which is specified as both DragZone and DropZone. Without drag-drop groups, the default behavior here would be that the user could drag from any one of these defined areas to any of the other three. In many cases, you're likely to want to limit these kinds of interactions. Let's say that containers one and two represent today and tomorrow's appointments for a doctor, and containers three and four are appointments for a nurse. Appointments for the doctor can't be transferred to the nurse, and ones for the nurse can't be given to the doctor. So the application needs to implement this restriction. We could do this very easily by specifying a ddGroup of "doctor" for containers one and two, and ddGroup of "nurse" for containers three and four. This would mean that an attempt to drag a nurse appointment into a doctor container would fail, as the nurse drag-drop objects are not allowed to interact with items outside their own drag-and-drop groups. This kind of advanced functionality becomes essential when you're writing applications that make extensive use of drag-and-drop. We don't need to write code to check whether the drop target is correct, as drag-drop groups take care of this for us.

[ 270 ]

Chapter 12

It's all in the details

We've had a good overview of the main classes within the Ext.dd package now. So it's time to start looking at some of the interesting configuration options, properties, methods, and events that allow us to tweak the behavior of the drag-and-drop classes.

Configuration

The "big four" of Ext.dd—DragSource, DragZone, DropTarget, and DropZone—are notable within the Ext JS framework for being important classes that don't really offer much in the way of configuration options. That's because, despite being important, they're all relatively simple to set up: designate a linked node and away you go. That said, we've already covered one option that all of these classes support—ddGroup—and there are a couple more common options available. The dropAllowed and dropNotAllowed options are both strings that dictate the CSS classes to be passed to the drag source when the respective conditions are true. For example, if the item is hovering over an invalid drop target, then the class specified by dropNotAllowed will be used. DropTarget and DropZone have the overClass option in common. This allows you to change the CSS class applied to the drop target element when a drag source moves over it. This is blank by default, and so is a useful method of augmenting the graphical cue provided by the status proxy.

It's all under control

The drag-and-drop support within Ext JS is structured a little differently than the rest of the framework. Typically, to add in your own behavior, you will handle events that a class fires off, as we've seen when discussing the TreePanel and other components. With Ext.dd, there are very few events to handle. Instead, a number of abstract methods are provided for the developer to override. Ext JS describes these methods as "abstract methods", a concept rarely seen in Javascript as it is not strictly supported. Here, the term simply refers to an empty implementation that needs to be replaced by the developer in order to achieve the desired functionality.

We've already seen how the notifyDrop and onNodeDrop methods for DropZone need to be overridden to complete the drop process, but there are plenty of other abstract methods that we can hook in to. In fact, even for the drop action, there are a number of similar-sounding methods available for use in certain situations: [ 271 ]

Drag-and-drop

• • •

notifyDrop onContainerDrop onNodeDrop

On the face of it, all of these could apply to the same scenario: handling the action performed when an item is dropped on a target. The trick is that the first three are actually related. On DropZone, notifyDrop isn't actually abstract; instead, it simply establishes whether onNodeDrop or onContainerDrop will be called. It's these two methods that need to be overridden if you want to perform a drop action.

Managing our movement

The Ext.dd package includes a DragDropMgr class, which is generally intended for use as an internal helper for the framework itself. However, there are a few interesting points to note about the class. Let's briefly review the way that this manager can fit into your own applications.

Global properties

As DragDropMgr is used to track all of the drag-and-drop manipulations that occur, we can use it to globally change the way those manipulations are handled. For example, the clickPixelThresh property can be changed to set the minimum number of pixels that the mouse needs to move before a drag is initiated. This can be useful in situations where your drag targets also accept a click event—you may wish to increase this value to prevent accidental drags. Similarly, the clickTimeThresh, normally set to 1000 milliseconds or 1 second, dictates the delay time between clicking an element and starting the drag. This could be decreased to make the start of the process seem more responsive, or increased if it's interfering with other actions. We can also fine-tune the way in which the drop action is handled. By default, the drag-and-drop mode is set to POINT, where the position of the mouse pointer is used to determine whether the object being dragged is within the drop target. We can change this behavior to INTERSECT mode: Ext.dd.DragDropMgr.mode = Ext.dd.DragDropMgr.INTERSECT;

This means that the edges of the drag source and drop target are used to establish interaction. If the two items overlap them, then the drop target is considered valid. This can be handy if the items you wish to drag are going to be large as it could be easier for the user to simply make the edges touch rather than move the mouse pointer directly over the target. [ 272 ]

Chapter 12

These properties are only likely to be used in edge cases, but would come in handy as part of our toolkit.

Scroll management

One very slick part of the drag-and-drop puzzle that can be handled automatically is scrolling a container while trying to drag an item into an off-screen region. The Ext.dd.ScrollManager means that you can either drag items off bounds from the document body, or cause an element with scrollbars to shift as you drag the elements within it. Setting this facility up is pretty simple: Ext.dd.ScrollManager.register('myContainer');

With this code, we've set up the myContainer element to be scroll-managed. Note that the scrolls occur in short bursts as you reach the edges of the container. We can tweak the behavior of the scroll as well, by setting the ddScrollConfig of the element to be registered. var el = Ext.get('myContainer'); el.ddScrollConfig = {}; Ext.dd.ScrollManager.register(el);

The ddScrollConfig consists of a configuration object containing a number of options. The bursts of scrolling are animated by default, and it can be disabled by setting animate to false, or can have its duration changed by setting animDuration to a value other than the default of 0.4 seconds: el.ddScrollConfig = { animDuration: 0.2 // anim takes 0.2 seconds to complete };

We can increase the frequency of scroll bursts by setting the frequency to a millisecond value, and change the amount of pixels by which to scroll by using the increment option. We can also control the width of the trigger area on both the horizontal and the vertical sides by using the vthresh and hthresh options, which are both specified as pixel numbers. Although the Ext.dd.ScrollManager performs a simple purpose and does so with very little code, the utility of this class should not be underestimated. Setting up this functionality manually would be taxing, and it is such a crucial part of drag-and-drop that without ScrollManager, we'd be hand-coding it in every application we write. So while Ext.dd.ScrollManager is a fairly simple utility class, it's the one that makes many common drag-and-drop scenarios a great deal easier to develop. [ 273 ]

Drag-and-drop

Dragging within components

As we've seen previously, there are a couple of components that offer drag-and-drop support completely out of the box. It's important to remember that these features exist. Given our new drag-and-drop knowledge, we could implement them from scratch. Instead, we'll quickly review the main Ext components that have this facility baked in.

TreePanel

The default Ext.TreePanel not only enables drag-and-drop via the provided configuration option, but exposes a number of events, such as beforenodedrop, that allow us to hook our own functionality into the component.

By using AJAX requests, we can persist the results of our drag-and-drop actions to the server for retrieval later. If you're using multiple TreePanel instances, you can even drag-and-drop between them, and restrict the direction of movement using the enableDrag and enableDrop configuration options.

GridPanel

The Ext.grid.GridPanel also provides drag-and-drop support out of the box with the use of the enableDragDrop configuration option. Setting this to true will allow you to begin dragging rows out of your grid. But you would still need to provide a custom DropTarget for the row destination. This could even be another GridPanel, but it means that you'll have to leverage the knowledge you gained earlier in this chapter to really put grid drag-and-drop to good use.

[ 274 ]

Chapter 12

The custom Ext.grid.DragZone is also provided to facilitate these actions, giving you a shortcut to both the data being dragged and the grid that holds it. This class means that there's a bit less heavy lifting required when you want to drag rows within your application.

Using it in the real world

There are many cases where drag-and-drop is actually a barrier for the user—such as when adding an action that takes longer to complete than the more standard approach. Why drag-and-drop something when clicking it could be just as effective? The visual cue of the drag-and-drop status proxy may look great in a screenshot, but in a real-world situation there may be a more logical approach. That said, the visual element of drag-and-drop is still its most important feature. There is no better way of organizing a list or a tree of information than by pulling it around the screen using the mouse. When completing tasks like these, a graphical representation of what's going on will not only help your users to get the job done more quickly, but when backed by Ext JS, could also turn out to be the least development-intensive approach as well. Ext.dd is a package that doesn't supply any widgets of its own. Instead it supports

other segments of the framework and works as a behind-the-scenes facilitator of exciting end user functionality. As such, it can be a little difficult to come to grips with it, especially as it provides a variety of approaches to solve similar issues. [ 275 ]

Drag-and-drop

In this chapter, we've covered all of the major pieces of the Ext JS drag-and-drop puzzle. So, when you do come up with a problem that can be tackled using drag-and-drop, you can use DragZones, DropTargets, and StatusProxies to achieve the look and feel that your application requires.

Summary

It feels as if our knowledge of drag-and-drop on the Web has come pretty far from our understanding in the earlier chapters. We started off by discussing some of the typical demonstrations of drag-and-drop, which were developed to show off the Web 2.0 functionality. Some of those demonstrations suffered from a lack of real utility, but they were undeniably compelling. We showed how to create a few 'fancy but pointless' effects of our own to get a grasp of the underlying concepts of the Ext.dd package, and then quickly expanded our knowledge to harness the drag-and-drop classes that allow our applications to take advantage of this feature. The wide range of in-built support that Ext provides is only part of the story, albeit a very important part. The TreePanel, for example, certainly wouldn't be as impressive a component were it not for its ability to rearrange nodes within a hierarchy using simple drag-and-drop. But the other part of our tale is just as interesting—the ways in which we can customize that built-in functionality and then replace, extend, and implement our own solutions, which would enable the next level of desktop-like interactivity.

[ 276 ]

Code for Reuse: Extending Ext JS In this chapter, we'll discuss how we can create our own custom components by extending the Ext JS library. We'll talk about how we can create our own namespaces, differentiating our custom components from others. We'll also discuss some other core object-oriented concepts (just enough to understand what we need here) and the concept of Event-driven application architecture. This chapter covers: •

Object-oriented design as applied to Ext JS library

•

Inheritance and method overriding

•

Defining custom namespaces

•

Creating custom components

•

Event-driven application architecture

•

Xtypes

•

Lazy instantiation on application performance

•

Object-oriented JavaScript

Over the last several years, we've seen a drastic shift with regards to client-side scripting in browser-based web applications. JavaScript has become the de facto standard in client-side scripting, with support for it built into every major browser available.

Code for Reuse: Extending Ext JS

The issue in the past, with cross-browser development, has always been in each browser's implementation of the Document Object Model. Microsoft's Internet Explorer, having taken the majority share of the browser marketplace, helped to gather support for a modern Document Object Model, to which all other browsers had to adapt. However, after the release of Internet Explorer 6, Microsoft halted new development of their browser for several years, other than to provide security fixes. Added to this was Microsoft's play to try and create new standards. Rather than implementing JavaScript, Internet Explorer actually implemented JScript, which ran JavaScript files, but had a slightly different implementation that never garnered momentum (other than in Internet Explorer), possibly because it did not adhere to the ECMAScript standard. This created several issues. The World Wide Web Consortium (W3C) had created a standard for the Document Object Model, which companies like Mozilla and Opera adhered to and furthered. Yet Internet Explorer (the dominant browser) was stagnant. These events led to very hard times for client-side developers, as a great deal of time and effort went into creating client-side code that was cross-browser compliant. Netscape and Internet Explorer had been waging the browser war over several versions, slowly growing more divergent in their standards acceptance, with cross-browser development consistently becoming more of a challenge. The landscape had changed, in that a large degree of client-side development had become relegated to basic form validation and image rollovers, because few developers were interested in investing the time and effort necessary to write large, cross-browser compliant, client-side applications. Enter Web 2.0. Circa 2005, the buzzword of the day was AJAX, or Asynchronous JavaScript and XML. AJAX wasn't a new technology, but its use had been fairly minimal and obscure. Developers with a deep knowledge of JavaScript, looking to create greater and more dynamic websites, had begun to implement the technology as a way of reinvigorating the client-side movement, creating richer and more interactive user experiences. This renewed interest in client-side scripted applications, but with the same issues existing around cross-browser compatibility. Several cross-browser JavaScript libraries (Dojo, Prototype, Yahoo UI, and so on) had begun life, in response to minimizing the previous woes involved in cross-browser, client-side development. The developers of these libraries, with their knowledge of JavaScript, had kept pace with the changes in this language as well. JavaScript had travelled well beyond the confines of a solely procedural scripting language, with full support for object-oriented development. In developing their libraries, these developers took full advantage of an object-oriented style of development that JavaScript's prototype-based model allowed, creating small objects of functionality that could build upon one another to provide extensive resources of reusable code. [ 278 ]

Chapter 13

In the coming pages, I will often use the words object and class interchangeably, because it seems a little easier to understand. Technically, JavaScript is a classless language, and our objects are built with JavaScript's prototype-based programming model.

Object-oriented programming with Ext JS Ext JS is a perfect example of this shift. The Ext JS library is an extensive collection of packages of classes of reusable code: small pieces of functionality that can be taken on their own, or combined to create some truly fantastic client-side magic. An additional part of its beauty is the ability to extend the library further, creating our own custom components as extensions of those already present. This gives us the ability to create our own reusable pieces of code. We can write our own objects, as extensions of the library. This means that we don't have to write all of our functionality on our own, as much of this work has already been done for us. We expand upon the foundation, providing our own custom functionality.

Inheritance

To gain a full understanding of what we need to do, we have to understand one of the key concepts of object-oriented programming—inheritance. As we write our own components, these components will usually inherit from some other component of Ext JS, extending that component's functionality by providing our own properties and overriding the component's existing behavior. We create a new class, as an extension of an existing Ext JS class and inheriting that parent class's properties and methods, which we can then override to create new functionality without completely reinventing the wheel.

Break it down and make it simple

Confused yet? It's a lot to take in. Let's break this down into a basic example that may clarify a few things. Say we are writing a Customer Resource Management application for a company. This company has salespeople, who have clients (and client contacts), and the company also has vendors that they do business with, who also have contacts. Here we've identified three similar objects within our application. If we take these objects down to the base level, we notice that each of these objects is a Person (the Clients and Vendors would more clearly be Companies):

[ 279 ]

Code for Reuse: Extending Ext JS

•

Salesperson

•

Client Contact

•

Vendor Contact

Each one of these Person objects will share some basic attributes and methods, because each person has a name, an email address, a phone number, and an address. We'll create a quick class diagram to visually represent the Person object: Class diagrams, and UML diagramming in general, are a great way to visually represent different programming constructs. A full explanation is outside the purview of this text, but I highly recommend that you become familiar with them. Our diagrams here show the class name, the attributes, and methods of the class.

Note that the Person object has four attributes: name, emailAddress, phoneNumber, and address. Also note that the address attribute is, in itself, another object. We've included some simple methods for the object as well, to get and set our attributes. Each one of these objects also has its own object-specific properties such as a

salesPersonID, a clientContactID, or a vendorContactID.

[ 280 ]

Chapter 13

Note that in our diagram of the SalesPerson object, you do not see any of the Person-specific properties and methods. Because SalesPerson extends (inherits) the Person object, all of the properties and methods of the Person object become a part of the SalesPerson object as well. We can now create a SalesPerson. var sp = new SalesPerson();

This creates a new instance of the SalesPerson object, with all of the attributes and methods of the SalesPerson object, including those of the parent Person object, by extension.

Sounds cool, but what does it mean?

By default, the SalesPerson object, being an extension of Person, allows you to set a name to the SalesPerson in the following manner: SalesPerson.setName('Zig Ziggler')

You don't have to reference the methods, or the attributes, by calling on the object's (SalesPerson) parent object (Person) directly because, through inheritance, SalesPerson is a Person.

Now, what was this overriding stuff?

Through inheritance, all of the methods and attributes of a parent object become the child's as well. However, there will be times when you may want the child object's method to be different from that of its parent. For example, let's say our Person object had its own validate() method, which has validated all of the attributes and returned its own error array, but your SalesPerson object has some additional attributes to validate as well. By defining a validate() method within the SalesPerson object, you are overriding the validate() method of its Person parent object. validate: function() { // Some validation code here }

But, in this case, you would want total attribute validation; both the internal object-specific properties, as well as those of the parent object. So here, you would also need to call the validate() method of the parent object: validate: function() { var errorArr = ourObjects.salesperson.superclass.validate.call(this); // The salesperson specific validate stuff, appending the errorArr return errorArr; } [ 281 ]

Code for Reuse: Extending Ext JS

These are the basic pieces of OO that we need to understand so that we can begin to create our own custom classes with Ext JS. Well, almost…

Understanding packages, classes, and namespaces

There are a few final pieces of the object-oriented puzzle we need, in order to keep a solid grasp of our goals. We've talked about how Ext JS is a large collection of objects extending other objects, but it's also important to understand a few other pieces of basic OO terminology, and how they help in keeping things organized.

Packages

A package is a collection of classes that share something in common. For instance, the Ext.data package is a collection of classes for dealing with data, such as the different types of data Stores, Readers, and Records. The Ext.grid package is a collection of classes for the various grid objects, including all of the different grid types and selection models. Likewise, the Ext.form package contains classes for building forms, to include all of the classes of the different field types.

Classes

A class is what we call a specific JavaScript object, defining that object's attributes and methods. Going back to our previous examples, Person and SalesPerson would both be written as class objects, and both would probably be part of the same package.

Namespaces

Classes are a part of packages, and packages generally have their own namespace. Namespaces are containers of logically grouped packages and class objects. As an example, the Ext JS library falls into the Ext namespace. Forms within Ext JS fall into the Ext.forms namespace, where forms is a package of the various classes used to make up forms. It's a hierarchal relationship, using dot notation to separate the namespace from the package from the class. Variables from one namespace must be passed into another namespace, so applying a namespace helps to encapsulate information within itself. Ext.grid, Ext.form, and Ext.data are all custom namespaces.

[ 282 ]

Chapter 13

What's next?

Now that we have our terminology down, and a basic understanding of these core object-oriented concepts, we can finally get down to applying them within the context of creating Ext JS custom components.

Ok, what do we extend?

Typically, we'll be writing an application and will see ourselves writing the same basic piece over and over again. Or, we may be lucky to identify it early enough that we can just choose the best piece and move forward right away. It usually comes down to deciding which Ext JS component is the best one to extend. Let's revisit our previous scenario, a Customer Resource Management system. We know that we have several Person objects within our application. From a display perspective, we will probably need something to display a person's contact details. There are several different components for the display of information, and we must choose the right one. A grid object would work, but a tabular display across so many different values might clutter our application, and in this scenario, we probably only need to see the details of one person at a time. A PropertyGrid is a little different from a standard grid, but we're just going to output a name and an address. We really don't need the user to see the field names so much as the data itself. We can pretty much eliminate the DataView as well, for the same reasons as rejecting the grid. We really need only one record at a time. This brings us to a form or a panel. Forms imply editing of information, so for a display-only application you really come back to a panel. Panel objects are extremely versatile objects, being the core of many other objects within Ext JS. The body of a window object is a panel. The different pieces of an Accordion are panel objects. The bodies of the tabs in a TabPanel are panel objects. Creating a custom component that extends the panel object opens the doors to a variety of different display options within an Ext JS application.

Creating a custom namespace

We want to create our custom components within their own custom namespace for encapsulation, quick reference, and to help us organize our code. It may be that our packages or class may be named the same as other packages and classes already within Ext JS. A custom namespace prevents conflicts from occurring between classes of the same name, as long as each is defined within its own separate namespace. A common naming convention for user-defined objects is to use the Ext.ux namespace. Ext.namespace('Ext.ux'); [ 283 ]

Code for Reuse: Extending Ext JS

Because we're going to create a collection of display panels for our CRM application, we'll really set our namespace apart from the rest. Ext.namespace('CRM.panels');

We need to place this line at the top of each class definition template.

Our first custom class

First, let's take a look at a fairly simple script that takes a single record of information and lays it out in a panel on the screen. // ch13ex1.js var userData = [ {ID:1,FIRSTNAME:'John',LASTNAME:'Lennon',EMAIL:'[email protected]', PASSWORD:'apple1',ADDRESSTYPE:'Home (Mailing)',STREET1:'117 Abbey Road ',STREET2:'',STREET3:'',CITY:'New York',STATE:'NY',ZIP:'12345',PHONETY PE:'Cell',PHONE:'123-456-7890'}, {ID:2,FIRSTNAME:'Paul',LASTNAME:'McCartney', EMAIL:'[email protected]',PASSWORD:'linda',ADDRESSTYPE:'Work (Mailing)',STREET1:'108 Penny Lane',STREET2:'',STREET3:'', CITY:'Los Angeles',STATE:'CA',ZIP:'67890',PHONETYPE:'Home', PHONE:'456-789-0123'}, {ID:3,FIRSTNAME:'George',LASTNAME:'Harrison', EMAIL:'[email protected]',PASSWORD:'timebandit', ADDRESSTYPE:'Home (Shipping)',STREET1:'302 Space Way',STREET2:'',STREET3:'',CITY:'Billings',STATE:'MT', ZIP:'98765',PHONETYPE:'Office',PHONE:'890-123-4567'}, {ID:4,FIRSTNAME:'Ringo',LASTNAME:'Starr', EMAIL:'[email protected]',PASSWORD:'barbie', ADDRESSTYPE:'Home (Mailing)',STREET1:'789 Zildizhan Pl', STREET2:'',STREET3:'',CITY:'Malibu', STATE:'CA',ZIP:'43210',PHONETYPE:'Home',PHONE:'567-890-1234'} ]; var userDetail = new Ext.Panel({ applyTo: 'chap13_ex01', width: 350, height: 250, title: 'Chapter 13 Example 1', bodyStyle: 'padding:10px', data: userData[0], tpl: new Ext.XTemplate([ '{FIRSTNAME} {LASTNAME}
', [ 284 ]

Chapter 13 '{EMAIL}
', '{PHONE} ({PHONETYPE})
', '{ADDRESSTYPE} Address
', '{STREET1}
', '<tpl if="STREET2.length > 0">', '{STREET2}
', '', '<tpl if="STREET3.length > 0">', '{STREET3}
', '', '{CITY}, {STATE} {ZIP}' ]) });

What we have here is a simple array of data objects, and a panel definition. We're passing a single data item into the panel's configuration, defining an XTemplate for the record's display when the panel is rendered.

Turning this into a reusable component is very easy, as the majority of our code will just be moved into our custom class definition. First, we'll create a new class template, ContactDetails.js, and define its initial class declaration as extending the Ext. Panel class. Ext JS actually provides custom methods for extending components.

[ 285 ]

Code for Reuse: Extending Ext JS

Example 2: ContactDetails.js Ext.namespace('CRM.panels'); CRM.panels.ContactDetails = Ext.extend(Ext.Panel,{ // The panel definition goes here });

Our next step is to begin defining the custom properties and methods of our component. We begin with the default properties that are specific to our component. Some of these properties may be overridden in our object configuration, but these defaults allow us to only pass in what we might need to change for our individual application. width: 350, height: 250, bodyStyle: 'padding:10px', data: { ID: 0, FIRSTNAME: '', LASTNAME: '', EMAIL: '', ADDRESSTYPE: 'Home (mailing)', STREET1: '', STREET2: '', STREET3: '', CITY: '', STATE: '', ZIP: '', PHONETYPE: 'Home', PHONE: '' }, tpl: new Ext.XTemplate([ '{FIRSTNAME} {LASTNAME}
', '{EMAIL}
', '{PHONE} ({PHONETYPE})
', '{ADDRESSTYPE} Address
', '{STREET1}
', [ 286 ]

Chapter 13 '<tpl if="STREET2.length > 0">', '{STREET2}
', '', '<tpl if="STREET3.length > 0">', '{STREET3}
', '', '{CITY}, {STATE} {ZIP}' ]),

Pit stop! Does anything look familiar here? Yes, it should, especially after looking at the 'records' within userData. A class is an object, just like each 'record' in the userData array is an object. At its most base level, an object is a collection of name/value pairs. The only true difference is that a class will also have functions as the value of an attribute name of the object, and the object can be referenced by its class (the name of the class). Each of these name/value pairs forms the constructor of the ContactDetails class.

Overriding methods

Continuing to build our first custom class, we get into overriding methods. As we have previously mentioned, we can override a method of our parent class by defining a method of the same name in the child class. A key component of the Panel class is the initComponent() method, which (as the name suggests) initializes the Panel component. Most methods will never need to be overridden, but sometimes we'll need to override a specific method to add to, or change, the default behavior of a component. initComponent: function(){ CRM.panels.ContactDetails.superclass.initComponent.call(this); if (typeof this.tpl === 'string') { this.tpl = new Ext.XTemplate(this.tpl); } },

Ext JS uses superclass as the programmatic reference to the object's parent class object, as CRM.panels.ContactDetails is a subclass of its parent (superclass) Ext.Panel.

[ 287 ]

Code for Reuse: Extending Ext JS

With our component, we needed a way to apply a new XTemplate to our component, should one be passed into our ContactDetails class. As a developer can pass in the template configuration via the tpl argument, instead of an actual XTemplate object, it is important to validate that input and adjust accordingly. Our first action is to call the initComponent() method of our parent Panel class, and then adjust the value of the tpl argument as needed.

Understanding the order of events

In our last example (Example 2), we used the initComponent() method to apply our XTemplate to our Panel object, by writing an overriding method for the initComponent() method that supersedes the inherited Panel (parent) class. // Overriden parent object method initComponent: function(){ CRM.panels.ContactDetails.superclass.initComponent.call(this); if (typeof this.tpl === 'string') { this.tpl = new Ext.XTemplate(this.tpl); } },

Here, we've called the initComponent() method of our parent Panel (super) class. After that, we verify that we have a value for our tpl attribute and cast it to an XTemplate if only a string was passed in for the variable, before the method of our component. update: function(data) { this.data = data; this.tpl.overwrite(this.body, this.data); }

The update() method takes an argument of data (a record object from our array), applies that argument to the component's data attribute, and then applies the component's XTemplate to the 'body' of the component. This is a custom method of the component, not an overridden method of the parent panel class. What's important to our discussion is the need for this method.

When can we do what?

Our XTemplate does not get immediately applied to our component, as it isn't able to overwrite the panel body until the panel body has actually been rendered. This is what we mean by 'order of events', and can initially be very confusing, until you put a little thought into it. For instance, say we had dynamically tried to apply a custom ID argument as part of our constructor: id: 'ContactDetails_' + this.data.ID, [ 288 ]

Chapter 13

This would have broken our component. Why? Because this.data is also an item within our constructor, and doesn't actually exist until the component is instantiated into memory. The same thing would have happened, if we had tried to apply our XTemplate within the initComponent() method: initComponent: function(){ CRM.panels.ContactDetails.superclass.initComponent.call(this); this.tpl.overwrite(this.body, this.data); },

This would have failed when initComponent() begins the process of creating the component. The component, at this stage, still isn't part of the browser's Document Object Model, so there isn't any 'body' for the XTemplate to be applied to yet. Getting a handle on the 'order of events' is one of the biggest challenges in learning Ext JS, if you don't know about it, and the order of events may be different with different Ext JS classes as well.

What is an event-driven application?

Now we get down to the real juice. One huge barrier to cross, when transitioning from a procedural programming style into object-oriented development, is understanding the event-driven application model. Not all OO programs are event-driven, but the paradigm is definitely shifting in that direction, and Ext JS is no exception. This is a concept that most JavaScript developers have known for years, as the browser itself forces us into an event-driven model, as each action of the browser is an event. Basically, the flow of an application is determined by sensing some change of state or user interaction, called an event. When the event occurs, the application broadcasts that the event has taken place. Another piece of the application (a listener, also known as an observer) is listening for the event broadcast. When it sees that the event has been broadcast, it then performs some other action. Our ContactDetails class is no different. As an extension of the Panel class, it automatically contains all of the events and event listeners that are a part of the Panel class. An event, render, was previously defined. The process of building the display of the panel fires off a 'broadcast' of the render event. this.fireEvent('render');

The Ext.Panel object has already defined an event listener for the render event. Once the render event has been handled, it calls the onRender() method. this.addListener('render',this.onRender,this, {ct:this.ct,position:this.position});

[ 289 ]

Code for Reuse: Extending Ext JS

An event has been reached, which is then broadcast. An event listener is listening for that broadcast. Upon hearing the broadcast, it executes additional pre-configured actions that have been defined for that event. Understanding this process plays a key part in how we develop event-driven applications, and our own applications with Ext JS.

[ 290 ]

Chapter 13

Creating our own custom events

We may just as easily apply our own custom events within our Ext JS applications. Other developers can add listeners to new events that we've registered with our applications or we can add our own listeners to kick-off other methods within our custom component. For example, let's create a new update event within our custom component. We'll adjust our initComponent() method to register our new event: initComponent: function(){ CRM.panels.ContactDetails.superclass.initComponent.call(this); if (typeof this.tpl === 'string') { this.tpl = new Ext.XTemplate(this.tpl); } this.addEvents('update'); },

This new code is all it takes to register our new event. We'll also go ahead and register a new, internal event listener, which we'll use to call a new method that we'll write in a moment: initComponent: function(){ CRM.panels.ContactDetails.superclass.initComponent.call(this); if (typeof this.tpl === 'string') { this.tpl = new Ext.XTemplate(this.tpl); } this.addEvents('update'); this.addListener({ update:{ fn: this.onUpdate, scope: this } }); },

What this states is that whenever the update event is broadcast, our application will turn around and call the onUpdate() method of our ContactDetails component. onUpdate: function(data){ console.log('in onUpdate'); }

[ 291 ]

Code for Reuse: Extending Ext JS

The onUpdate() method, in this case, only outputs a short message to the debugging console, which you can see if you are debugging your application in Firefox with the Firebug plugin (console is not supported in Internet Explorer). The final step is having the update event broadcast. We already have an update() method, so it would make sense for us to broadcast the update once it's completed: update: function(data) { this.data = data; this.tpl.overwrite(this.body, this.data); this.fireEvent('update', this.data); },

Here we broadcast our update event by calling the Ext JS's fireEvent() method, and passing along our data as the argument to any method listening for the update event. We can have any number of event listeners configured for a particular event, either internal to the component, or externally within a script referencing our custom component.

Our first custom component: complete

Here's the final component we've been constructing. At this point in time, we don't really need the custom update event. We'll leave it in, as it may be useful later, and we'll just remove the onUpdate() method for now. We can have events that are registered within our applications that are never listened for. They are available for convenience, should we want to use them, but they are otherwise ignored, which is fine. // ContactDetails.js Ext.namespace('CRM.panels'); CRM.panels.ContactDetails = Ext.extend(Ext.Panel,{ width: 350, height: 250, bodyStyle: 'padding:10px', data: { ID: 0, FIRSTNAME: '', LASTNAME: '', EMAIL: '', ADDRESSTYPE: 'Home (mailing)', STREET1: '', STREET2: '', STREET3: '', CITY: '', STATE: '', [ 292 ]

Chapter 13 ZIP: '', PHONETYPE: 'Home', PHONE: '' }, tpl: new Ext.XTemplate([ '{FIRSTNAME} {LASTNAME}
', '{EMAIL}
', '{PHONE} ({PHONETYPE})
', '{ADDRESSTYPE} Address
', '{STREET1}
', '<tpl if="STREET2.length > 0">', '{STREET2}
', '', '<tpl if="STREET3.length > 0">', '{STREET3}
', '', '{CITY}, {STATE} {ZIP}' ]), initComponent: function(){ CRM.panels.ContactDetails.superclass.initComponent.call(this); if (typeof this.tpl === 'string') { this.tpl = new Ext.XTemplate(this.tpl); } this.addEvents('update'); }, onRender: function(ct, position) { CRM.panels.ContactDetails.superclass.onRender.call (this, ct, position); if (this.data) { this.update(this.data); } }, update: function(data) { this.data = data; this.tpl.overwrite(this.body, this.data); [ 293 ]

Code for Reuse: Extending Ext JS this.fireEvent('update', this.data); } });

With our new custom component, we now have a new way of calling it into our applications as well. // ch13ex2.js var userData = [ {ID:1,FIRSTNAME:'John',LASTNAME:'Lennon', EMAIL:'[email protected]',PASSWORD:'apple1', ADDRESSTYPE:'Home (Mailing)', STREET1:'117 Abbey Road',STREET2:'',STREET3:'', CITY:'New York',STATE:'NY',ZIP:'12345',PHONETYPE:'Cell', PHONE:'123-456-7890'}, {ID:2,FIRSTNAME:'Paul',LASTNAME:'McCartney', EMAIL:'[email protected]',PASSWORD:'linda', ADDRESSTYPE:'Work (Mailing)', STREET1:'108 Penny Lane',STREET2:'', STREET3:'',CITY:'Los Angeles',STATE:'CA',ZIP:'67890', PHONETYPE:'Home',PHONE:'456-789-0123'}, {ID:3,FIRSTNAME:'George',LASTNAME:'Harrison', EMAIL:'[email protected]',PASSWORD:'timebandit', ADDRESSTYPE:'Home (Shipping)',STREET1:'302 Space Way',STREET2:'',STREE T3:'',CITY:'Billings',STATE:'MT',ZIP:'98765', PHONETYPE:'Office',PHONE:'890-123-4567'}, {ID:4,FIRSTNAME:'Ringo',LASTNAME:'Starr', EMAIL:'[email protected]',PASSWORD:'barbie', ADDRESSTYPE:'Home (Mailing)',STREET1:'789 Zildizhan Pl', STREET2:'',STREET3:'',CITY:'Malibu',STATE:'CA',ZIP:'43210',PHONETYPE: 'Home',PHONE:'567-890-1234'} ]; var userDetail = new CRM.panels.ContactDetails({ applyTo: 'chap13_ex01', title: 'Chapter 13 Example 1', data: userData[0] }); updateContact = function(event,el,data){ userDetail.update(data.data); }

Ext.get('actionLink').on('click',updateContact,this, {data:userData[1]});

[ 294 ]

Chapter 13

We've taken an anchor element, with an id of actionLink, from our calling page, and given it an onclick event that updates the data of our ContactDetails object, userDetail. Clicking on the Update Data link on the page changes the contact details from John over to Paul.

What's next? Breaking it down

Ok, we've now created our first custom component. That was fairly painless. But, looking back at what we've done, it looks as if we've pushed ourselves into a small corner again. As it stands, every aspect of our application that requires contact information would have to display the name, e-mail address, phone number, and address of our contact, every time. What happens if we require only the address? Or just the name, or e-mail, or the phone number? Well, this is where we refactor, creating even more custom components. For our purposes, we'll quickly break this down into two components: one for UserDetail, and another for AddressDetail. Example 3: UserDetail.js // UserDetail.js Ext.namespace('CRM.panels'); CRM.panels.UserDetail = Ext.extend(Ext.Panel,{ width: 350, height: 125, bodyStyle: 'padding:10px', data: { ID: 0, FIRSTNAME: '', LASTNAME: '', EMAIL: '', ADDRESSTYPE: 'Home (mailing)', STREET1: '', STREET2: '', [ 295 ]

Code for Reuse: Extending Ext JS STREET3: '', CITY: '', STATE: '', ZIP: '', PHONETYPE: 'Home', PHONE: '' }, split: false, tpl: new Ext.Template([ '{FIRSTNAME} {LASTNAME}
', '{EMAIL}
', '{PHONE} ({PHONETYPE})
' ]), initComponent: function(){ CRM.panels.UserDetail.superclass.initComponent.call(this); if (typeof this.tpl === 'string') { this.tpl = new Ext.XTemplate(this.tpl); } }, update: function(data) { this.data = data; this.tpl.overwrite(this.body, this.data); } }); Ext.reg('userdetail',CRM.panels.UserDetail);

Example 3: AddressDetail.js Ext.namespace('CRM.panels'); CRM.panels.AddressDetail = Ext.extend(Ext.Panel,{ width:350, height:125, bodyStyle: 'padding:10px', data: { ID: 0, FIRSTNAME: '', LASTNAME: '', EMAIL: '', ADDRESSTYPE: 'Home (mailing)', STREET1: '', [ 296 ]

Chapter 13 STREET2: '', STREET3: '', CITY: '', STATE: '', ZIP: '', PHONETYPE: 'Home', PHONE: '' }, split: false, tpl: new Ext.XTemplate([ '{ADDRESSTYPE} Address
', '{STREET1}
', '<tpl if="STREET2.length > 0">', '{STREET2}
', '', '<tpl if="STREET3.length > 0">', '{STREET3}
', '', '{CITY}, {STATE} {ZIP}' ]), initComponent: function(){ CRM.panels.AddressDetail.superclass.initComponent.call(this); if (typeof this.tpl === 'string') { this.tpl = new Ext.XTemplate(this.tpl); } }, update: function(data) { this.data = data; this.tpl.overwrite(this.body, this.data); } }); Ext.reg('addrdetail',CRM.panels.AddressDetail);

By breaking these into two separate components, we can now use either piece in any area of our application, independently.

[ 297 ]

Code for Reuse: Extending Ext JS

Example 3: ch13ex3.js var userData = [ {ID:1,FIRSTNAME:'John',LASTNAME:'Lennon',EMAIL:'john@beatles. com' ,PASSWORD:'apple1',ADDRESSTYPE:'Home (Mailing)',STREET1:'117 Abbey Road',STREET2:'',STREET3:'',CITY:'New York', STATE:'NY',ZIP:'12345',PHONETYPE:'Cell',PHONE:'123-456-7890'}, {ID:2,FIRSTNAME:'Paul',LASTNAME:'McCartney', EMAIL:'[email protected]',PASSWORD:'linda', ADDRESSTYPE:'Work (Mailing)',STREET1:'108 Penny Lane',STREET2:'',STREET3:'',CITY:'Los Angeles',STATE:'CA', ZIP:'67890',PHONETYPE:'Home',PHONE:'456-789-0123'}, {ID:3,FIRSTNAME:'George',LASTNAME:'Harrison', EMAIL:'[email protected]',PASSWORD:'timebandit', ADDRESSTYPE:'Home (Shipping)',STREET1:'302 Space Way', STREET2:'',STREET3:'',CITY:'Billings',STATE:'MT',ZIP:'98765', PHONETYPE:'Office',PHONE:'890-123-4567'}, {ID:4,FIRSTNAME:'Ringo',LASTNAME:'Starr', EMAIL:'[email protected]',PASSWORD:'barbie', ADDRESSTYPE:'Home (Mailing)',STREET1:'789 Zildizhan Pl', STREET2:'',STREET3:'',CITY:'Malibu',STATE:'CA',ZIP:'43210', PHONETYPE:'Home',PHONE:'567-890-1234'} ]; var userDetail = new CRM.panels.UserDetail({ applyTo: 'chap13_ex03a', title: 'User Detail', data: userData[0] }); var addrDetail = new CRM.panels.AddressDetail({ applyTo: 'chap13_ex03b', title: 'Address Detail', data: userData[0] }) updateContact = function(event,el,data){ userDetail.update(data.data); addrDetail.update(data.data); } Ext.get('actionLink').on('click',updateContact,this, {data:userData[1]});

[ 298 ]

Chapter 13

Best Practice Ok, looking at our two custom components, it's fairly obvious that they are essentially the same object with different XTemplates applied, and it would probably be best for them to have their own parent class of overloaded, template-applying methods, and just be repositories of the XTemplate defaults and our xtypes. But, for our examples, we're going to try and keep it simple for now.

Using xtype: the benefits of lazy instantiation

In our previous example, a new line was added to the bottom of each class file: Ext.reg('userdetail',CRM.panels.UserDetail);

What we've done here is register our new custom component as an xtype. Well, what does that mean exactly? An xtype is a component container element, registered with the Ext JS library, registering the component with the Component Manager, for lazy object instantiation. What this means is that we can use the xtype as a quick object identifier, when laying out our applications, and that these types of objects are only loaded into browser memory when they are actually used. This can greatly improve the overall performance of our application, especially when a view may contain many objects. We should use xtype wherever possible while writing object configuration, so that objects that might not immediately be displayed won't take up valuable memory resources. Next, we'll look at this in practice.

Using our custom components within other objects

Now that we've created our custom components, we can add them to any other container object within Ext JS. We can now use our xtype to refer to the component type, for lazy instantiation, and we can get all of the benefits of modular design. Let's apply our two new components with a border layout, for side-by-side viewing. Example 4: ch14ex4.js var ContactDetail = new Ext.Panel({ title: 'Contact Details', applyTo: 'chap13_ex04', width: 400, height: 125, [ 299 ]

Code for Reuse: Extending Ext JS layout: 'border', frame: true, items:[{ region: 'west', xtype: 'userdetail', width: 200, data: userData[0] },{ region: 'center', xtype: 'addrdetail', width: 200, data: userData[0] }] });

We have identified the west and center regions of our BorderLayout as belonging to the UserDetail and AddressDetail class types respectively. If this layout were part of a window object, these two classes wouldn't even be loaded into memory until the window was shown, helping to reduce browser memory usage.

Summary

Extending the various classes of the Ext JS library is the best way to place ourselves on a fast track to Rapid Application Development, by allowing us to easily create modular, reusable components. Within this chapter, we've discovered some of the most powerful aspects of the Ext JS library. We had a brief overview of object-oriented development with JavaScript, and then covered how object-oriented program design applies to the Ext JS library. We spent a little time covering some of the basics of object-oriented programming such as inheritance, method overriding, and some basic terminology. We then began applying some of these concepts within Ext JS such as defining custom namespaces, creating custom components, and overriding methods of our object's parent (super) class. We followed up by giving a small explanation of event-driven application architecture, and applied that by writing a custom event and listener for our custom component. Finally, we covered xtypes and the importance of lazy instantiation on application performance, and then modified our code to use xtypes for our new custom components to add them into other Ext JS object containers. In the next chapter we'll discuss how to write and use plugins, and how a plugin differs from a component.

[ 300 ]

Plugging In Like any good development library, there are ways we can inject our own functionality into it, interacting with the components without modifying them directly. This injection happens by way of the plugins config option that every component has available to it. Each widget in Ext JS that inherits from the Component class has the ability to use plugins, which is pretty much everything, from panels to grids to form fields and everything in between. In this chapter we will learn to: •

Structure a typical plugin

•

Use plugins within components or widgets

•

Have a plugin interact with its owner

•

Learn advanced plugin techniques

What can we do?

What can we do with a plugin, and what are the use cases? The usage of a plugin has a very broad range because of how much freedom we are given in the code. There are plugins that simply change the way a selection model on a tree work, make a text field use uppercase, or alter the appearance of a slider. The more complex plugins can create expanding grid rows or visual row editors and much more. There are very few limitations when it comes to plugins. For our example, we are going to be creating a plugin that will filter our grid-based user input from a text field. We can add some fun features to this, such as case sensitivity and highlighting the target text. We will also cover how to inject items into the owner components layout.

Plugging In

How it works

Before we jump in and write a plugin, let's take a quick look at how a plugin interacts with its host Component. The plugin itself is generally extended from a base class like the observible class. However we don't need to extend from a particular class to make a plugin, it can be as simple as an empty object, or a singleton. The component that is using the plugin is referred to as the host component.

The important part is to have the right methods available, which are called in the following order: •

Constructor: Here we receive and can change the configuration of the plugin, since this method is called when the plugin is first instantiated. This method can be omitted if we don't plan on having any configurable options for our plugin.

•

Init: This method is called after the host component is initialized, which is after the config has been processed and the owner component has set up all of its dependencies such as toolbars or form fields. Though the host Components pieces are configured at this point, they are not necessarily rendered yet, so attaching event based render listeners will be needed depending on what we are trying to do.

Another part of this process that does not belong on the list above, but should be noted, is that we can attach listeners to events on the owner component within the init method. So for instance, we can attach a function to execute when the owner component has rendered, or a store has loaded, and so on.

Using a plugin

Of course the other half of this puzzle is actually using the plugin. When we create our component, say a grid for instance, we need to specify a 'plugins' config, which contains an array of instances (or configs) of plugins. So we can either add the plugins using the following format: { title: 'Movie Grid', xtype: 'grid', ... plugins: [new Ext.ux.PluginName()], ... } [ 302 ]

Chapter 14

Or we have the option of passing a plugin config using a ptype like the following: { title: 'Movie Grid', xtype: 'grid', ... plugins: [{ptype:'plugin-name'}], ... }

The ptype for the plugin must be registered when we create the plugin, but we will learn more about this soon. Let's get coding.

Plugin structure

There are two main ways to structure our plugin code: •

•

singleton: Our plugin can be created as a singleton class and used across multiple components, though any variables used in the plugin would be shared between each usage. This can be incredibly lightweight, but also has many limitations. observible/object: Extending from the observible class in Ext JS is the most common method for creating plugins; it offers the most flexibility, though comes with the cost of more overhead. This can be simplified by extending JavaScript's Object constructor.

The singleton plugin structure can be very useful; however most cases will use an instantiation of a class, so I want to focus on creating the most common form of a plugin—extending observible. The structure created for our new plugin will look very similar to the way we extend components. We are essentially doing the same thing, just adding the specific methods that need to exist when this component is used as a plugin. The following is the basic structure used for a plugin, which we will use as a starting point: Ext.ns('Ext.ux'); Ext.ux.PluginName = Ext.extend(Ext.util.Observable, { constructor: function(config){ // here we can add or alter the config Ext.ux.PluginName.superclass.constructor.call(this); }, init: function(cmp){ // here we can interact with the host component } }); Ext.preg('plugin-name',Ext.ux.PluginName); [ 303 ]

Plugging In

Notice the constructor and init methods—these two make the foundation of a plugin, and in fact the init method is required for a plugin to function. Having a constructor method is not needed if we don't want to have a configurable plugin. The init method on the other hand is where the plugin gets its first reference to its instantiated host component, so this is where most of the heavy lifting is performed. Ext.ux.PluginName = Ext.extend(Ext.util.Observable, { constructor: function(config){ // here we can add or alter the config Ext.ux.PluginName.superclass.constructor.call(this); }, init: function(cmp){ // here we can interact with the owner component } });

A single argument is passed into the init method, which is a reference to the instance of the host component. From within this init method, we can now call methods on the host component, or add listeners, but the first thing I like to do is create a reference to this host component reference that is scoped within our plugin. This way we have easy access to the host component. Ext.ux.PluginName = Ext.extend(Ext.util.Observable, { constructor: function(config){ // here we can add or alter the config Ext.ux.PluginName.superclass.constructor.call(this); }, init: function(cmp){ this.hostCmp = cmp; // here we can interact with the host component } });

Now it becomes free for all, and we can pretty much do whatever we want, but for the sake of this example, let's create a simple plugin that gives us a grid filter window. We are going to add this plugin we are creating on to the main movies grid in our movie database example code from Chapter 10.

First signs of life

This is the point when our plugin starts to come to life, when we are able to actually do something. First lets make our plugin create and show a window when the owner grid is rendered. [ 304 ]

Chapter 14

In the plugins init method, we can create our window and attach on render listener to the owner grid which will show the window. The constructor method is not needed at this point, but if your sample code already has it, it will not cause any problems to leave it in. Ext.ns('Ext.ux'); Ext.ux.GridSearchWindow = Ext.extend(Ext.util.Observable, { /* constructor method not needed at this point */ init: function(cmp){ this.hostCmp = cmp; this.hostCmp.on('render', this.onRender, this, {delay:200}); }, onRender: function(){ this.win = new Ext.Window({ width: 200, height: 120, x: 300, y: 300, title: 'Grid Search', layout: 'fit', closable: false, constrain: true, renderTo: this.hostCmp.id }); this.win.show(); } }); Ext.preg('gridsearchwin',Ext.ux.GridSearchWindow);

Now that we have a basic plugin, we need to add it to the grid using the plugins config. { title: 'Movie Grid', xtype: 'grid', ... plugins: [{ptype:'gridsearchwin'}], ... }

[ 305 ]

Plugging In

When our movie grid is created, a window will be displayed that is constrained to our grids panel area.

In our example we are waiting for the host grids render event to show the window, but there is no technical reason we need to do this. In our case it's just because of the constrain feature and positioning, our window could just as easily be displayed directly in the init method of our plugin if it was not constrained and initially positioned. As our window uses constrain along with an initial x and y position, we must delay the onRender event from firing to give our grid time to figure out its size and place the window properly within.

The search form

With our window up and running—opening along with the grid—we can start to add some form fields and buttons to perform the search features of our plugin. Ext.ux.GridSearchWindow = Ext.extend(Ext.util.Observable, { ... onRender: function(){ this.win = new Ext.Window({ width: 200, ..., renderTo: this.hostCmp.id, items: this.getFormConfig(), buttons: [{ text: 'Find', handler: this.doSearch, [ 306 ]

Chapter 14 scope: this }, '->', { text: 'Clear', handler: this.clearSearch, scope: this }] }); this.win.show(); }, doSearch: function(){ var s = this.hostCmp.getStore(); s.filter(this.win.field.getValue(),this.win.value. getValue(),true); }, clearSearch: function(){ this.hostCmp.getStore().clearFilter(); }, getFormConfig: function(){ return { xtype: 'form', bodyStyle: 'padding: 5px;', border: false, labelAlign: 'right', labelWidth: 60, items: [{ fieldLabel: 'Column', xtype: 'combo', ref: '../field', triggerAction: 'all', displayField: 'display', valueField: 'field', mode: 'local', width: 110, value: 'title', store: { xtype: 'jsonstore', fields: ['display','field'], root: 'data', data: {data:[]} } },{ fieldLabel: 'Find', xtype: 'textfield', ref: '../value', [ 307 ]

Plugging In width: 110 }] } } });

The new methods we added are doSearch, clearSearch, and getFormConfig— the first two are methods for our search and clear buttons to use, however the getFormConfig method returns an object containing the config used to create the actual form, which will give us a basic window and form like the following:

Interacting with the host

Our start of a plugin looks good now, but let's go to the next step and interact some more with our host component by reading it's configuration and interacting with some of it's features. One of the first things we did is assign the host component to a property on the local scope: this.hostCmp = cmp;

So at any point within our plugin we have access to the host components methods through this property in the scope, in this case it's a grid. This reference to the grid works just like any other component reference—so we are going to take a look at the host grids column model and create some combo box options based on that. We know that the grid component has a columns property that contains the column configuration, so let's grab it from the initialConfig object. We will add a getColumnsData method that can encapsulate our logic.

[ 308 ]

Chapter 14 getColumnsData: function(){ var flds = []; Ext.each(this.hostCmp.initialConfig.columns, function(itm){ flds.push({ display: itm.header, field: itm.dataIndex }); }, this); return { data: flds }; }

This method now returns a chunk of data in the format of an object literal that can be used with a store—specifically, the store for our forms combo box. By looping through all of the columns and pushing each into a new array, then returning that array inside the 'data' property of an object, we can use it directly in our combo box's store. Modify the form configuration from above to use the following: { fieldLabel: 'Column', xtype: 'combo', ref: '../field', triggerAction: 'all', displayField: 'display', valueField: 'field', mode: 'local', width: 110, value: 'title', store: { xtype: 'jsonstore', fields: ['display','field'], root: 'data', data: this.getColumnsData() } }

[ 309 ]

Plugging In

Now we have a window that has options available in the combo box, and can search the grid.

That is exactly how easy it is to create a plugin, which is both easy to distribute or share and gives us many opportunities to add extra features to components with minimal code.

Configurable plugins

Like many other components in Ext JS, we can provide our plugin with a configuration when we instantiate it. This lets us customize our plugins on a case per case basis. Any configuration options that are passed in with the plugins config are copied into the scope of the plugin. In order for our config options to be copied into the scope, a constructor method must exist that handles this. constructor: function(config){ Ext.apply(this,config); Ext.ux.GridSearchWindow.superclass.constructor. call(this,config); }

Now we can go ahead and add an option to our plugins config. I am adding a fields array that lists the fields I want to be included in the combo box used to select the field to search. { title: 'Movie Grid', xtype: 'grid', ... [ 310 ]

Chapter 14 plugins: [{ ptype:'gridsearchwin', fields: ['title','tagline'] }], ... }

Now we will have a 'fields' attribute in our plugins scope that we can utilize within any scoped methods such as the init method or the getColumnsData method that we are going to modify now. getColumnsData: function(){ var flds = [], flen = this.fields?this.fields.length:0; Ext.each(this.hostCmp.initialConfig.columns, function(itm){ if (flen === 0 || (flen > 0 && this.fields.indexOf(itm.dataIndex) >= 0)){ flds.push({ display: itm.header, field: itm.dataIndex }); } }, this); return { data: flds }; }

By adding some simple checks around the statement that adds columns to our combo box's data, we can filter out the unwanted options. There is also a check for whether the fields configuration exists or not. This will produce the following:

[ 311 ]

Plugging In

Extra credit

For that extra little cherry on top, we can add simple text highlighting to our grid search plugin by first adding the appropriate CSS to our document. .highlight { background-color: #ffff80; }

Then we will need a function that will wrap all of the grid cell renderers in our grid with a highlighting function. wrapRenderers: function(){ var cm = this.hostCmp.getColumnModel(); Ext.each(cm.config,function(col,i){ var origFn = cm.getRenderer(i), vid = this.win.value.id, hlFn = function(){ var a = arguments, sv = Ext.getCmp(vid).getValue(); val = origFn(a[0],a[1],a[2],a[3],a[4],a[5]); if (sv && val.replace) { val = val.replace(new RegExp('(' + sv + ')', 'gi'), '<span class="highlight">$1'); } return val; }; cm.setRenderer(i, hlFn); },this); }

And last but not least, call this new method when the store loads to apply the new renderers to the grid: init: function(cmp){ this.hostCmp = cmp; this.hostCmp.on('render', this.onRender, this, {delay:200}); this.hostCmp.getStore().on('load', this.wrapRenderers, this); }

[ 312 ]

Chapter 14

This will give us some pretty sweet search term highlighting.

That's all!

Summary

In this chapter we have learned how to create the most common form of a plugin, the form I find myself using most often, which is extending the observible class. We were able to attach our own code to events on the host component and create a distinct, separate functionality that interacts with the host component like it was a built in feature.

[ 313 ]

It's All About the Data Ext JS is an extremely powerful, cross-browser library, providing any developer with a beautiful and consistent set of tools for laying out browser-based applications. But there's a lot more here than just pretty boxes and grids. As the title says, It's All About the Data! An application without data is really nothing more than an interactive static page, and our users are going to want to manipulate real information. One of the wonders of web applications is that they've taken computing full circle and back to the days of the client/server application model. Ext JS's AJAXified objects provide us with the means to work with real-time data straight from the server, and in this chapter we'll cover the many different ways in which you can retrieve from and post data to your Ext JS based applications. In this chapter, we cover: •

Understanding data formats

•

The data Store object

•

Finding data

•

Filtering data

•

Dealing with Recordset changes

•

The DataWriter

•

Many objects use a Store

Understanding data formats

We have dozens of component objects available to us within Ext JS, and most of them can take dynamic data from the server. It's all in knowing what kind of data a component can take, and what formats are acceptable.

It's All About the Data

Loading HTML into a panel

You've probably noticed that many components are basically just a box. TabPanel instances, Accordion instances, and the content area of a Window are all just large boxes (a

element), or Panel instances. Each of these unique objects has its own methods and properties, yet each of them extends the Ext.Panel object. Applying dynamic data to a basic Panel is super simple, because it takes the simplest of formats: straight text or HTML. Our first example will load a simple HTML page into a Panel. First, we'll need the rendering page, and a container element for our content: …

…

Here, we have shown what will go inside the tag of our example HTML page. Next, we'll need a server-side template to call for content: William Shakespeare: Poet Laureate


The last thing we'll need is the actual script to create our example Panel: Example 1: scripts\chapter15_01.js Ext.onReady(function(){ var example1 = new Ext.Panel({ applyTo:'chap15_ex01', title:'Chapter 15: Example 1', width:250, height:250, frame:true, autoLoad:{ url:'example1ajax.html' } }); });

Calling the ch13ex1.html template in the browser will run this basic script. Let's look over the code to see what we're doing: 1. We wait until the DOM is rendered (Ext.onReady() function). 2. We create a new Ext.Panel object, rendered to the chap13_ex01 element (a

on the rendered page). 3. We load in the contents of the external URL example1ajax.html. [ 316 ]

Chapter 15

It is very simple to pull in an HTML template as content for a Panel item. But we would really like dynamic data. Let's build on this example, and pull in data from an application server. We can use the same autoLoad attribute to call an application server processing page to return data. Ext JS is a client-side scripting library and, as such, you can use any server-side programming language that you feel comfortable with. You may have noticed that some earlier examples in this book are coded in PHP. Examples within this chapter, and the next, require the Adobe ColdFusion server to process the dynamic data, and require you to download and install the free Developer's Edition to run the examples. At this point, we're using ColdFusion to illustrate two different points: •

That any server-side processor can feed data to Ext JS.

•

That not every application server, or remote application, will return data in a standard format. Our examples of Custom Data Readers, later in this chapter, will iterate this point further.

The free Adobe ColdFusion Developer's Edition server is available at http://www.adobe.com/products/coldfusion. Review the sample README.txt file for more detailed instructions on accessing the example files for this chapter.

For Example 2, we'll change our

id to chap15_ex02, and use the chapter15_02.js file to load the data using a different approach, which

now reads as follows:

Example 2: scripts\chapter15_02.js var example2 = new Ext.Panel({ applyTo:'chap15_ex02', title:'Chapter 15: Example 2', width:250, height:250, frame:true, autoLoad:{ url:'Chapter15Example.cfc', params:{ method:'example2', returnFormat:'plain', id: 1 } } });

[ 317 ]

It's All About the Data

You'll notice that the URL is now calling an Adobe ColdFusion Component (CFC), passing in some parameters to get its results. We have a very basic CFC, which runs a small query based on the passed parameters to generate the content that is passed back through the AJAX call. Example 2: Chapter_15\Chapter15Example.cfc SELECT firstName, lastName, bio FROM Authors WHERE authorID = #q.firstName# #q.lastName#
#Replace(q.bio,"\n","
","all")#


As the purpose of this book isn't to teach you a server-side language, let's break this down in the simplest way. The CFC takes an argument of id, which is passed into a query of the Authors table. If a record is returned from the query, a basic string is returned in a predetermined format. The AJAX call (autoLoad) is passing several parameters: •

The method to run within the CFC

•

The format type to return (plain text, in this case)

•

The method arguments (in this case id) [ 318 ]

Chapter 15

Gotchas with remote data

You must remember that you should call data only via AJAX from the domain of your site. Attempting to reference data from a site outside of your domain will error out at the browser level, as it's considered to be cross-site scripting. Cross-site scripting is a means of delivering malicious scripts to an unsuspecting user, generally from outside of the site that they're visiting. Most modern browsers now have built-in facilities to prevent this type of attack. Ext JS does provide facilities for bypassing this restriction, via the Ext.data.ScriptTagProxy, but this should only be used if you are confident of the security of the data you are requesting, and its effect on your application.

Other formats

Ext JS has the capability to consume external data in a variety of formats: Format

Example

Plain Text

Eric Clapton is a consummate guitarist

HTML

Jimi Hendrix is considered, by some, to have been one of the finest blues guitarists that ever lived

JSON

{ 'members': 4, 'band': [ {'id':1,'first_name':'John', 'last_name':'Lennon'}, {'id':2,'first_name':'Paul', 'last_name':'McCartney'}, {'id',3,'first_name':'George', 'last_name':'Harrison'}, {'id':4,'first_name':'Ringo', 'last_name':'Starr'} ] };

XML

<members>4 <member> Jimmy Page <member> Robert Plant

... [ 319 ]

It's All About the Data

Format JavaScript Array

Example var PinkFloyd = [ ['1','David','Gilmour'], ['2','Roger','Waters'], ['3','Richard','Wright'], ['4','Nick','Mason'] ]

The format that you choose may be decided according to the Ext JS object you are using. Many developers like to use XML, as many databases (MS SQL, Oracle, MySQL, PostgreSQL, and DB2 to name a few) can return it natively, and many RESTful web services use it. Although this is a good thing, especially when working with varying external applications, XML can be very verbose at times. Data calls that return small sets of data can quickly clog up the bit stream because of the verbosity of the XML syntax. Another consideration with XML, is the browser engine. An XML data set that looks fine to Mozilla Firefox may be rejected by Internet Explorer, and Internet Explorer's XML parsing engine is slow as well. JSON, or JavaScript Object Notation, data packages tend to be much smaller, taking up less bandwidth. JSON is often preferred over XML for exactly these reasons. If the object you're using can accept it, a simple array can be even smaller, although you will lose the descriptive nature that the JSON or XML syntaxes provide.

The data Store object

Most Ext JS objects (and even Panel instances, with some additional work) take data as Records or Nodes. Records are typically stored within a data Store object. Think of a Store as being similar to a spreadsheet, and each record as being a row within the spreadsheet, or as a table in your server-side database, with each record representing a row in that table. The data package contains many objects for interacting with data. You have several different Store subclasses: •

JsonStore: Store object specifically for working with JSON data

•

ArrayStore: Store object for working with arrays

•

XMLStore: Store object for working with XML

•

GroupingStore: Store object that holds 'grouped' datasets

[ 320 ]

Chapter 15

Any Store will require some kind of Reader object to parse the inbound data, and again the data package has several Reader subclasses: •

JsonReader: For working with JSON datasets

•

ArrayReader: For working with JavaScript arrays

•

XmlReader: For working with XML datasets The TreePanel object doesn't use a traditional data Store, but has its own specialized Store called a TreeLoader, which is passed into the configuration through the loader config option. The TreeLoader accepts simple arrays of definition objects, much like those expected by an ArrayReader. See the Ext JS API (http://www.extjs.com/deploy/ dev/docs/?class=Ext.tree.TreeLoader) for more information.

Defining data

Store objects are easily configured, requiring the source of the data and a

description of the expected records. Our applications know to expect data, but we have to tell them what the data is supposed to look like. Let's say, for instance, that our application manages media assets for our site. We would have a server-side object that queries a folder in our file system and returns information on the files that the folder contains. The data returned might look something like this: { files: [ {name: 'beatles.jpg', path:'/images/', size:46.5, lastmod: '2001-12-21 00:00:00'}, {name: 'led_zeppelin.jpg', path:'/images/', size:43.2, lastmod: '2001-12-21 00:00:00'}, {name: 'the_doors.jpg', path: '/images/', size:24.6, lastmod: '2001-12-21 00:00:00'}, {name: 'jimi_hendrix.jpg', path: '/images/', size:64.3, lastmod: '2001-12-21 00:00:00'} ] }

This is a small JSON dataset. Its root attribute is files, which is an array of objects. Now we have to define this data for our application: var MediaFile = new Ext.data.Record.create([{ name: 'Name', mapping: 'name' },{ [ 321 ]

It's All About the Data name: 'FilePath', mapping: 'path' },{ name: 'FileSize', mapping: 'size', type: 'float' },{ name: 'LastModified', mapping: 'lastmod', type: 'date', dateFormat: 'Y/m/d' }]);

We've applied a name that each field will be referenced by within our application, mapping it to a variable within a dataset object. Many variables will automatically be typed, but you can force (cast) the 'type' of a variable for greater definition and easier manipulation. The various variable types are: •

auto (the default, which implies no conversion)

•

string

•

int

•

float

•

boolean

•

Date

We've also applied special string formatting to our Date object, to have our output the way we want. Dates are typically passed as string objects, which usually have to be converted into Date objects for proper manipulation. By specifying a Date format, Ext JS will handle the conversion using the dateFormat we define. The Ext JS documentation for the Date object provides an extensive format list, which we can use to define the hundreds of Date string permutations we may come across in our code. As of Ext JS 3.0, custom Date formats may also be defined.

[ 322 ]

Chapter 15

More on mapping our data

In the previous example, we covered the definition of a simple JSON object. The same technique is used for XML objects, with the only difference being how to map a record field to a specific node. That's where the mapping config option comes in. This option can take a DOM path to the node within the XML. Take the following example: <members>4 <member> Jimmy Page <member> Robert Plant ...

To create a mapping of the first_name node you would have the config look like this: {name: 'First Name', mapping:'member > first_name,', type: 'string'}

In creating our mapping, we utilize an Element Selector that states 'all direct children of member that have first_name'. To get a good handle on selector syntax, review the Ext JS API documentation on the Ext.DomQuery class. JavaScript arrays are easier, as they don't require mapping, other than defining each field in the same order it would be seen in the array: var PinkFloyd = [ ['1','David','Gilmour'], ['2','Roger','Waters'], ['3','Richard','Wright'], ['4','Nick','Mason'] ]

Note here that we won't create() a record constructor, but just use the fields config option of the Store. fields:[ {name:'id'}, {name:'first_name'}, {name:'last_name'} ]

[ 323 ]

It's All About the Data

Pulling data into the Store

It is almost as easy to retrieve data from the server as it was to populate the Panel object earlier, and we can do so using a very similar syntax. Example 3: scripts\chapter15_03.js var ourStore = new Ext.data.Store({ url:'Chapter15Example.cfc', baseParams:{ method: 'getFileInfoByPath', returnFormat: 'JSON', queryFormat: 'column', startPath: '/images/' }, reader: new Ext.data.CFQueryReader({ id:'name' },[ {name:'file_name',mapping:'name'}, {name:'file_size',mapping:'size',type:'int'}, 'type', {name:'lastmod',mapping:'datelastmodified',type:'date'}, {name:'file_attributes',mapping:'attributes'}, 'mode', 'directory' ]), listeners:{ beforeload:{ fn: function(store, options){ if (options.startPath && (options.startPath.length > 0)){ store.baseParams.startPath = options.startPath; } }, scope:this }, load: { fn: function(store,records,options){ console.log(records); } }, scope:this } }); ourStore.load();

[ 324 ]

Chapter 15

This ties all of our pieces together to create our data Store object. First, we use the url config option to define the location from where we will get our data. Then, we set the initial set of parameters to pass on the load request. Finally, it may be that we want to conditionally pass different parameter values for each request. For this, we can define a special 'listener' to pass new information. In this case, whenever the load() method is called, if the startPath property is passed into the method as an argument, before the Store retrieves the data it will change the startPath base parameter to match the value passed in. Where's the screenshot? Ok, that's a valid question. A data Store, by itself, has no visible output in the browser display. This is why tools like Firefox with the Firebug plugin, or the Aptana development IDE can be so important when doing JavaScript development. These tools can allow you to direct processing output to special windows, to monitor what's going on within your application.

Using a DataReader to map data

In our previous code example we used a custom DataReader to "read" the data being returned from the server-side call. Some applications can natively return data in XML, or even JSON, but it might not always be in the format Ext JS is expecting. As an example, the JsonStore, with its built-in JsonReader, expects an incoming dataset in the following format: { 'rootAttribute': [ { 'attr1': 'First record', 'attr2': '0' },{ 'attr1': 'Second record', 'attr2': '3.5' } ] }

This (JSON) object has a rootAttribute property, which is the name of the root of the dataset, containing an array of objects. Each of these objects has the same attributes. The attribute names are in quotes. Values are typically in quotes, with the exception of numbers, which may or may not be in quotes.

[ 325 ]

It's All About the Data

So, if a server-side call returns data in this expected format, then the base JsonReader included within the JsonStore will automatically parse the received datasets to populate the Store object. We'll emulate this in our next example, by using an example JSON set from earlier in this chapter, and feeding it into a JsonStore object through its data attribute: Example 4: scripts\chapter15_04.js var dataSet = { files: [ {name: 'beatles.jpg', path:'/images/', size:46.5, lastmod:'2001-12-21 00:00:00'}, {name: 'led_zeppelin.jpg', path:'/images/', size:43.2,lastmod: '2001-12-21 00:00:00'}, {name: 'the_doors.jpg', path: '/images/', size:24.6, lastmod:'2001-12-21 00:00:00'}, {name: 'jimi_hendrix.jpg', path: '/images/', size:64.3,lastmod: '2001-12-21 00:00:00'} ] }; var newSt = new Ext.data.JsonStore({ data: dataSet, root: 'files', idProperty: 'name', fields:[ 'name', {name:'FilePath',mapping:'path'}, {name:'FileSize',mapping:'size',type:'float'}, {name:'LastModified',mapping:'lastmod',type:'date'} ], listeners:{ load: { fn: function(store,records,options){ console.log(records); }, scope:this } } });

[ 326 ]

Chapter 15

A call to a server-side application that returns JSON in the standard format would behave the same way. But what happens if the server-side application uses a slightly different format? As an example, the Adobe ColdFusion server (starting from version 8) can automatically return JSON datasets for remote requests, translating any of ColdFusion's native data types into JSON data. But ColdFusion's JSON formatting is typically different, especially when dealing with query data (which is what a dataset would usually be created from). Here's an example of a JSON dataset being returned from a ColdFusion query object: { "COLUMNS":["NAME","SIZE","TYPE","DATELASTMODIFIED","ATTRIBUTES", "MODE","DIRECTORY"], "DATA":[ ["IMG1.jpg",582360,"File","June, 13 2003 23:50:08","","","H:\\wwwroot\\ExtBook\\images"], ["IMG2.JPG",1108490,"File","June, 13 2003 23:50:52","","","H:\\wwwroot\\ExtBook\\images"], ["IMG3.JPG",1136108,"File","June, 13 2003 23:51:02","","","H:\\wwwroot\\ExtBook\\images"], ["IMG4.JPG",1538506,"File","June, 13 2003 23:51:12","","","H:\\wwwroot\\ExtBook\\images"] ] }

All of the data we need is here, but the format can't be properly parsed by the base JsonReader. So what do we do now?

Using a custom DataReader

Ext JS's built-in classes provide outstanding ease of use 'out-of-the-box', but (as we can see) sometimes we need something a little special, possibly due to a different implementation for a specific application server (such as ColdFusion), or possibly due to an external application API (Flickr for example). We could probably implement something on the server-side to put our data in the necessary format, but this creates unnecessary overhead on our server-side platform. Why not just use the client to handle these minor transformations? This helps distribute the load in our applications, and makes more effective use of all of the resources that we have on hand. Ultimately, though, the true point is that we don't always have control of our remote data sources, and that we can adapt our Ext JS applications to accept data from most any source. Ext JS provides us with the facilities for creating custom DataReaders for mapping our data, as well as simple means (the reader config option) for defining these readers in our Store. [ 327 ]

It's All About the Data

In our current exercise, we're lucky in that we don't have to write our own DataReader. As the Adobe ColdFusion server platform is so widely used, the Ext JS community has already produced a custom reader just for this task. A simple search of the Ext JS forums (http://extjs.com/forum/) will help you find many custom readers for data in a variety of formats. Just take the time to verify (read) the code prior to use, and thoroughly test, because it is being provided by a third party. By using the CFQueryReader, with a few minor modifications to our script we can easily read the JSON data format being returned by ColdFusion. Include a <script> tag in your calling template to include the CFQueryReader.js file, prior to the <script> tag for your custom script. Then we'll define our custom reader by specifying some details about our data; the field to use as a record ID, and the field definitions: new Ext.data.CFQueryReader({ idProperty:'name' },[ {name:'file_name',mapping:'name'}, {name:'file_size',mapping:'size',type:'int'}, 'type', {name:'lastmod',mapping:'datelastmodified',type:'date'}, {name:'file_attributes',mapping:'attributes'}, 'mode', 'directory' ]);

Next, we'll change our data Store from being a JsonStore to being the base Store object type, and apply our custom reader to the reader config attribute: var ourStore = new Ext.data.Store({ ...

reader: new Ext.data.CFQueryReader({ ...

We also remove the fields, id, and root properties from the Store definition, as these are now all handled from within the reader's definition, or by the custom reader itself. The last thing we'll do is apply another custom listener to our script, so that we can verify whether the dataset is properly loaded. Let's modify our listeners config option, so that we can attach a function to the Store object's load event listener: listeners:{ load:{ fn: function(store, records, options){ console.log(records); [ 328 ]

Chapter 15 }, scope: this } }

If you're using Internet Explorer for development, then this line of code will break, as the console object isn't natively supported in that environment (you can include additional scripts to use the console.log() method in IE, like the one found at http://www.moxleystratton.com/article/ie-console). Firefox, with the Firebug plugin, will now give you some output once the data has been retrieved, parsed, and loaded into the data Store, so that we can see that the data is now in our Store. A word about events: Many Ext JS objects have events that are fired when certain actions are taken upon them, or when they reach a certain state. An event-driven application, unlike a procedural programming model, can listen for changes in the application, such as the receipt of data or the change of a Record's value. Ext JS provides an extensive API, giving us the ability to apply custom event listeners to key actions within the application. For more information, review the object information within the Ext JS API at http://extjs.com/deploy/dev/docs/.

Our final script might now look like this: var ourStore = new Ext.data.Store({ url:'Chapter13Example.cfc', baseParams:{ method: 'getFileInfoByPath', returnFormat: 'JSON', queryFormat: 'column', startPath: '/images/' }, reader: new Ext.data.CFQueryReader({ id:'name' },[ {name:'file_name',mapping:'name'}, {name:'file_size',mapping:'size',type:'int'}, 'type', {name:'lastmod',mapping:'datelastmodified',type:'date'}, {name:'file_attributes',mapping:'attributes'}, 'mode', 'directory' ]), listeners:{ load: { [ 329 ]

It's All About the Data fn: function(store,records,options){ console.log(records); } }, scope:this } }); ourStore.load();

We've setup the load listener to notify us (in Firebug) when the records are received into our data Store. The load() method makes the remote data call, using the defined parameters, but the data isn't available until it's been returned from the server and properly parsed by our custom DataReader. The load event is then fired, and our load listener will respond accordingly. This now wraps up our code pieces, defining what our data will look like, configuring our custom reader, and setting up our data Store to pull in our JSON data. The load listener will display (within the Console tab of Firebug) the records retrieved from the server that are now in our Store.

Writing a custom DataReader

Sometimes we can't find a prebuilt custom reader in the Ext JS forums. In that case, we will have to write our own. Ext JS provides several readers already: the ArrayReader, JsonReader, and XmlReader classes. When defining our own custom DataReader, we will extend one of these classes. Our first step is to identify which class is best suited for us to extend. Going off our previous examples, let's take another look at the data returned for a ColdFusion query: { "COLUMNS":["NAME","SIZE","TYPE","DATELASTMODIFIED","ATTRIBUTES", "MODE","DIRECTORY"], "DATA":[ ["IMG1.jpg",582360,"File","June, 13 2003 23:50:08","","","H:\\wwwroot\\ExtBook\\images"], ["IMG2.JPG",1108490,"File","June, 13 2003 23:50:52","","","H:\\wwwroot\\ExtBook\\images"], ["IMG3.JPG",1136108,"File","June, 13 2003 23:51:02","","","H:\\wwwroot\\ExtBook\\images"], ["IMG4.JPG",1538506,"File","June, 13 2003 23:51:12","","","H:\\wwwroot\\ExtBook\\images"] ] }

[ 330 ]

Chapter 15

Analyzing this data packet, the first thing that comes to mind might be "this is JSON." Well, it is. But, if we look very closely, our data is actually an array, with each record being an array. Knowing this, the ArrayReader class seems be our best choice for our base reader class. Now we have to figure out how to extend that base class, so that our data will be properly read into our data Store. We covered extending Ext JS components in Chapter 13, Code for Reuse: Extending Ext JS.

We start that process by analyzing the ArrayReader class itself. No, not the API (though that may help), but the actual code itself. Within the Ext JS code, that we downloaded at the beginning of this book, you will see a pkgs directory under the root directory. Within this directory we will find a data-json-debug.js file. Open this file, and find the Ext.data.ArrayReader class. The first thing that we will notice is that the debug files contain a fair amount of comment documentation. Reading the initial comments for the ArrayReader, we can see that it extends the Ext.data.JsonReader. This means we might have to really research both classes, as figuring out how to extend the reader may require us to review the code for its base class as well. (This is suggested, as many functions called, within the methods of the ArrayReader, are defined within the JsonReader itself.) If we thoroughly review the code, we gain a better understanding of how each class currently performs its tasks, and gives us a blueprint for how to progress. After a thorough review of the code we find that the core of any data reader is the readRecords() method. This is the method that consumes the raw JSON output, interprets it, and places the records into the Store. Typical usage of the ArrayReader requires us to write our field definitions in the column order that data will come in. ColdFusion may return query columns in any order, so that method wouldn't be helpful. Luckily, the COLUMNS element of the base JSON element defines the order of data in each array element. After discovering this, it also becomes apparent that the ArrayReader is not the best choice for our base class, but rather an extension of the JsonReader. Because of this, the author of the CFQueryReader chose to override the readRecords() method of the base JsonReader, writing a solution for parsing the unique data formatting returned by ColdFusion. By studying the ArrayReader, the JsonReader, and the base DataReader (in the data-foundation-debug.js file), the author of CFQueryReader was able to figure out how to create proper data accessor methods so that a Store configured with the CFQueryReader would function just as any of the base Store objects would.

[ 331 ]

It's All About the Data

Here is what the final Custom Reader would look like (with comments): Ext.data.CFQueryReader = Ext.extend(Ext.data.JsonReader, { readRecords : function(o){ this.jsonData = o; var s = this.meta, Record = this.recordType, f = Record.prototype.fields, fi = f.items, fl = f.length, reset = false; // For backwards compatability with Ext 2.x if(typeof this.getJsonAccessor != "function"){ this.getJsonAccessor = this.createAccessor; } /* * Creating 'property' accessors, based on the availability * (or lack of) of certain meta properties */ if (!this.ef || !this.getQueryRoot) { if(s.successProperty) { this.getSuccess = this.getJsonAccessor(s. successProperty); } /* * Providing built in support for CF query objects within * structure objects, as is the case when a developer * uses the ConvertQueryForGrid() function of CF */ if(s.root){ this.getRoot = this.getJsonAccessor(s.root + '.DATA'); this.getQueryRoot = this.getJsonAccessor(s.root); } else { this.getRoot = (o.QUERY) ? this. getJsonAccessor('QUERY.DATA') : this.getJsonAccessor('DATA'); this.getQueryRoot = function(){ return (o.QUERY) ? o.QUERY : o; }; } if(s.totalProperty) { this.getTotal = this.getJsonAccessor(s.totalProperty); } else if(o.TOTALROWCOUNT) { this.getTotal = this.getJsonAccessor('TOTALROWCOUNT'); } } [ 332 ]

Chapter 15 var root = this.getRoot(o), c = root.length, totalRecords = c, success = true, cols = this.getQueryRoot(o).COLUMNS; /* * ColdFusion typically uppercases column names in it's return, * but certain ColdFusion frameworks maintain casing. To account * for this, and standardize returns and processing, we will * internally ensure that the column names are uppercased * for consistency */ for (var i = 0;i < cols.length;i++){ cols[i] = cols[i].toUpperCase(); } // Update the totalRecords if a total was passed in the base JSON object if(s.totalProperty || o.TOTALROWCOUNT){ var v = parseInt(this.getTotal(o), 10); if(!isNaN(v)){ totalRecords = v; } } // Update the success if a success was passed the in the base JSON object if(s.successProperty){ var v = this.getSuccess(o); if(v === false || v === 'false'){ success = false; } } // Create a array location mappings according to the COLUMNS output for(b=0;b < fl; b++){ var fMap = (fi[b].mapping !== undefined && fi[b].mapping !== null) ? fi[b].mapping : fi[b].name; fi[b].mapArrLoc = cols.indexOf(fMap.toUpperCase()); } // Now we create data accessor functions if (!this.ef || reset === true) { // Create methods for getting a record's ID value if (s.id || s.idProperty) { var g = this.getJsonAccessor(s.id || s.idProperty); [ 333 ]

It's All About the Data this.getId = function(rec){ var r = g(rec); return (r === undefined || r === "") ? null : r; }; } else { this.getId = function(){return null;}; } // Create extractor functions by field this.ef = []; for(var i = 0; i < fl; i++){ f = fi[i]; var map = (f.mapping !== undefined && f.mapping !== null) ? f.mapping : f.name; this.ef[i] = function(rec){ var r = rec[map]; return (r === undefined || r === "") ? null : r; }; } } var records = []; // Create individual records and put in the records array for(var i = 0; i < c; i++){ // loop all rows of data var n = root[i]; // n is a 'row' of data var values = {}; for(var j = 0, jlen = fl; j < jlen; j++){ f = fi[j]; // field reference var k = f.mapArrLoc !== undefined && f.mapArrLoc !== null ? f.mapArrLoc : j; // get the array position within the row for the field ref var v = n[k] !== undefined ? n[k] : f.defaultValue; // value is that array position within current row v = f.convert(v, n); // convert the value if necessary (as in type casting to date and stuff) values[f.name] = v; // build a values object by applying the current value to a key of the current 'field' } var rec = new this.recordType(values, this.getId(values)); // create Ext Record object of values object, assigning the id rec.json = values; // put raw values object in the 'json' attribute of the Record object records[i] = rec; // Build the complete array of Records to populate the Store } return { success: success, [ 334 ]

Chapter 15 records : records, totalRecords : totalRecords }; } });

Custom Data Readers often get updated as the Ext JS library matures. The Ext Team is constantly improving on the handling of data from remote sources. They try very hard to maintain backwards compatibility as much as possible, but custom readers aren't generally written by the Ext Team. This means that, should the Ext Team make changes to the core Ext.data package classes, a custom DataReader may need to be updated to function correctly. Just remember that we should test our application's data readers any time the core library is updated. The above DataReader is maintained in a repository on RIAForge (http://cfqueryreader.riaforge.org).

Getting what you want: finding data

Now that we have data (or so Firebug tells us, once it's received from the server), we'll typically need to manipulate it. Once we've loaded our data Store with records, the entire dataset remains resident in the browser cache, ready for manipulation or replacement. This data is persistent until we move away from the page or destroy the dataset or the data Store. Ext JS provides many different options for dealing with our data, all of which are documented within the API. Here, we'll explore some of the most common things to do.

Finding data by field value

The first thing we might want to do is find a specific record. Let's say we needed to know which record from our previous examples contains the picture of Jimi Hendrix: var jimiPicIndex = ourStore.find('NAME','Jimi',0,false,false);

This method would return the index of the first record that had Jimi as part of the value of the NAME field. It would start its search from the first record (0), as it is in JavaScript array notation, look for the string from the beginning of the field's value (using true here will search for the string in any location of the NAME field within any record), and perform a case-insensitive search.

[ 335 ]

It's All About the Data

Finding data by record index

Having the index is nice; at least we know which record it is now. But we also need to retrieve the record: var ourImg = ourStore.getAt(jimiPicIndex);

The getAt() method of the Store object will get a record at a specific index position within the Store.

Finding data by record ID

The best way to look for a unique record is by ID. This is the best way because your record ID is unique to the record as well. If you already know the ID of your record, this process just becomes easier. We used the NAME field as our ID, so let's find the record for the same: var ourImg = ourStore.getById('jimi_hendrix.jpg');

So, now we can find a record by partial value within a field, get a record by its specific index, or retrieve a record by its ID value.

Getting what you want: filtering data

Sometimes, you only need a specific subset of data from your Store. Your Store contains a complete dataset (for caching and easy retrieval), but you need it filtered to a specific set of records. As an example, the cfdirectory tag we used in our ColdFusion server-side call can return an entire directory listing, including all subdirectories. After retrieving the data, it may be that we only need the names of the files within the startPath that we posted. For this, we can filter our client-side cached dataset to get only the Records of type, File: ourStore.filter('TYPE','File',false,false);

This filters our dataset using the TYPE field. The dataset will now only contain records that have a TYPE field, with a value of File (matched from the beginning, and case-insensitive). After working with our filtered dataset, there will come a time when we want our original dataset back. Setting a filter on a Store persists on that object until we turn it off. When we filtered the dataset, the other records didn't go away. They're still sitting in cache, to the side, waiting to be recalled. Rather than query the server again, we can simply clear our filter: ourStore.clearFilter();

[ 336 ]

Chapter 15

Remote filtering: the why and the how

Client-side filtering is great, reducing our trips to the server. Sometimes, however, our record set is just too large to pull in at once. A great example of this is a paging grid. Many times, for performance reasons, we'll only be pulling in 25 Records at a time. The client-side filtering methods are fine if we only want to filter the resident dataset, but most of the time we'll want a filter applied to all of our data at the time we request it from the server. Sorting data on remote calls is pretty easy, as we can set the Store object's remoteSort property to true. So, if our Store was attached to a grid object, clicking on a column heading to sort the display would automatically reload the data, passing the value in its AJAX request. Filtering data on remote requests is a bit harder. Basically, we need to pass parameters through the Store object's load event, and act on those arguments in our server-side method. So, the first thing we'll need is some server-side code for handling our filtering and sorting. We'll return to our ColdFusion component to add a new method: Example 3: Chapter_15\Chapter15Example.cfc [ 337 ]

It's All About the Data SELECT #columnList# FROM q WHERE TYPE = [ 338 ]

Chapter 15

This might look complicated, but it really isn't! Again, our mission here isn't to learn ColdFusion, but it is important to have some understanding of what your server-side process is doing. What we have here is a method that takes some optional parameters related to sorting and filtering via an HTTP POST statement. We use the same cfdirectory tag to query the file system for a list of files and folders. The difference here is that we now conditionally apply some additional attributes to the tag, so that we can filter on a specific file extension, or sort by a particular column of the query. We also have a Query-of-Query statement to query our returned recordset if we want to filter further by the record TYPE, which is a filtering mechanism not built into the cfdirectory tag. Lastly, there's also some custom error handling to ensure that valid arguments are being passed into the method. We'll make a few modifications to our previous Store script as well. First, we'll need a few methods that can be called to remotely filter our recordset: filterStoreByType = function (type){ ourStore.load({dirFilter:type}); } filterStoreByFileType = function (fileType){ ourStore.load({fileFilter:fileType}); } clearFilters = function (){ ourStore.baseParams = new cloneConfig(initialBaseParams); ourStore.load(); }

[ 339 ]

It's All About the Data

We have methods here for filtering our Store by TYPE, for filtering by file extension, and for clearing the filters. The values passed into these methods are mapped to the proper remote method argument names. The beforeload listener of the Store automatically applies these arguments to the baseParams prior to making the AJAX call back to the server. The important thing to remember here is that each added parameter stays in baseParams, until the filters are cleared. It's also important to note that the load() method can take an options argument made up of four attributes: •

params

•

callback (a method to perform on load)

•

scope (the scope with which to call the callback)

•

add (pass true to add the load to the already-existing dataset)

ourStore.load({params:{dirFilter:type},callback:someMethodToCall,scope :this,add:false});

The clearFilter() method does not work with remote filtering, so we need to have a way to recall our initial baseParams when we need to clear our filters, and get our original dataset back. For this, we first abstract our baseParams configuration: var initialBaseParams = { method: 'getDirectoryContents', returnFormat: 'JSON', queryFormat: 'column', startPath: '/testdocs/' };

We then need a way to clone the config in our actual Store configuration. If we passed the initialBaseParams into the baseParams config option directly, and then filtered our dataset, the filter would be added to the initialBaseParams variable, as the variable gets passed by reference. As we want to be able to recall our actual beginning baseParams, we'll need to clone the initialBaseParams object. The clone gets set as the baseParams config option. Filters don't touch our original object, and we can recall them whenever we need to clearFilter(). For this, we'll need a simple method of cloning a JavaScript object: cloneConfig = function (config) { for (i in config) { if (typeof config[i] == 'object') { this[i] = new cloneConfig(config[i]); } else [ 340 ]

Chapter 15 this[i] = config[i]; } }

We can then change our baseParams attribute in our Store configuration: baseParams: new cloneConfig(initialBaseParams),

We used the same function within our clearFilters() method, to reset our baseParams to their initial configuration. Here is what our entire script looks like now: Example 4: scripts\chapter15_04.js cloneConfig = function (config) { for (i in config) { if (typeof config[i] == 'object') { this[i] = new cloneConfig(config[i]); } else this[i] = config[i]; } } Ext.onReady(function(){ var recordModel = [ {name:'file_name',mapping:'name'}, {name:'file_size',mapping:'size',type:'int'}, 'type', {name:'lastmod',mapping:'datelastmodified',type:'date'}, {name:'file_attributes',mapping:'attributes'}, 'mode', 'directory' ]; var ourReader = new Ext.data.CFQueryReader({idProperty:'name'}, recordModel); var initialBaseParams = { method: 'getDirectoryContents', returnFormat: 'JSON', queryFormat: 'column', startPath: '/testdocs/' }; var ourStore = new Ext.data.Store({ url:'Chapter12Example.cfc', baseParams: new cloneConfig(initialBaseParams), reader: ourReader, fields: recordModel, listeners:{ [ 341 ]

It's All About the Data beforeload:{ fn: function(store, options){ for(var i in options){ if(options[i].length > 0){ store.baseParams[i] = options[i]; } } }, scope:this }, load: { fn: function(store,records,options){ console.log(records); } }, scope:this } }); ourStore.load({params:{recurse:true}}); filterStoreByType = function (type){ ourStore.load({params:{dirFilter:type}}); } filterStoreByFileType = function (fileType){ ourStore.load({params:{fileFilter:fileType}}); } clearFilters = function (){ ourStore.baseParams = new cloneConfig(initialBaseParams); ourStore.load({params:{recurse:true}}); } });

To test our changes, we can put some links on our HTML page to call the methods that we've created for filtering data, which we can then monitor in Firebug. Example 4: Chapter_15\ch13ex5.html

Filter by 'File's
Filter by '.doc File's
Clear Filters

[ 342 ]

Chapter 15

After the page has loaded, we see the console logging the initial recordset being loaded into the Store. Clicking our first link will remove all of the directory records through filtering. Clicking our second link takes it a step further, and filters out any files other than those ending in .doc. The last link resets the filters to the original baseParams and reloads the initial recordset.

Dealing with Recordset changes

One of great things about Ext JS data Store objects is change management. Our applications might attack changing records in a variety of ways, from editable data Grids to simple Forms, but changing that data on the client won't update the remote data Store at the server. One of the easiest things to do this is to apply an update event listener to our Store object. We applied the load listener before. Now, let's apply an update listener to our script. listeners:{ load: { fn: function(store, records, options){ console.log(records); }, scope: this }, update: { fn: function(store, record, operation){ switch (operation){ case Ext.record.EDIT: // Do something with the edited record break; case Ext.record.REJECT: // Do something with the rejected record break; case Ext.record.COMMIT: // Do something with the committed record break; } }, scope:this } }

[ 343 ]

It's All About the Data

When a record is updated, the update event fires in the Store, passing several objects into the event. The first is the Store itself, which is good for reference. The second is the record that's been updated. The last object is the state of the record that was updated. Here, we have laid out a quick switch/case statement to trigger different actions according to the state of the record. We can add code into the action block for the Ext.record.EDIT state to automatically send every edit to the server for immediate record revision. One other option that we can address is the Ext.record.COMMIT state. It is sometimes better to let the user affect many different changes, to many different records, and then send all the updates at once. ourStore.commitChanges();

This will collect all of the edited records, flag them by using Ext.record.COMMIT, and then the update event would fire and affect each record. Our last operation state is perfect for processing this situation, for which we can add additional client-side validation, or AJAX validation, or whatever our process might call for. The Ext.record.REJECT state is generally set directly by the data Store, whereby the Store rejects any changes made to the record, and will revert the record's field values back to their original (or last committed) state. This might occur if a value of the wrong data type is passed into a field.

Taking changes further: the DataWriter

Ext JS 3.0 introduced many new packages and classes for working with data. Ext JS has always supplied DataReaders, but now we may also take advantage of DataWriters. In fact, we can create APIs around our data access, providing simple CRUD (Create, Read, Update, Delete) access directly from within our configurations. Much of the interaction that we were previously required to script out, we may now handle via simple configuration. Our data Store objects know, automatically, when records have changed, and we can now handle these events without adding in a ton of additional code. Let's go back and look at the code from Example 2. Here we had pulled a single record from a database by passing in an author ID. Let's expand upon this by pulling all of the current records and putting them into a small editor grid. Example 5: Chapter_15\ch15ex6st1.html Ext.onReady(function(){ var recDefinition = [ {name:'authorID',type:'int'}, [ 344 ]

Chapter 15 'firstName', 'lastName', 'bio' ]; var ourReader = new Ext.data.CFQueryReader({idProperty:'authorID',ro ot:'query'},recDefinition); var ourStore = new Ext.data.Store({ url:'Chapter13Example.cfc', baseParams:{ method: 'GetAuthors', returnFormat: 'JSON', queryFormat: 'column' }, reader: ourReader, listeners:{ load: { fn: function(store,records,options){ console.log(records); } }, scope:this } }); var fm = Ext.form; var ourGrid = new Ext.grid.EditorGridPanel({ store: ourStore, cm: new Ext.grid.ColumnModel({ columns:[{ id: 'authorID', dataIndex: 'authorID', width: 40 },{ id: 'firstName', dataIndex: 'firstName', header: 'First Name', width: 150, editor: new fm.TextField({ allowBlank: false }) },{ id: 'lastName', dataIndex: 'lastName', header: 'Last Name', width: 150, [ 345 ]

It's All About the Data editor: new fm.TextField({ allowBlank: false }) },{ id: 'bio', dataIndex: 'bio', header: 'Bio', width: 350, editor: new fm.TextField() }] }), renderTo: 'chap13_ex06', width: 750, height: 600, title: 'Authors', frame: true, clicksToEdit: 1 }); ourStore.load(); });

Example 5: GetAuthors method SELECT authorID, firstName, lastName, bio FROM Authors [ 346 ]

Chapter 15

This populates all records of the Author table to an EditorGridPanel. This is only the first step. Right now we can edit the grid, changing the records in the local data Store, but that isn't changing the data back at the server. For this, we really need our DataWriter. DataWriters allow us to configure a proxy object for handling all of our basic CRUD operations. Let's configure a standard HttpProxy object by defining an API for our basic CRUD operations. First we'll write the API strictly to do exactly what our previous example does, creating our proxy and adjusting our Store configuration. Example 5: scripts\chapter15_06_02.js var ourProxy = new Ext.data.HttpProxy({ api:{ read: 'Chapter13Example.cfc?method=GetAuthors&returnFormat=JSON' } }) var ourStore = new Ext.data.Store({ proxy: ourProxy, reader: ourReader, listeners:{ load: { fn: function(store,records,options){ console.log(records); } }, scope:this } });

We've placed our ColdFusion specific params directly in the url attribute of the API call, though we could use a restful url to specify our calling methods, should we have a controller to handle them. Let's further extend our API to handle updated records. First we'll need to add the DataWriter to our script. We can choose between a JsonWriter or an XmlWriter. Since ColdFusion can easily handle JSON, we'll use the JsonWriter: var ourWriter = new Ext.data.JsonWriter();

[ 347 ]

It's All About the Data

We can then add an update item to our API proxy: var ourProxy = new Ext.data.HttpProxy({ api:{ read: 'Chapter13Example.cfc?method=GetAuthors&returnFormat=JSON', update: 'Chapter13Example.cfc?method=UpdateAuthors&returnFormat=J SON' } });

In this default configuration each cell change of the Editor grid will change a value, and with each change a db call would be made to the update API method, passing a query object with the ID of the record (the authorID) , and the field/value pair. This has advantages, but it makes sense to call the server with a complete record, or even a batch of records. This is done by setting the autoSave attribute of the Store to false, then calling save only when ready. var ourStore = new Ext.data.Store({ proxy: ourProxy, writer: ourWriter, reader: ourReader, autoSave: false });

We'll also want to change our DataWriter as well. We can use the listful attribute, to make the records returned to the server an array, for one record or a hundred. This will make it easier to write generic server processes. We'll also use the writeAllFields attribute so that we send all of the fields of a record, not just those that changed. This is a little more data back and forth, but it helps us to write better process. var ourWriter = new Ext.data.JsonWriter({listful: true,writeAllFields: true});

The last thing we'll do is add a Store listener to the save event, so we can clear those 'dirty' flags from the grid once our updates are made. var ourStore = new Ext.data.Store({ proxy: ourProxy, writer: ourWriter, reader: ourReader, autoSave: false, listeners:{ save:{ fn: function(store, batch, data){ store.commitChanges(); [ 348 ]

Chapter 15 }, scope: this } } });

We can now update multiple records at one time, by making the changes in our EditorGridPanel and clicking the "Save Changes" button. Example 5: scripts\chapter15_06_03.js Ext.onReady(function(){ var recDefinition = [ {name:'authorID',type:'int'}, 'firstName', 'lastName', 'bio' ]; var ourReader = new Ext.data.CFQueryReader({idProperty:'authorID',ro ot:'query'},recDefinition); var ourWriter = new Ext.data.JsonWriter({listful:true,writeAllField s:true}); var ourProxy = new Ext.data.HttpProxy({ api:{ read: 'Chapter13Example.cfc?method=GetAuthors&returnFormat=JS ON', update: 'Chapter13Example.cfc?method=UpdateAuthors&returnFormat =JSON' } }); var ourStore = new Ext.data.Store({ proxy: ourProxy, writer: ourWriter, reader: ourReader, autoSave: false, listeners:{ save:{ fn: function(store, batch, data){ store.commitChanges(); }, scope: this } } }); var fm = Ext.form; [ 349 ]

It's All About the Data var ourGrid = new Ext.grid.EditorGridPanel({ store: ourStore, cm: new Ext.grid.ColumnModel({ columns:[{ id: 'authorID', dataIndex: 'authorID', width: 40 },{ id: 'firstName', dataIndex: 'firstName', header: 'First Name', width: 150, editor: new fm.TextField({ allowBlank: false }) },{ id: 'lastName', dataIndex: 'lastName', header: 'Last Name', width: 150, editor: new fm.TextField({ allowBlank: false }) },{ id: 'bio', dataIndex: 'bio', header: 'Bio', width: 350, editor: new fm.TextField() }] }), renderTo: 'chap15_ex06', width: 750, height: 600, title: 'Authors', frame: true, clicksToEdit: 1, bbar:[{ text: 'Save Changes', handler: function(){ ourStore.save(); } }] }); [ 350 ]

Chapter 15 ourStore.load(); });

Chapter15Example.cfc UpdateAuthors method: UPDATE Authors SET firstName = '#i.firstName#', lastName = '#i.lastName#', bio = '#i.bio#' WHERE authorID = #Val(i.authorID)#

Although we won't cover it here, it's just as easy to add the 'create' and 'destroy' methods to your API. The 'destroy' would remove the record from the datasource by authorID, while the 'create' would write a new record to the datasource, returning the authorID that was created.

Many objects use a Store

The beauty of the Store object is in its many uses. So many objects, within the Ext JS library, can consume a Store as part of their configuration, automatically mapping data in many cases.

[ 351 ]

It's All About the Data

Store in a ComboBox

For example, the ComboBox object can take a Store, or any of its subclasses, as a data provider for its values: var combo = new Ext.form.ComboBox({ store: states, displayField: 'state', valueField: 'abbreviation', typeAhead: true, mode: 'remote', triggerAction: 'all', emptyText: 'Select a state...', selectOnFocus: true, applyTo: 'stateCombo' });

This ComboBox takes a Store object called states, and maps its state field to the display, while mapping the abbreviation field to its underlying selected value.

Store in a DataView

The DataView object is one of the most powerful objects within Ext. This object can take a Store object, let us apply a Template or XTemplate to each Record (which the DataView refers to as a Node), and have each item render within the DataView, contiguously, wrapping items as they run out of space. The DataView opens up some very interesting ways to visually produce contact lists, image galleries, and file system explorers, and opens up our applications to be able to exchange data among a variety of objects through custom drag-and-drop functionality.

Stores in grids

We've seen examples of applying a data Store to grid in Chapter 5 of this book. There are several different types of grids (Editor, Grouping, Property, and Basic Grids), but all of them take Store objects as input, and the applicable ColumnModel, to coordinate their data display. The Grid objects and the ComboBox are probably the most prevalent uses of Store objects, with the Grid and the DataView being the two primary means of displaying multiple records of data. The Tree object takes a special data source called a TreeLoader. The TreeLoader is actually part of the Tree package of classes, and does not extend the base Store object, although it operates in much the same way. Rather than Record objects, the TreeLoader takes an array of objects, which it then converts into Node instances. The structure to its incoming data is something like this: [ 352 ]

Chapter 15 var dataset = [{ id: 1, text: 'Node 1', leaf:: false },{ id: 2, text: 'Node 2', leaf: true }];

When a leaf is true, then it is an expandable item, which will query the server for further data when passing the node data. A leaf:false statement says that the Node has no children.

Summary

In this chapter, we've learned how to pull dynamic, server-side data into our applications. Ext JS's Store objects, with their versatility and mappable syntax, are easily-configured as data sources for a lot of Ext JS objects. In this chapter, we've bound simple external data to a Panel object, gone over the various data formats that Ext JS can consume, and seen a basic overview of the data Store object and some of its more important subclasses. Getting into the meat of things, we learned how to define our data using the record object, after which we learned how to populate our Store with records from a remote data source. We also learned about the purpose behind DataReader instances, the different ones available to you, and how to create a custom DataReader. We got busy learning Store manipulation techniques such as finding records by field values, indexes, or IDs. We also touched on filtering our Store objects to get a working subset of data records. We also talked about dealing with local data changes via the update event listener. Then we started sending data back, registering local data Store changes back to the server with DataWriter definitions. Finally, we covered some of the other Ext JS objects that use the Store, opening the doors to external data within multiple facets of our applications.

[ 353 ]

Marshalling Data Services with Ext.Direct When the Ext team set out to update Ext JS, for their 3.0 release, they began by looking at code from hundreds of developers, trying to see what holes needed to be filled; what needs weren't being met by the library that developers re-wrote over and over again. Overwhelmingly, they kept coming back to how developers accessed and updated data with the server. Developers would write thousands of lines of repetitive code to handle data transfer, in and out. From this discovery spawned Ext.Direct, a specification and supporting classes that allowed developers to define all of their server data interaction points from one consolidated location. In this chapter, we'll discuss: • How a developer goes about tapping into the power of Ext.Direct • Writing our own server-side stack • Choosing a configuration that works for our environment • Building out our API • Setting up our own Programmatic Router to 'direct' our requests where we need them to go • Finally, we'll put all of the pieces together

What is Direct?

Part of the power of any client-side library is its ability to tap nearly any server-side technology (as we demonstrated in Chapter 15, It's All About the Data). That said, with so many server-side options available there were many different implementations being written for accessing the data.

Marshalling Data Services with Ext.Direct

Direct is a means of marshalling those server-side connections, creating a 'one-stop-shop' for handling your basic Create, Read, Update, and Delete actions against that remote data. Through some basic configuration, we can now easily create entire server-side API's that we may programmatically expose to our Ext JS applications. In the process, we end up with one set of consistent, predefined methods for managing that data access.

Building server-side stacks

There are several examples of server-side stacks already available for Ext JS, directly from their site's Direct information. These are examples, showing you how you might use Direct with a particular server-side technology, but Ext provides us with a specification so that we might write our own. Current stack examples are available for: • PHP • .NET • Java • ColdFusion • Ruby • Perl These are examples written directly by the Ext team, as guides, as to what we can do. Each of us writes applications differently, so it may be that our application requires a different way of handling things at the server level. The Direct specification, along with the examples, gives us the guideposts we need for writing our own stacks when necessary. We will deconstruct one such example here to help illustrate this point. Each server-side stack is made up of three basic components: • Configuration—denoting which components/classes are available to Ext JS • API—client-side descriptors of our configuration • Router—a means to 'route' our requests to their proper API counterparts

[ 356 ]

Chapter 16

To illustrate each of these pieces of the server-side stack we will deconstruct one of the example stacks provided by the Ext JS team. I have chosen the ColdFusion stack because: • It is a good example of using a metadata configuration • It works well with our examples from Chapter 15, It's All About the Data • DirectCFM (the ColdFusion stack example) was written by Aaron Conran, who is the Senior Software Architect and Ext Services Team Leader for Ext, LLC As we've stated before, the purpose of this book isn't to teach you a server-side programming language. Each of the following sections will contain a "Stack Deconstruction" section to illustrate each of the concepts. These are to show you how these concepts might be written in a server-side language, but you are welcome to move on if you feel you have a good grasp of the material.

Configuration

Ultimately the configuration must define the classes/objects being accessed, the functions of those objects that can be called, and the length (number) of arguments that the method is expecting. Different servers will allow us to define our configuration in different ways. The method we choose will sometimes depend upon the capabilities or deficiencies of the platform we're coding to. Some platforms provide the ability to introspect components/classes at runtime to build configurations, while others require a far more manual approach. You can also include an optional formHandler attribute to your method definitions, if the method can take form submissions directly. There are four basic ways to write a configuration.

Programmatic

A programmatic configuration may be achieved by creating a simple API object of key/value pairs in the native language. A key/value pair object is known by many different names, depending upon the platform to which we're writing for: HashMap, Structure, Object, Dictionary, or an Associative Array. For example, in PHP you might write something like this: $API = array( 'Authors'=>array( 'methods'=>array( 'GetAll'=>array( 'len'=>0 ),

[ 357 ]

Marshalling Data Services with Ext.Direct 'add'=>array( 'len'=>1 ), 'update'=>array( 'len'=>1 ) ) ) );

Look familiar? It should, in some way, as it's very similar to a JavaScript object. The same basic structure is true for our next two methods of configuration as well.

JSON and XML

This may look far more familiar, after all we've been through this book. When we've written Ext code so far, we've often passed in configuration objects to our various Ext components. The same is true for this configuration, as we can pass in a basic JSON configuration of our API: { Authors:{ methods:{ GetAll:{ len:0 }, add:{ len:1 }, update:{ len:1 } } } }

Or we could return an XML configuration object: <methods> <method name="GetAll" len="0" /> <method name="add" len="1" /> <method name="update" len="1" /> [ 358 ]

Chapter 16

All of these forms have given us the same basic outcome, by providing a basic definition of server-side classes/objects to be exposed for use with our Ext applications. But, each of these methods require us to build these configurations basically by hand. Some server-side options make it a little easier.

Metadata

There are a few server-side technologies that allow us to add additional metadata to classes and function definitions, using which we can then introspect objects at runtime to create our configurations. The following example demonstrates this by adding additional metadata to a ColdFusion component (CFC):

This is a very powerful method for creating our configuration, as it means adding a single name/value attribute (ExtDirect="true") to any object and function we want to make available to our Ext application. The ColdFusion server is able to introspect this metadata at runtime, passing the configuration object back to our Ext application for use.

Stack deconstruction—configuration

The example ColdFusion Component provided with the DirectCFM stack is pretty basic, so we'll write one slightly more detailed to illustrate the configuration. ColdFusion has a facility for attaching additional metadata to classes and methods, so we'll use the fourth configuration method for this example, Metadata. We'll start off with creating the Authors.cfc class:

[ 359 ]

Marshalling Data Services with Ext.Direct

Next we'll create our GetAll method for returning all the authors in the database: SELECT AuthorID, FirstName, LastName FROM Authors ORDER BY LastName

We're leaving out basic error handling and stuff, but these are the basics behind it. The classes and methods we want to make available will all contain the additional metadata.

Building your API

So now that we've explored how to create a configuration at the server, we need to take the next step by passing that configuration to our Ext application. We do this by writing a server-side template that will output our JavaScript configuration. Yes, we'll actually dynamically produce a JavaScript include, calling the server-side template directly from within our <script> tag: <script src="Api.cfm">

How we write our server-side file really depends on the platform, but ultimately we just want it to return a block of JavaScript (just like calling a .js file) containing our API configuration description. The configuration will appear as part of the actions attribute, but we must also pass the url of our Router, the type of connection, and our namespace. That API return might look something like this: Ext.ns("com.cc"); com.cc.APIDesc = { "url": "\/remote\/Router.cfm", "type": "remoting" "namespace": "com.cc", "actions": { "Authors": [{ "name": "GetAll", "len": 0 },{ "name": "add", [ 360 ]

Chapter 16 "len": 1 },{ "name": "update", "len": 1 }] } };

This now exposes our server-side configuration to our Ext application.

Stack deconstruction—API

The purpose here is to create a JavaScript document, dynamically, of your configuration. Earlier we defined configuration via metadata. The DirectCFM API now has to convert that metadata into JavaScript. The first step is including the Api.cfm in a <script> tag on the page, but we need to know what's going on "under the hood." Api.cfm: #apiScript#

Here we set a few variables, that will then be used in a method call. The getAPIScript method, of the Direct.cfc class, will construct our API from metadata. Direct.cfc getAPIScript() method: [ 361 ]

Marshalling Data Services with Ext.Direct Ext.ns('#arguments. ns#');#arguments.ns#.#desc# = #SerializeJson(jsonPacket)#;

The getAPIScript method sets a few variables (including the 'actions' array), pulls a listing of all ColdFusion Components from the directory, loops over that listing, and finds any components containing "ExtDirect" in their root meta. With every component that does contain that meta, it then loops over each method, finds methods with "ExtDirect" in the function meta, and creates a structure with the function name and number of arguments, which is then added to an array of methods. When all methods have been introspected, the array of methods is added to the 'actions' array. Once all ColdFusion Components have been introspected, the entire packet is serialized into JSON, and returned to API.cfm for output. One item to note is that the script, when introspecting method metadata, also looks for a "ExtFormHandler" attribute. If it finds the attribute, it will include that in the method struct prior to placing the struct in the 'actions' array. [ 362 ]

Chapter 16

Routing requests

By looking at our previous example of the API output, we notice that the url attribute is pointing to a server-side file. This is the final piece of the Direct stack, a file that will 'route' requests to the proper server-side class and method for processing.

What is a Router

A Router is a server-side template that takes in all requests from our Ext JS application, and passes those requests off to the respective object and method for action. Ultimately, a Router is fairly agnostic; it will take any request, maybe apply some basic logic to the incoming variables, and then pass the request along according to data in the transaction.

Transactions

When we send data to our Router, we're creating a transaction. Data coming from our Ext JS application will come in one of the two ways: form post (like when we upload files), or a raw HTTP post of a JSON packet. The parameters of each type are slightly different. A standard JSON post will look like this: {"action":"Authors","method":"GetAll","data":[],"type":"rpc","tid":27}

It's important to notice that Direct passed along information that came directly from our configuration, such as the action and method we're trying to access. Each of these transactions would contain the following: • action—the class/ object/component we're attempting to access. • method—the method/function we're trying to invoke. • data—the arguments being sent to the method, in the form of an array. • type—we'll use "rpc" for all remote calls. • tid—our own transaction ID. This helps us identify responses from the server, connecting them to whichever transaction was initiated. This is especially beneficial whenever you batch process multiple requests, as it helps to tell us what was requested, for which, by what, and place our return results where they are needed.

[ 363 ]

Marshalling Data Services with Ext.Direct

Stack deconstruction—HTTP post transaction

DirectCFM's Router will first create an instance of it's Direct.cfc class, then pull in the request and deserialize it , casting it into a native ColdFusion variable.

If the variable isn't an array, it will copy it into a temp variable, create an array, and place the temp object as the first element of the array. This is to maintain consistent process.

We now need to loop over the requests that came from our Ext JS application. For each element of the array, we call the method that was requested.

invokeCall() is a method of the Direct.cfc class, which is used to dynamically call a method. It's very generic by nature. The curReq variable, being passed

in as an object, is an element of our requests array.

Direct.cfc invokeCall() method: [ 364 ]

Chapter 16

Here we find the action class, then the method, and then verify that the method was passed with enough parameters in the request. After an arguments object is created we finally dynamically invoke the class related to the action, calling the method requested. The result is sent back to the Router.

Form transactions

Form posts send a slightly different data set, forming their attributes in such a way as to easily differentiate a form post from a standard HTTP post: • extAction—The class/object/component to use • extMethod—The method that will process our form post • extTID—The transaction ID of the request (form posts cannot batch requests) • extUpload—An optional argument for a file field used for file upload • Any other fields needed for our method Our Router should take in the request, call the correct class/object/component, and invoke the appropriate method. We know the object to call, from our action/ extAction parameters, as well as the method, from our method parameter. This makes it simple to write dynamic statements for invoking the proper server-side architecture for our requests.

[ 365 ]

Marshalling Data Services with Ext.Direct

Stack deconstruction—form transactions

DirectCFM handles form post transactions in nearly the same manner that it handled the JSON requests. First, we see if it is a form post. In ColdFusion, this is done by looking for values in the form scope.

If it is, we'll set up our initial object to hold our JSON return.
jsonPacket = StructNew() /> jsonPacket['tid'] = form.extTID /> jsonPacket['action'] = form.extAction /> jsonPacket['method'] = form.extMethod /> jsonPacket['type'] = 'rpc' />

We can then dynamically invoke the action (class) and method requested during the form post.

Now all we have to do is return the results of our method calls.

Response

The final piece of the puzzle is to take the return from our dynamically invoked methods and formulate a proper response object to pass back to our Ext JS applications. The response should be a JSON encoded array of each transaction. The response of each transaction should contain the following: • type—"rpc" • tid—the transaction ID • action—the class/object/component that was called • method—the method we invoked • result—the result of the method call This would give us a response similar to: [{ "type":"rpc", "tid":14, "action":"Authors", "method":"GetAll", "result":{ [ 366 ]

Chapter 16 "COLUMNS":"ID,FIRSTNAME,LASTNAME", "DATA":[ [1,"Stephen","King"], [2,"Robert","Ludlum"] ] } },{ "type":"rpc", "tid":15, "action":"Authors", "method":"add", "result":{ "success":true, "ID":3 } }]

Stack deconstruction—JSON HTTP response

The Router builds out the rest of the response object, carefully to remove the "DATA" used to make the request. Router.cfm:

The last thing to be done is to return the data as JSON output: #SerializeJson(requests)#

Form post responses are only slightly different. A standard post method will return the result in the same manner, except the JSON response is not part of an array. In the case of a file upload, the JSON should be wrapped inside a element within a valid HTML document: <html> <body> <textarea>{"type":"rpc","tid":15,"action":"Authors","method":"uplo adPhoto","result":{"success":true,"ID":3}} [ 367 ]

Marshalling Data Services with Ext.Direct

Notice there's only one response here. Remember that form posts cannot handle batch requests, so we can only do one at a time.

Stack deconstruction—form post response

We can serialize the JSON result of the method, and output the response back to the browser, conditionalizing the response for those requests that were file uploads. #json#</ textarea></body></html></cfsavecontent> </cfoutput> <cfelse> <cfset output = json /> </cfif> <cfcontent reset="true" /> <cfoutput>#output#</cfoutput><br /> <br /> Exception responses<br /> <br /> Ok, we all make mistakes. Because of this, we have to be able to write in exception handling. An exception response is a basic JSON packet, containing the following info: • type—'exception' • message—an informative message about the error that occurred • where—tells us where the error occurred on the server Exception responses are only handled when the Router is configured in debugging mode, and it is suggested that you do not return these responses in a production environment, as it could expose vital information about your server's file system that would pose a security risk.<br /> <br /> Stack deconstruction—exceptions<br /> <br /> ColdFusion allows us to use standard try/catch error handling for capturing errors for graceful error handling. If an error were to occur in our method handling, we could 'catch' that error and form our Exception Response: <cfcatch <cfset <cfset <cfset <cfset<br /> <br /> type="any"> jsonPacket = StructNew() /> jsonPacket['type'] = 'exception' /> jsonPacket['tid'] = curReq['tId'] /> jsonPacket['message'] = cfcatch.Message /> [ 368 ]<br /> <br /> Chapter 16 <cfset jsonPacket['where'] = cfcatch.TagContext.Line/> <cfcontent reset="true" /> <cfoutput>#SerializeJson(jsonPacket)#</cfoutput><cfabort/> </cfcatch><br /> <br /> This creates a new jsonPacket structure, to which we apply the necessary key/ value pairs required for an exception object. We then output the JSON response, and abort further processing of the method.<br /> <br /> Putting the pieces together<br /> <br /> Now that we have a basic understanding of how we can create a stack, it's time to tie all of the pieces together to use it with our Ext JS applications.<br /> <br /> Make your API available<br /> <br /> The first thing we need to do, in order to be able to access our configuration, is include the API within our application. This was touched on briefly in our review of the API. All it requires us to do is include a <script> tag within our application, calling the server-side script that renders the API configuration: <script src="Api.cfm"></script><br /> <br /> We need to include this after our Ext base script files, but prior to our own application files. Next, we need to attach that API as a Provider for Ext.Direct, within our JavaScript application file: Ext.Direct.addProvider(com.cc.APIDesc);<br /> <br /> This now gives us access to any actions and methods provided through our configuration.<br /> <br /> Making API calls<br /> <br /> Now that our actions and methods are available to our application, it comes down to making actual requests. Say, for instance, that you wanted to create a data store object to fill in a grid. You could do this by creating a DirectStore object, calling one of the exposed methods to populate the store: var dirStore = new Ext.data.DirectStore({ storeId: 'Authors', api: { read: com.cc.Authors.GetAll, create: com.cc.Authors.add, [ 369 ]<br /> <br /> Marshalling Data Services with Ext.Direct update: com.cc.Authors.update, delete: com.cc.Authors.delete }, paramsAsHash: false, autoSave: false, reader: new Ext.data.CFQueryReader({ idProperty: 'AuthorId' },[ {name:'AuthorID',type:'int'}, 'FirstName', 'LastName' ]), writer: new Ext.data.JsonWriter({ encode: false, writeAllFields: true }) });<br /> <br /> We begin with our DirectStore configuration. The DirectStore is a new object of the Ext.data package, specifically designed to call data from an Ext.Direct source. The api attribute is now used to define actions and basic CRUD methods against our store, but notice that the majority of the configuration is just like any other data store. We did use the CFQueryReader custom reader object that we discussed in Chapter 15, It's All About The Data, to parse out the query object returned by the ColdFusion application server, as well as the JsonWriter configuration to handle changes to our remote source. Next, we'll apply this store to a basic data EditorGridPanel: // shorthand alias var fm = Ext.form; var dirGrid = new Ext.grid.EditorGridPanel ({ width: 400, height: 500, title: 'Ext.DirectStore Example', store: dirStore, loadMask: true, clicksToEdit: 1, columns: [{ header: 'AuthorID', dataIndex: 'AuthorID', width: 60 },{ header: 'First Name', dataIndex: 'FirstName', [ 370 ]<br /> <br /> Chapter 16 width: 150, editor: new fm.TextField({ allowBlank: false }) },{ header: 'Last Name', dataIndex: 'LastName', width: 150, editor: new fm.TextField({ allowBlank: false }) }], viewConfig: { forceFit: true }, tbar:[{ text: 'New Author', handler: function(){ var author = dirGrid.getStore().recordType; var a = new author({ AuthorID: 0, }); dirGrid.stopEditing(); dirStore.insert(0,a); dirGrid.startEditing(0,1); } }], bbar:[{ text: 'Save Changes', handler: function(){ console.log(dirStore.save()); } }] }); dirGrid.render('chap16'); dirStore.load();<br /> <br /> There's nothing new here. We apply our store to our editor grid configuration just as we would apply one to any other store object. Once we render the grid, we then load the store from our Direct exposed configuration, just as we would load any other store.<br /> <br /> [ 371 ]<br /> <br /> Marshalling Data Services with Ext.Direct<br /> <br /> Going back to our class object, we have an add and an update method, both taking an author as an argument. The add method should return a valid AuthorID in its response, which we might want to apply to a new record in our store. We've added a button to the TopToolbar to add records to the grid for editing: tbar:[{ text: 'New Author', handler: function(){ var author = dirGrid.getStore().recordType; var a = new author({ AuthorID: 0, }); dirGrid.stopEditing(); dirStore.insert(0,a); dirGrid.startEditing(0,1); } }],<br /> <br /> Once a new record has been added, or an existing record has been edited, we need to save those changes to our remote server. Here we've added a button to the bottom Toolbar that will save any new and changed records to the server, by invoking the appropriate method to take upon the record: bbar:[{ text: 'Save Changes', handler: function(){ dirStore.save(); } }]<br /> <br /> New records will go to the add method of the Author action. Changed records will go to the update method of the Author action. Since this is a JSON request, we can batch-process our changes.<br /> <br /> [ 372 ]<br /> <br /> Chapter 16<br /> <br /> Summary<br /> <br /> In this chapter, we've discussed how a developer can write his/her own Ext.Direct server-side stacks for marshalling data services under a single configuration. We've discussed each of the individual pieces: • Configuration • API • Router We've talked about the four different ways of writing a configuration: • Programmatic • JSON • XML • Metadata We've also deconstructed one example stack provided by the Ext JS development team, illustrating how the server-side code might generate our APIs, and route our requests. Finally, we talked about how we implement Direct within our own Ext applications. In our final chapter we'll show you a few hidden gems of the Ext JS framework, and talk about some community resources for further information.<br /> <br /> [ 373 ]<br /> <br /> The Power of Ext JS: What Else Can You Do? Throughout this book, we've gone over some of the core components of Ext JS: Windows and Dialogs, Grids, Trees, Data Stores, and more. This is some of the flashiest, coolest, and most consistent stuff on the Web today, for taking a drab old HTML display and giving it the sizzle and pop such a dynamic development platform deserves. But we've still only scratched the surface of what's available within the complete Ext JS library. Here we'll look at some of the deeper bits of the framework, while pointing you to additional learning resources that you can explore and use to grow your knowledge of Ext JS. In this chapter, we cover: • <br /> <br /> Form widgets<br /> <br /> • <br /> <br /> Data formatting<br /> <br /> • <br /> <br /> Application managers<br /> <br /> • <br /> <br /> Working with the DOM and styles<br /> <br /> • <br /> <br /> Ext JS on the desktop<br /> <br /> • <br /> <br /> Community extensions<br /> <br /> • <br /> <br /> Community resources<br /> <br /> The Power of Ext JS: What Else Can You Do?<br /> <br /> So much to work with<br /> <br /> The Ext JS site (http://www.extjs.com) provides a wealth of information for those learning to develop with Ext JS. A quick view of the Samples and Demos area of this site will show us quite a bit of what we've covered in this book, but a thorough examination of the source code will show us some things that we may not immediately have known were available. These are the pieces that aren't necessarily apparent, such as a panel or a grid, but these little things ultimately hold it all together and truly allow us to create robust applications.<br /> <br /> Form widgets<br /> <br /> What's a widget? Well, a widget is a tiny piece or component of a graphical user interface, say (for instance) a slider or a progress bar. Most applications are made up of forms, so it's no accident that Ext JS includes some form widgets that we can't get with straight HTML. TextFields and checkboxes and radio buttons are standard fare, but Ext JS sweetens the pot by going to the next level, providing us with components that we're used to seeing in most desktop applications.<br /> <br /> DateField<br /> <br /> The DateField is a perfect example. Handling dates within most HTML forms can be a chore, but Ext JS provides a very basic component for handling dates: Example 1: chapter17_01.js Ext.onReady(function(){ var formPanel = new Ext.form.FormPanel({ title:'DateField Example', applyTo:'chap14_ex01', layout:'form', labelAlign:'top', width:210, autoHeight:true, frame:true, items:[{ xtype:'datefield', fieldLabel:'Date of Birth', name:'dob', width:190, allowBlank:false }] }); }); [ 376 ]<br /> <br /> Chapter 17<br /> <br /> What we have here is a basic FormPanel layout that puts our DateField into proper context and allows for certain necessary attributes (like putting our label above the field). Within the layout we have a single DateField component. On initial load, it looks like a basic TextField, with the exception of the trigger to the right. Clicking the trigger shows the beauty of Ext JS's consistent component "look-and-feel", displaying an attractive calendar layout for the selection of a date. You can select a day, move from month-to-month, or even click on the month itself to choose a different month and year.<br /> <br /> Apart from its rich display, the DateField also provides a rich set of attributes for specialized customization, including the ability to determine different accepted date formats, and the ability to disable entire blocks of days. The component will also automatically validate manually-entered data.<br /> <br /> TimeField<br /> <br /> Dealing with time can be more difficult than dealing with dates, but Ext JS also provides a component to assist us. The TimeField is a basic ComboBox that will automatically show a set of time, in increments that we want, for quick selection: Example 2: chapter17_02.js Ext.onReady(function(){ var formPanel = new Ext.form.FormPanel({ title:'DateField Example', applyTo:'chap14_ex02', layout:'form', labelAlign:'top', [ 377 ]<br /> <br /> The Power of Ext JS: What Else Can You Do? width:210, autoHeight:true, frame:true, items:[{ xtype:'timefield', fieldLabel:'Time', minValue: '9:00 AM', maxValue: '6:00 PM', increment: 30 }] }); });<br /> <br /> As in our last example, this simple FormLayout contains one item, in this case the TimeField. Click on the trigger, and we get our options, defined by our code as times between 9 A.M. and 6 P.M. in increments of 30 minutes. Other configuration options allow you to define multiple accepted time formats, and also implement custom validation. Basic validation is provided by default.<br /> <br /> [ 378 ]<br /> <br /> Chapter 17<br /> <br /> NumberField<br /> <br /> The NumberField doesn't look very special—it's just a basic 'text' field. What makes it special is how it allows us to 'dummy-proof' our Ext JS applications. Client-side data validation is essential for ensuring data integrity prior to sending values to the server, allowing us to prevent errors from our remote procedure calls. Components such as this one simplify that process for us. The NumberField provides automatic keystroke filtering and validation to allow the entry of only numeric data, allowing us to specify whether it can take negative numbers or float values, and even specify how many decimal places are accepted.<br /> <br /> CheckboxGroups and RadioGroups<br /> <br /> Ext JS 2.2 brought two new form controls: the CheckboxGroup and the RadioGroup. These controls allow us to 'group' sets of checkbox or radio buttons, providing them with custom formatting and special, group-level validation capabilities. For example, say we have a form with two checkboxes for the users to select their gender. By placing these within a CheckboxGroup, we can apply our validation to the group so that at least one option is selected when the form is submitted. We can apply many more complex validation rules as well, depending upon the scenario. See the Ext JS API for more details.<br /> <br /> HtmlEditor<br /> <br /> Ext JS includes a nice, limited, WYSIWYG HtmlEditor, to drop right into your forms: Example 3: chapter17_03.js Ext.onReady(function(){ var formPanel = new Ext.form.FormPanel({ title:'HtmlEditor Example', applyTo:'chap14_ex03', layout:'form', labelAlign:'top', width:600, autoHeight:true, frame:true, items:[{ xtype:'htmleditor', id:'bio', fieldLabel:'Blog Entry', height:200, anchor:'98%' }] }); }); [ 379 ]<br /> <br /> The Power of Ext JS: What Else Can You Do?<br /> <br /> Here, we dropped the HtmlEditor into our FormLayout for a quick demonstration. The HtmlEditor is applied to a basic text area, in much the same way as other WYSIWYG editors, say FCKEditor or TinyMCE. We have the ability to enable or disable the various menu buttons related to formatting, as well as call various methods (like those to get or set the text of the editor, its position, and so on), or apply event listeners, just like the other components of Ext JS.<br /> <br /> We get the same, consistent Ext JS look and feel, while giving our users the ability to format their own content directly from within our applications. In this image, note that the HtmlEditor uses Ext JS's built-in ColorPalette component for selecting colors.<br /> <br /> Data formatting<br /> <br /> We all know that we don't always receive data in the format in which we want it to be displayed. Ext JS provides many different components specifically for addressing such issues. First among these is the Format object in the Ext.util package, which gives us a wide variety of functions for everything from creating the U.S. currency format for a number to methods for stripping scripts and HTML from strings. The Ext JS library also extends several native JavaScript objects and provides us with additional methods for manipulating them. Specifically, the String, Number, and Date objects have all been extended. You can now strip off unnecessary whitespace, constrain numbers to a minimum and maximum value, and even create Date objects from a variety of format options.<br /> <br /> [ 380 ]<br /> <br /> Chapter 17<br /> <br /> Basic string formatting<br /> <br /> The String object has been extended to provide several formatting options, including the format() method. This simple method allows you to return a formatted string of text, with the first parameter being the string to return, and all other parameters (as many as you like) being bound to pieces of the string, using a basic form of binding expression, whereby curly braces surround a variable reference. Typical binding expressions, used by Ext JS, would contain a dot-notated variable reference surrounded by curly braces (that is, {this.firstName}), but this instance will bind values to the arguments that will follow using their array order: Example 4: chapter17_04.js Ext.onReady(function(){ var cls = "Band"; var member = { firstName: 'Eric', lastName: 'Clapton', position: 'Lead Guitarist' }; var pnl = new Ext.Panel({ applyTo: 'chap14_ex04', width: 200, height: 100, bodyStyle: 'padding:5px', title: 'Band Member', html: String.format('<div class=\'{0}\'>{2}, {1}: {3}</div>', cls, member.firstName, member.lastName, member.position) }); });<br /> <br /> This small block of code displays a simple Panel element, which calls the formatting function to build the HTML of the Panel. The arguments of the format() method are applied to different parts of the string that we are building.<br /> <br /> [ 381 ]<br /> <br /> The Power of Ext JS: What Else Can You Do?<br /> <br /> Formatting dates<br /> <br /> The Date object has also been extended to provide additional formatting and parsing capabilities. The API provides a complete listing of the date part identifiers that can be used when parsing a string into a Date object, or when outputting a Date object in the desired format: Example 5: chapter17_05.js Ext.onReady(function(){ var cls = "Band"; var member = { firstName: 'Eric', lastName: 'Clapton', position: 'Lead Guitarist', birthDate: new Date('03/30/1945') }; var pnl = new Ext.Panel({ applyTo: 'chap14_ex05', width: 200, height: 100, bodyStyle: 'padding:5px', title: 'Band Member', html: String.format('<div class=\'{0}\'>{2}, {1}: {3}<br />DOB: {4}</div>', cls, member.firstName, member.lastName, member.position, member.birthDate.format('F j, Y')) }); });<br /> <br /> We've extended our previous example to add Eric's birthday. We've created a new Date object, as part of the Member object, and then used the format() method of the Date object to format our date for display.<br /> <br /> Other formatting<br /> <br /> The Ext.util package provides many different classes and methods for formatting various types of data, including many for working with strings, dates, and numbers. A good example is the usMoney() method: [ 382 ]<br /> <br /> Chapter 17 var annualSalary = 123456.345; Ext.util.Format.usMoney(annualSalary);<br /> <br /> This will return a pre-formatted US currency string of $123,456.35. This can come in very handy when working with e-commerce applications. Author's note: The usMoney() method in the Format class is currently the only method for formatting a currency type. But with Ext JS's extensible architecture, it would be possible to create methods for formatting other foreign currencies. A quick search of the Ext JS forums will pull up several posts on creating formatting methods for other currency types.<br /> <br /> Another common need is the ability to strip HTML from a string. Say we have a simple comment form on our page, and want to ensure that the user doesn't include any HTML in the input, so that our data isn't polluted before going to the server. Ext JS includes a simple method for stripping out HTML from any string: var firstName = '<b>jimi</b>'; var adj = Ext.util.Format.stripTags(firstName);<br /> <br /> We may also want to make sure that a particular input, say a name, is capitalized before we pass it back to the server: var adj2 = Ext.util.Format.capitalize(adj);<br /> <br /> We may also want to apply a default value to a variable in case one does not exist already: var adj3 = Ext.util.Format.defaultValue(favoriteBlog, 'Cutter\'s Crossing');<br /> <br /> A thorough review of the API will provide you with a full understanding of all of the various formatting options that are available.<br /> <br /> Managing application state<br /> <br /> At the core of any application (especially an event-driven application) is maintaining and controlling the application state. This can encompass many different things, from keeping user preferences on grid sorting, to managing multiple windows or layout areas on the screen, and even being able to use the Back button in the browser and have it change your application without reloading the wrong page. Luckily, Ext JS provides several Manager objects for handling many of these scenarios.<br /> <br /> [ 383 ]<br /> <br /> The Power of Ext JS: What Else Can You Do?<br /> <br /> Basic state management<br /> <br /> The Ext.state.Manager class is automatically checked, and utilized, by every state-aware component within Ext JS. With one simple line of code we can set this manager in place, and with little or no additional work our application's view state is automatically registered. To put this in perspective, suppose that we have a rather large application, spanning many different HTML documents. Ext JS plays a part in the application, because we've implemented a data grid for displaying users. While we work on our grid, it may be necessary to change the sort order from the default LastName column to another column, for example, the UserName column. Now let's say we had to go into an inventory editor for a moment. If we use the Manager, when we return to the user editor our grid will automatically come up sorted again by Username, as that was the last state change that we made: Ext.state.Manager.setProvider(new Ext.state.CookieProvider());<br /> <br /> This line creates our state Manager, setting the provider to a CookieProvider. What this means is that the application state is saved to a value within a cookie on the client machine, which in turn is read to re-enable the state upon returning to a state-aware component. Side Note: The CookieProvider also provides a simple API for the general management of client-side cookies for our sites, and can be used as a standalone class for referencing and manipulating cookie objects.<br /> <br /> How do I get that window?<br /> <br /> Many Ext JS applications will be confined to a single HTML page, and might commonly come down to a collection of Ext JS Window objects on the screen. But what happens if a user is in one window, and we want to show them another window that is already open, without closing the one they've been working on? By default, all Ext JS windows are created, and registered, within the global WindowGroup. We can easily control the visibility and z-index of these windows by using the WindowMgr class. This manager class allows us to grab any window of a WindowGroup, and bring it to the front, send it to the back, or even hide all of the windows in the group.<br /> <br /> [ 384 ]<br /> <br /> Chapter 17<br /> <br /> Using the back button in Ext JS applications<br /> <br /> One common problem among Rich Internet Applications is handling the Back button of the browser. Say we have a large Ext JS-based application with tabs, grids, and accordions. A user navigating our application by using these components might hit his/her Back button to go back to their last action, screen, or panel. This is an expected behavior in most Internet applications, because most Internet applications go from one HTML page to another. But most Rich Internet Applications, like those built with Ext JS, are usually a collection of different states within the same HTML page, and the Back button would typically take a user out of our application and back to the last viewed HTML page. Thankfully, Ext JS introduced the History class, giving us the ability to control how the browser history is used, and how the browser's Back button would be handled within our applications. Manage this: There are several other manager classes within Ext JS. The StoreMgr provides easy access to our various data store objects. The ComponentMgr allows us to quickly retrieve specific components to act upon. The EventMgr allows us to control events within Ext JS objects. A good review of the Ext JS API will give us more information on these manager objects and their many uses.<br /> <br /> Accessing the DOM<br /> <br /> Custom library adapters allow for the use of Ext JS with other libraries, say jQuery or Prototype. But Ext JS provides its own internal libraries for DOM manipulation as well.<br /> <br /> Finding DOM elements<br /> <br /> The first task when manipulating the DOM (Document Object Model) is to find what we're looking for. The DomQuery class provides us with several methods for this purpose, including returning entire groups of DOM nodes that meet specific criteria, or selecting a single node by its selector. We can even start the search from a specific node in the page. There are several different selector types that can be used when searching for a specific element: • <br /> <br /> base Element selectors<br /> <br /> • <br /> <br /> Attribute selectors<br /> <br /> • <br /> <br /> Pseudo classes<br /> <br /> • <br /> <br /> CSS Value selectors [ 385 ]<br /> <br /> The Power of Ext JS: What Else Can You Do?<br /> <br /> What's more, we can chain together a series of selectors to find the exact element we're searching for: var myEl = Ext.DomQuery.selectNode ('a.iconLnk[@href*="cutterscrossing"]:first');<br /> <br /> This will return the first anchor element with a class name of iconLnk that contains cutterscrossing within its href attribute: • <br /> <br /> a—is an anchor element<br /> <br /> • <br /> <br /> .selectNode—has a class of selectNode<br /> <br /> • <br /> <br /> [@href *= "cutterscrossing"]—has an href attribute containing<br /> <br /> • <br /> <br /> :first—is only the first element matching the criteria<br /> <br /> 'cutterscrossing' somewhere within its value<br /> <br /> Manipulating the DOM<br /> <br /> The DomHelper class allows us to manipulate the DOM of the rendered page on-the-fly. Whether we want to add a new element below a collection of others, remove a specific element, or even overwrite the body content of an element, the DomHelper class contains the methods that can accomplish the task: For example: Ext.DomHelper.insertAfter(ourGrid, newForm);<br /> <br /> This line will place the newForm object directly after ourGrid in the current page's DOM. You could just as easily use insertBefore() to place the form before the grid. You could even use insertHtml() to insert a block of HTML into the DOM with a particular relation to a specific DOM element. A thorough review of the API will give you a complete view of the power of the DomHelper class.<br /> <br /> Working with styles<br /> <br /> The DomHelper class also provides a simple method for setting the style of an individual element, through the use of the applyStyles() method. But sometimes we may need to change the stylesheet of our entire document. For this, Ext JS has the Ext.util.CSS class, which allows us to create a new stylesheet that will automatically be appended to the Head of our document, remove entire stylesheets, or swap one stylesheet for another. We can even act upon their entire set of rules: Ext.util.CSS.swapStyleSheet('defaultDisplay','print.css');<br /> <br /> This little script will swap out the current stylesheet, which is identified by the link tag's id attribute, and replace it with the print.css stylesheet. [ 386 ]<br /> <br /> Chapter 17<br /> <br /> Ext JS for the desktop: Adobe AIR<br /> <br /> One of the great things about being a Web application developer is that we have the opportunity to write truly cross-platform applications. The traditional model for this has always been writing browser-based applications that work primarily under a client/server paradigm, with the browser as the client and a Web application server as the server. But desktop applications have a lot of their own benefits, including access to their own local file systems (something you cannot do with Web-based applications, because of security concerns). The biggest issue with building desktop applications is writing them all for Windows, Unix/Linux, and the Mac. None of these systems share common display libraries or file access systems, so writing a cross-platform application would require writing separate versions of the code to accommodate each system. There are languages that provide cross-platform virtual machines, which give this kind of access to the system resources, but they require learning languages that may be outside of the average Web developer's toolbox. Adobe came up with an interesting idea. How could they let people develop cross-platform applications using Web-based technologies such as HTML, JavaScript, AJAX, and Flash? With their purchase of Macromedia, Adobe gained the rights to the Flash player and the Flash application platform. The Flash player is distributed on 97 percent of the user desktops as a plug-in for every major browser. They also gained access to a new technology called Flex, which is a framework and compiler that allows developers (rather than designers) to script Flash-based applications. But, part of what they truly gained was an understanding of how to create a cross-platform application delivery engine. So, they built upon their newfound knowledge, and set out to create the Adobe Integrated Runtime, better known as AIR. AIR is a desktop engine for rendering content written in HTML, JavaScript, and/or Flash (and more), which allows local access to the client system's resources, regardless of the operating system. Built upon the open source WebKit platform, which is the same platform used by Apple in their Safari Web browser, AIR has access to the local file system and storage, while maintaining Internet awareness, thereby creating a bridge between offline process and online content. AIR even provides access to local databases created with SQLLite. SQLLite is a server-less library for delivering databases with its own transactional SQL database engine that can be directly embedded into an application.<br /> <br /> [ 387 ]<br /> <br /> The Power of Ext JS: What Else Can You Do?<br /> <br /> Adobe and Ext JS already have a great relationship, because Adobe contracted Ext JS so that it could use the Ext JS component library as the foundation of the AJAX-based components generated by ColdFusion Markup Language, which is processed on Adobe's popular ColdFusion application server. Considering the cross-platform nature of AIR, it was befitting that some of the first HTML/JavaScript sample applications were written in another cross-platform library, Ext JS. The tasks sample application is included with the Ext JS download, and is an excellent primer on how to write HTML and JavaScript applications for AIR. Ext JS 2.1 was released on the same day that Adobe AIR was officially released, and included an entire package of components dedicated to developing Ext JS-based AIR applications. The classes of the Ext.air package interact with AIR's own classes for interacting with the runtime and the desktop. Aptana, a popular JavaScript editor and Eclipse plugin, added support for creating AIR applications directly as projects from within its IDE (Aptana already supported Ext JS development), with simple wizards to help get you started, as well as for packaging completed AIR applications. The Ext.air package includes special packages for managing application state, including the NativeWindowGroup and FileProvider classes (AIR's answer to the WindowGroup and CookieProvider classes). There are even classes for controlling sound and system menus. More information: For more information on developing Adobe AIR applications, visit the AIR and AJAX Developer Center (http://www.adobe.com/devnet/ air/ajax/). For details look at AIR/Ext JS integration, and study the 'tasks' sample application, included in the Ext.air Pack download. There's also the Ext.air for Adobe AIR topic within the Ext JS Forums.<br /> <br /> Ext JS community extensions<br /> <br /> Chapter 13 of this book discussed how developers can write their own custom extensions to Ext JS. Being an open source project, the Ext JS community is very active in contributing new components to extend existing functionality, and sometimes these components even go on to become a part of the framework. Many custom extensions are found directly in the forums area of the Ext JS website, as posts from members who have come up with solutions to a problem they had identified. There is, however, a section of the Learning Center area of the site that is dedicated to showcasing custom extensions. Let's look at a few fan favorites.<br /> <br /> [ 388 ]<br /> <br /> Chapter 17<br /> <br /> DatePickerPlus<br /> <br /> Building on the DateField class, the DatePickerPlus provides multi-calendar displays, allowing a user to select a range of dates. There are multiple configuration options available, and the level of control available to the developer is very comprehensive.<br /> <br /> PowerWizard<br /> <br /> The PowerWizard class allows us to create powerful, multi-step 'wizard-like' processes, with field (and multi-field) validation and decision trees, as well as data persistence between frames.<br /> <br /> [ 389 ]<br /> <br /> The Power of Ext JS: What Else Can You Do?<br /> <br /> TinyMCE<br /> <br /> Yes, for those times when the HtmlEditor just isn't enough, someone wrote a custom extension to wrap the TinyMCE WYSIWYG editor into the Ext JS applications.<br /> <br /> SwfUploadPanel<br /> <br /> How many times would it have been nice to be able to upload more than one file at a time through our Web application interface? Someone converted the popular SwfUpload project into a custom Ext JS component, allowing multi-file uploads from within our application.<br /> <br /> [ 390 ]<br /> <br /> Chapter 17<br /> <br /> ColorPicker<br /> <br /> The built-in ColorPalette component can seem rather limiting, only showing a few of the colors available for web display. For this reason, there is the ColorPicker giving the user the option of selecting any color they wish.<br /> <br /> These are just a few of the outstanding community contributions to the library. There are many more available through the Community Extensions section of the Learning Center area of the Ext JS website, as well as throughout the Forums. (Check out the Ext: User Extensions and Plugins topic for more.)<br /> <br /> Additional resources<br /> <br /> Knowing where to find good information is the biggest trick to learning anything new. Although this book is a good resource, there is a wealth of information available on the Internet, especially on the Ext JS site (http://www.extjs.com).<br /> <br /> Samples and Demos<br /> <br /> The Samples and Demos area of the Ext JS site (http://extjs.com/deploy/dev/ examples/samples.html) will likely be the first real exposure that anyone has to<br /> <br /> the power of the Ext JS library. These small samples are broken down into various categories, providing us with solid examples of how to use many of the components of Ext JS. With easily-accessible source code, we can see exactly what it takes to write this type of functionality for our own applications. [ 391 ]<br /> <br /> The Power of Ext JS: What Else Can You Do?<br /> <br /> Ext JS API<br /> <br /> The Ext JS interactive API (http://extjs.com/deploy/dev/docs/) is an outstanding resource, giving us access to the underlying properties, methods, and events that are available within each class of Ext JS. The API documentation is written in Ext JS itself, and it's menu is a tree style navigation with expanding members, allowing us to expand each package to see information on their specific classes. Peppered throughout are additional code samples to illustrate their use. The Ext JS team even provides a desktop AIR version of this API browser, so that we can have it available offline. Side note: The Ext JS team also supports the older 1.1 framework, which is what runs the underlying AJAX components of the older Adobe ColdFusion 8 server. The samples and demos for the 1.1 framework are actually included in the 1.1 API browser (http://extjs.com/deploy/ext1.1.1/docs/), which is available through the Learning Center area of the website (http://extjs.com/learn/).<br /> <br /> Ext JS forums<br /> <br /> The forums for Ext JS (http://extjs.com/forum/) show what an active community there is, developing the Ext JS library. With over 40,000 threads and more than 200,000 posts, this is the place to ask questions. Topics range from the very easy to the ultra-advanced, and members of the core Ext JS development team are frequent contributors.<br /> <br /> Step-by-step tutorials<br /> <br /> Step-by-step tutorials (http://extjs.com/learn/Tutorials) can be found within the Learning Center, with content ranging from simple component usage to advanced project development. Some of these tutorials come directly from the Ext JS development team, but many are contributed by members of the Ext JS community.<br /> <br /> Community Manual<br /> <br /> One can also find the Ext JS Community Manual within the Learning Center. This wiki-style development manual is maintained by the Ext JS community itself, and contains topics relating to most of the aspects of Ext JS development.<br /> <br /> [ 392 ]<br /> <br /> Chapter 17<br /> <br /> Spket IDE<br /> <br /> We can find resources for Ext JS all over the Internet. One good example is from Spket Studios (http://www.spket.com/), makers of the Spket IDE. This free IDE comes as a plug-in for the Eclipse development platform. With a few simple steps, Spket can provide complete code introspection for our Ext JS classes and extensions, as well as in-depth code assistance. It even has a built-in theme builder to automatically create new skins for your components.<br /> <br /> Aptana Studio<br /> <br /> Aptana Studio is quickly becoming a major contender in the web-based IDE market. Even the free version provides code introspection and assistance with multiple JavaScript libraries, built-in wizards for creating Adobe AIR applications, built-in debugging tools, and much more.<br /> <br /> Google<br /> <br /> Yes, Google (or any other search engine) is a fantastic resource, because there are thousands of articles, tutorials, and blog posts available. A quick search on "Ext JS" brings up over a million possible matches, and that's growing every day.<br /> <br /> Where do we go from here?<br /> <br /> It is our hope that, with this brief introduction to the Ext JS JavaScript component library and framework, we've given our readers a good foundation upon which some truly amazing things can be built. Ext JS provides such an immense wealth of user interactivity within Web applications, possibly to a degree never achieved before. With its deep, consistent, and rich component set, its full-featured and intuitive API, and its constant development and growth, Ext JS has the potential to truly springboard Web (and even desktop) applications beyond the traditional paradigms, by providing users with an experience well beyond the Web applications of the past. Our imagination is the only limit to what we can hope to have in the future. Charles F. Kettering US electrical engineer and inventor (1876-1958)<br /> <br /> [ 393 ]<br /> <br /> The Power of Ext JS: What Else Can You Do?<br /> <br /> Summary<br /> <br /> In this chapter we've discussed some of the lesser known pieces of the Ext JS library. We briefly covered some of the form components not found in traditional HTML, such as the DateField and the HtmlEditor. We also learned about the various classes available for formatting data for the desired output, as well as those classes needed for managing application state and manipulating the DOM. Finally, we also talked about the various resources that are out there for continuing to learn about Ext JS development. We talked about the community extensions, the brilliant samples, and API browser, as well as the forums, tutorials, and the community manual. We even touched on some IDE's for doing Ext JS development.<br /> <br /> [ 394 ]<br /> <br /> Index Symbols <body> tag 316 <div> element 169, 260 <li> element 264 .NET 356 <script> tag 360<br /> <br /> A absolute layout manager 145 Accordion instances 316 accordion layout manager about 145, 153 example 154 working 153 ActionColumn column type 103 adapters about 20 using 21 addListener method 69 Adobe ColdFusion Developers Edition URL 317 Adobe Integrated Runtime. See  AIR afteredit event 129 AIR 387 AJAX about 170, 175, 255, 278, 319 and Ext JS 13 AJAX submissions form, creating 44, 45 align config option 144 allowBlank config option 47 alpha vtype example 49 anchor config option 59<br /> <br /> anchoring 256 anchor layout manager about 146, 159 working 159, 160 API access, making available 369 building 360 calls, making 369-371 stack deconstruction 361, 362 API (Application Programming Interface) 10 API calls making 369-371 Apple 387 application state managing 383 applyStyles() method 386 Aptana Studio 388, 393 array literal 111 ArrayReader class 94 ArrayReader object 321 ArrayStore class 55, 93 ArrayStore object 320 Asynchronous JavaScript and XML. See  AJAX AsyncTreeNode class 168 Attribute selectors 385 autoLoad attribute 317 autoLoad config option 155<br /> <br /> B back button using, in Ext JS applications 385<br /> <br /> bar chart about 221 styles, adding 223 switching out, for column chart 222 base Element selectors 385 bbar config option 87 beforecomplete event, arguments editor 177 newValue 177 originalValue 177 beforemovenode event 174 beforemovenode event, arguments index 175 newParent 175 node 175 oldParent 175 tree 175 beforenodedrop event 274 blocking 251 bodyStyle config option 74 BooleanColumn column type 101 boolean data type 94 border config option 74 border layout manager 146 bounceIn option 249 BoxComponent base class 213 buffer option 233 button config options 77 creating 78 events 83 handlers 83 buttons config object 63<br /> <br /> C card layout manager 146 caveats 188 cell renderers capitalize 104 columns, combining 105 custom cell rendering 104 data, formatting 103, 104 dateRenderer 104 lowercase 104 uppercase 104 using 103<br /> <br /> CFC 318, 359 cfdirectory tag 336, 339 chaining 250 chart adding, to layout 216, 217 charting 213 chartStyle config 218 check boxes 54 CheckboxGroup control 379 checkchange event 186 child components, items config object 45 children property 171 class 282 clearFilter() method 340 clearSearch method 308 clickPixelThresh property 272 clickTimeThresh property 272 client-side sorting 107 cls option 184 cmargins attribute 148 ColdFusion 356 ColdFusion Component. See  CFC ColdFusion stack selecting, reasons 357 collapseAll method 184 collapseMode attribute 148 collapsenode event 188 collapsible attribute 148 ColorPalette component 391 ColorPicker component 391 column charts 221 column layout manager 146 ColumnModel class about 100 working 100 column property 130, 135 columns combining 105 reordering 108 column types about 101 ActionColumn 103 BooleanColumn 101 DateColumn 102 NumberColumn 102 TemplateColumn 102<br /> <br /> [ 396 ]<br /> <br /> ComboBox class about 55 events 62 ComboBox object 352 Component model 168 components adding, to containers 163, 164 concurrency 250 config object about 27, 30 example 30 using 44 configuration objects function 27 configuration options, Ext.Fx methods about 247 block 249 callback 248 display 247 easing 248 remove 247 scope 248 configuration, server-side stacks about 357 JSON 358 metadata 359 programmatic 357, 358 stack deconstruction 359 XML 358 configuration, Windows about 199 desktopping 201 window, framing 201 constructor method 302 container child components, appending 165 components, adding 163, 164 content loading, on menu item click 83, 85 contentEl ElExt Panel, configuring 39-41 context menu about 179 Delete 180 menu, handling 180 Sort 180 contextmenu event listener 72 CookieProvider 384<br /> <br /> Create, Read, Update, Delete. See  CRUD cross browser DOM (Document Object Model) 12 cross-site scripting 319 CRUD 344, 347 CRUD functionality 139 CSS Value selectors 385 custom cell rendering 104 custom class 284-287 custom components creating 292-298 using, within other objects 299, 300 custom DataReader using 327-330 writing 330-335 custom events creating 291 custom namespace creating 283 custom validation creating 51, 52 cutterscrossing 386<br /> <br /> D data defining 321, 322 deleting, from server 135 displaying, with GridPanel 96, 97 filtering 336- 342 finding 335, 336 formatting 380 formatting, cell renderers used 103, 104 mapping 323 mapping, DataReader used 325-327 retrieving, from server 324, 325 server-side data, displaying 109 data attribute 288 data binding 254 data, finding about 335 by field value 335 by record ID 336 by record index 336 data formats, Ext JS HTML 319 HTML, loading into panel 316-318 Javascript array 320 [ 397 ]<br /> <br /> JSON 319 plain text 319 XML 319 data reader config options 58 DataReader data, mapping 325-327 data reader, config options fields 58 root 58 data store about 96, 320 changing 233 data, adding 130 data, defining 321, 322 data, deleting 130 grid rows, removing 131, 132 loading 95, 96 requisites 95 data store remove function 132 dataUrl parameter 170 DataView object 352 DataWriter about 344 benefits 347 DateColumn column type 102 date data type 94 DateField class 389 DateField component 376, 377 datefield field type 47 dateFormat config 94 Date object 382 DatePickerPlus option 389 dates formatting 382 date value editing 127 debug version 14 DefaultSelectionModel class 168 demos 391 desktopping 201 dialogs 190 Direct 356 DirectCFM 357 DirectStore object 369 dir parameter 175 dirty cell 128, 129<br /> <br /> disable function 83 displayField config option 56 Document Object Model. See  DOM doLayout method 165 DOM about 170 accessing 38, 385 elements, finding 385 manipulating 386 styles, working 386 DOM elements finding 385 DomHelper class 386 DOM listeners 69 DomQuery class 385 doSearch method 308 drag-and drop feature, creating drag action, used 260, 261 drop action, used 261, 262 drag-drop groups 270 dropAllowed option 271 dropNotAllowed option 271 DropTarget constructor 262 drop target element 262 DropTarget.notifyDrop method 262<br /> <br /> E easing about 248 options 248 easing options, Ext JS 248 ECMAScript standard 278 editable grid cells, editing 126 field types, editing 126, 127 uses 124 working with 124 EditorGridPanel component 124 enableDragDrop option 274 enableToggle config option 77 endOpacity option 239 errors displaying, styles used 50, 51 event 289 event-driven application model 289 event driven interfaces 13 [ 398 ]<br /> <br /> event handling functions adding, to form 61 event listener 291 expandAll method 184 Ext.air package 388 ext-all.css file 16 ext-all-debug.js/ext-all.js file 16 ext-all version 14 Ext.apply function 52 ext-base.js file 16 Ext.Button class about 71 config options 77 Ext.ButtonGroup class 72 Ext.Component.getEl method 237 Ext.Container 190 Ext Core library 38 Ext.CycleButton class 72 Ext.data package 282, 370 Ext.data.Record.create function 132 Ext.data.ScriptTagProxy 319 Ext.DataView dragging 266 Ext.dd.DragSource class 260, 270, 271 Ext.dd.DragZone class 263-271 Ext.dd.DropTarget class 262, 270, 271 Ext.dd.DropZone class 263, 270 Ext.dd package 260, 275 Ext.dd.Registry node, adding 266 Ext.dd.Registry.register method 266 Ext.dd.ScrollManager class 273 Ext.dd.StatusProxy class 261 Ext.Direct class 355 Ext.Element.alignTo method 246 Ext.Element.anchorTo method 246 Ext.Element class 237, 238, 251 Ext.Element object 38 Ext.form.BasicForm class 44 Ext.form.Field class 44 Ext.form.FormPanel class 44 Ext.form package 282 Ext.forms namespace 282 Ext.Fx class 238, 251 Ext.Fx class, methods fadeIn 239, 240 fadeOut 239, 240<br /> <br /> frame 240 ghost 241 highlight 242 puff 242 scale 243 shift 244, 245 switchOff 244 Ext.Fx.fadeIn method 239, 240 Ext.Fx.fadeOut method 239, 240 Ext.Fx.frame method 240 Ext.Fx.ghost method 241, 243, 246 Ext.Fx.highlight method 242 Ext.Fx methods configuration options 247 Ext.Fx.puff method 243 Ext.Fx.scale method 243 Ext.Fx.shift method 244, 245 Ext.Fx.slideIn method 243 Ext.Fx.slideOut method 243 Ext.Fx.switchOff method 244 Ext.get function 27, 38 Ext.grid.EditorGridPanel 125 Ext.grid.GridPanel class 125, 274 Ext.grid package 282 Ext JS about 9, 12, 315, 317 adapters 20 and AJAX 13 API 8 benefits 10 BoxComponent base class 213 classes 30-32 cross browser DOM (Document Object Model) 12 data formats 319, 320 desktop applications 387 drag-and-drop, implementing 260 EditorGridPanel component 123, 124 event driven interfaces 13 familiar popups, showing 191, 192 FAQ, URL 24 features 106-108 forms 43, 44 forums 24 getting 13 grid 92 including, in our pages 15 [ 399 ]<br /> <br /> localization 22, 23 object-oriented programming 279 online API docs 23 placing 13, 14 proxy 261 spacer imager 16 web application development 12 widgets 30-33 window management 205-210 Ext JS 2.1 388 Ext JS action object options 66 Ext JS action object, options failureType 66 response 66 result 66 type 66 Ext JS API 392 Ext JS applications back button, using 385 Ext JS, button constants Ext.Msg.CANCEL 195 Ext.Msg.OK 195 Ext.Msg.OKCANCEL 195 Ext.Msg.YESNO 195 Ext.Msg.YESNOCANCEL 195 Ext JS community extensions about 388 DatePickerPlus 389 PowerWizard class 389 SwfUploadPanel 390 TinyMCE 390 Ext JS, features client-side sorting 107 column, reordering 108 hidden columns 107 visible columns 107 Ext JS forums about 24, 392 URL 328 Ext JS icon 167 Ext JS, icon constants Ext.Msg.ERROR 195 Ext.Msg.INFO 195 Ext.Msg.QUESTION 195 Ext.Msg.WARNING 195<br /> <br /> Ext JS, layout managers AbsoluteLayout 145 AccordionLayout 145 AnchorLayout 146 BorderLayout 146 CardLayout 146 ColumnLayout 146 FitLayout 146 FormLayout 147 HBoxLayout 147 TableLayout 147 VBoxLayout 147 Ext JS library about 279 chart types 214 using 17, 18 Ext JS, Reader classes ArrayReader class 94 JSONReader class 94, 95 XMLReader class 95 Ext JS, resources Aptana Studio 393 community manual 392 demos 391 Ext JS API 392 forums 392 Google 393 samples 391 Spket IDE 393 tutorials 392 Ext JS site about 376 application state, managing 383 data, formatting 380 DOM, accessing 385 form widgets 376 URL 376 Ext JS tree about 168 customizing 182-184 features 173-177 interface, creating 169, 170 Ext JS tree, features drag and drop 173-175 editing 176, 177 sorting 175, 176 Ext.layout.FormLayout 198 [ 400 ]<br /> <br /> Ext.layout package 198, 199 Ext.LoadMask class 253 Ext.menu.Menu class about 71, 72 example 72, 73 Ext.MessageBox class about 190 customized pop up dialogs, creating 193, 194 versus Ext.Window class 190 Ext.Msg function 27 Ext.Msg.prompt 191 Ext.Msg.show function about 31, 194 message boxes, creating 194, 195 Ext.Msg.updateProgress method 193 Ext.onReady function about 18, 31, 169, 263 using 19 Ext Panel configuring, with contentEl 39-41 Ext.Panel object 316 Ext.QuickTips class 255 extraStyles config object 218, 228 Ext.record.COMMIT state 344 Ext.record.EDIT state 344 Ext.record.REJECT state 344 Ext.SplitButton class about 71, 79 example 79 Ext.state.Manager class 187, 384 Ext.Toolbar class 71, 75 Ext.ToolTip class 255 Ext.tree.AsyncTreeNode class 170 Ext.tree package about 167 classes 168 Ext.tree package, classes AsyncTreeNode 168 DefaultSelectionModel 168 MultiSelectionModel 168 RootTreeNodeUI 168 TreeDragZone 168 TreeDropZone 168 TreeEditor 168 TreeFilter 168 TreeLoader 169<br /> <br /> TreeNode 169 TreeNodeui 169 TreePanel 169-178 TreeSorter 169, 175 Ext.TreePanel class 274 Ext.tree.TreeEditor class 176 Ext.tree.TreeFilter class 181 Ext.tree.TreeLoader class 169 Ext.tree.TreePanel class 168 Ext.util.CSS class 386 Ext.util package 380, 382 Ext.Window class about 190 versus Ext.MessageBox class 190 Ext.WindowGroup class 190 Ext.WindowManager class 190<br /> <br /> F fading 239, 240 failure option 64 failureType option 66 fbar config option 87 FCKEditor 380 field data validating 47 field property 130, 135 field types editing 126, 127 field value data, finding 335 Fill component 81 filter function 181 filtering 181 fit layout manager 146 FlashComponent class 214, 215 Flex 387 flex config option 145 float data type 94 form components 43, 44 creating, AJAX submissions used 44, 45 event handling functions, adding 61 loading, with data 67 multiline text area, adding 59 RadioGroup component, adding 54 submitting 64, 65 [ 401 ]<br /> <br /> format() method 381 form, components Ext.form.BasicForm 44 Ext.form.Field 44 Ext.form.FormPanel 44 form data loading, from database 67 formHandler attribute 357 form layout manager 147 FormPanel class about 43 working 45 using, in layout 156-158 form transactions 365 form widgets about 376 CheckboxGroup control 379 DateField component 376, 377 HtmlEditor 379, 380 NumberField text field 379 RadioGroup control 379 TimeField component 377, 378 framing 240 functions using, limitations 28<br /> <br /> G getAPIScript method 362 getAt() method 336 getColumnsData method 311 getDragData method 267 getFormConfig method 308 getForm method 157 getKey method 61 GetListParent function 75 GetNodePathFromName function 185 ghosting 241 Google 393 Gotchas with, remote data 319 grid about 92 altering 115 formatting 116 grouping 119 manipulating, with code 114 paging 117, 118<br /> <br /> plugin, adding 305, 306 row, adding 132, 133 server-side data, displaying 109 updating 124 updating, requisites 125 grid, formatting about 116 grouping 119 GroupingStore class 119, 120 paging 117, 118 Grid object 352 GridPanel class about 96 config option 99 displaying 98 store, creating 92 store, loading 92 structured data, displaying 96, 97 working 99 GridPanel class, config options ColModel 99 store 99 grid property 130, 135 grid search plugin about 310 highlighting text, adding 312 GroupingStore class 119, 120 GroupingStore object 320<br /> <br /> H handler config option 73, 77 handler function 83 hasFxBlock method 251 hbox layout manager about 147, 162 config options 145 example 162, 163 using, in Panel 144 hbox layout manager, config options align 144 flex 145 margins 145 padding 144 header property 69 helpfile config option 84 hiddenName config option 56 [ 402 ]<br /> <br /> hidden option 101 hideable option 101 hideLabel config option 59 highlighting 242 host component about 302 interacting, with plugin 308-310 HTML example 263, 264 lists, changing 265 loading, into panel 316-318 HtmlEditor about 379 example 379 WYSIWYG 379, 380 html option 197 HTML scaffolding 38 HTTP post transaction stack deconstruction 364, 365<br /> <br /> functions 7 variable 7 JavaScript Object Notation. See  JSON JSON about 170, 171, 320 and XML 358 example 358 ID configuration property 172 JSON dataset 321 JSON file movie database, loading 110, 111 JSON HTTP response 367 JSONReader class 94, 95 JsonReader object 321 JsonStore object 320<br /> <br /> I<br /> <br /> L<br /> <br /> icon buttons about 82 example 82 iconCls config option 73, 77 icon config option 73, 77 icon property 33 ID configuration property, JSON 172 id property 171 inheritance about 279 example 279-281 initComponent() method 287, 288 init function 209, 302 insertBefore() method 386 insert function 132 insertHtml() method 386 int data type 94 INTERSECT mode 272 items config option 45, 72<br /> <br /> layout chart, adding 216, 217 layout manager about 143 working 143 leaf property 171 line chart about 227 example 227 using 227 listeners config option 61 load() method 68, 340 localization about 22 scenarios 22, 23<br /> <br /> J Java 356 JavaScript about 7, 277, 278 example 8<br /> <br /> K keys 61<br /> <br /> M majorGridLines property 223 majorUnit setting 222 mapping configs 231 margins attribute 148 margins config option 145 marshalling 356<br /> <br /> [ 403 ]<br /> <br /> masking about 53 example 53 memory usage minimizing 38, 39 menu handling 180 menu config option 73, 77 MenuItem class onfig options 73, 74 MenuItem class, config options bodyStyle 74 border 74 handler 73 icon 73 iconCls 73 menu 73 plain 74 text 73 menu item click content, loading 83, 85 menuItems variable 72, 73 metadata about 268, 359 example 359 methods overriding 287, 288 minorTicks property 223 minorUnit setting 222 mode config option 56 Msg.alert 191 msgCls property 253 Msg property 253 multiline text area adding, to form 59 MultiSelectionModel class 168<br /> <br /> N namespaces 282 node, Ext.dd.Registry adding, advantages 266 nodes sorting, in TreePanel 175 values, editing 176, 177 notifyDrop method 269, 272 NumberColumn column type 102<br /> <br /> numberfield field type 47 NumberField text field 379<br /> <br /> O object 28 object literal about 28, 111 guidelines 29 object-oriented programming, Ext JS about 279 example 279-281 inheritance 279 objects custom components, using 299, 300 lazy instantiation, benefits 299 observible class 302-304 onContainerDrop method 272 onNodeDrop method 264, 272 onReady function 44 onRender event 306 onUpdate() method 292 originalValue property 130, 135 overClass option 271 overnesting 152<br /> <br /> P package 282 padding config option 144 pages Ext JS, including 15 Panel HTML, loading 316-318 Panel class 43 Panel instances 316 parseFloat function 94 parseInt function 94 Perl 356 PHP about 356 data, loading from database 112 version, verifying 57 php -v command 57 pie charts creating 215, 216 pie slices styling 218, 219 [ 404 ]<br /> <br /> plain config option 74 plugin about 301 adding, to grid 305, 306 constructor method 302 creating 301 customizing 310, 311 example 301 host component, interacting 308-310 init function 302 ptype option 303 search form 306-308 structure 303, 304 using 302, 303 working 302 plugin, structure observible 303, 304 singleton 303, 304 PowerWizard class 389 programmatic configuration 357, 358 prompt function 34, 36 PropertyGrid component 283 proxy about 261, 268 advanatges 261 Pseudo classes 385<br /> <br /> Q qtip attribute 51, 184 queryBy method 104 queuing 250 QuickTipping 254 QuickTips object 50<br /> <br /> R radio buttons 53, 54 RadioGroup component about 379 adding, to form 54 record definition 93, 96 record ID data, finding 336 record index data, finding 336 record property 130, 135 records 320<br /> <br /> recordset changes dealing, with 343, 344 region attribute 148 reject method 129 remote data with, Gotchas 319 remote filtering 337-342 removeMask property 253 renderer option 101 renderTo config option 45, 72 response option 66 result option 66 RIAForge URL 335 Rich Internet Applications 385 rootAttribute property 325 RootTreeNodeUI class 168 Router about 356, 363 form transactions 365 HTTP post transaction 364, 365 JSON HTTP response 367 response 366 transaction, creating 363 RowEditor Plugin about 138 using 138 row property 130, 135 Ruby 356<br /> <br /> S Safari 387 samples 391 scaling 243 scroll management 273 search form 306, 307, 308 SELECT element 55 select event 62 selection models CellSelectionModel 113 CheckBoxSelectionModel 113 listener, adding 113 RowSelectionModel 113 selecting 113 setting up 112<br /> <br /> [ 405 ]<br /> <br /> selector types Attribute 385 baseElement 385 CSS Value 385 Pseudo classes 385 selModel config option 113 sel variable 132 Separator component 81 server edited data, saving 134 rows, saving to 136, 137 server-side stacks building 356 components 356 examples 356 server-side stacks, components about 356 API 356 configuration 356 router 356 setValue method 67 shifting 244, 245 shortcuts about 81 Fill component 81 Separator component 81 Spacer component 81 TextItem component 81 showLabels config 220 show method 253 singleton class 303, 304 sliding 243 sm variable 132 sortable option 101 sortType function 176 Spacer component 81 spacer image 16 specialkey event 61 specialkey listener 86 Spket IDE 393 split attribute 148 split button about 79 example 79 spreadsheet 91 SQLLite 387<br /> <br /> stack deconstruction 359 API 361, 362 form post response 368 forms transactions 366 HTTP post transaction 364, 365 JSON HTTP response 367 StackedBarChart 224 StackedColumnChart 224 state management 384 stopFx method 251 store config option 56 Store object about 351 Combobox object 352 DataView object 352 Grid object 352 store property 253, 254 string formatting 381 string data type 94 styles adding, to bar chart 223 programmatically, changing 235 errors, displaying 50, 51 working, with 386 submit action 66 success option 64 swfobject library 214 SwfUploadPanel 390 switching 244 switch statement 34<br /> <br /> T table layout manager 147 Tabpanel class about 150 example 151, 152 TabPanel instances 316 tbar config option 87 TemplateColumn column type 102 textarea field 59 text config option 73, 77 TextItem component 81 text property 171 tile function 210 TimeField component 377, 378 [ 406 ]<br /> <br /> timefield field type 47 TinyMCE editor 390 tipRenderer config 228, 229 title option 197 title_tagline function 105 toggleGroup config option 77 toggleHandler function 77, 80 toolbar about 75 button, config options 77 button, with menu 78 child components 75 dividers 80 form fields 85, 86 item alignment 80 shortcuts 81 spacers 80 split button 79 toggling button state 79 tooltips 228 trackpoints 230 transaction action 363 creating 363 data 363 method 363 tid 363 type 363 TreeDragZone class 168 TreeDropZone class 168 TreeEditor class 168 TreeFilter class 168 TreeLoader class 169 treenode 237 TreeNode class 169 TreeNodeUI class 169 TreePanel class about 169 context menus 179, 180 nodes, filtering 181 rendering, into container 169, 170 selection models 178 TreePanel object 321 TreeSorter class 169, 175 type option 66<br /> <br /> U update() method 288 up function 75 url config option 45 url parameter 170 usMoney() method 382<br /> <br /> V valueField config option 56 value property 130, 135 variable assigning, to function 8 assigning, to string 8 vbox layout manager about 147, 161 example 161 Viewport about 147 example 148, 149, 150 vtype creating 51, 52 vTypes alpha 49 alphanum 49 email 49 url 49<br /> <br /> W widgets 30-33, 237 width option 72, 101 WindowGroup.each function 210 window management, Ext JS about 205 customer service workplace 209 default window manager behavior 205 multiple window, example 205-208 Windows about 197 events 203 examples 197 layout configuration option 198, 199 manipulating 202, 203 state, handling 204 textfields, adding 198 [ 407 ]<br /> <br /> World Wide Web Consortium (W3C) 278 Writable Store 139-141<br /> <br /> X XML about 172 and JSON 358 example 358 XML file movie database, loading 109, 110 XMLReader class 95 XmlReader object 321 XMLStore object 320 XmlTreeLoader class about 172 creating 173 example 173<br /> <br /> xtype about 46, 299 form fields, example 46 using 299 xxxMask definition 51 xxxText definition 51 xxxVal definition 51<br /> <br /> Y YUI Charting site URL 214<br /> <br /> Z z-ordering 205<br /> <br /> [ 408 ]<br /> <br /> Thank you for buying<br /> <br /> Learning Ext JS 3.2 About Packt Publishing<br /> <br /> Packt, pronounced 'packed', published its first book "Mastering phpMyAdmin for Effective MySQL Management" in April 2004 and subsequently continued to specialize in publishing highly focused books on specific technologies and solutions. Our books and publications share the experiences of your fellow IT professionals in adapting and customizing today's systems, applications, and frameworks. Our solution based books give you the knowledge and power to customize the software and technologies you're using to get the job done. Packt books are more specific and less general than the IT books you have seen in the past. Our unique business model allows us to bring you more focused information, giving you more of what you need to know, and less of what you don't. Packt is a modern, yet unique publishing company, which focuses on producing quality, cutting-edge books for communities of developers, administrators, and newbies alike. For more information, please visit our website: www.packtpub.com.<br /> <br /> About Packt Open Source<br /> <br /> In 2010, Packt launched two new brands, Packt Open Source and Packt Enterprise, in order to continue its focus on specialization. This book is part of the Packt Open Source brand, home to books published on software built around Open Source licences, and offering information to anybody from advanced developers to budding web designers. The Open Source brand also runs Packt's Open Source Royalty Scheme, by which Packt gives a royalty to each Open Source project about whose software a book is sold.<br /> <br /> Writing for Packt<br /> <br /> We welcome all inquiries from people who are interested in authoring. Book proposals should be sent to author@packtpub.com. If your book idea is still at an early stage and you would like to discuss it first before writing a formal book proposal, contact us; one of our commissioning editors will get in touch with you. We're not just looking for published authors; if you have strong technical skills but no writing experience, our experienced editors can help you develop a writing career, or simply get some additional reward for your expertise.<br /> <br /> Ext JS 3.0 Cookbook ISBN: 978-1-847198-70-9<br /> <br /> Paperback: 376 pages<br /> <br /> Download from Wow! eBook <www.wowebook.com><br /> <br /> Liferay Portal 5.2 Systems Development 1. <br /> <br /> Master the Ext JS widgets and learn to create custom components to suit your needs<br /> <br /> 2. <br /> <br /> Build striking native and custom layouts, forms, grids, listviews, treeviews, charts, tab panels, menus, toolbars and much more for your real-world user interfaces<br /> <br /> 3. <br /> <br /> Packed with easy-to-follow examples to exercise all of the features of the Ext JS library<br /> <br /> jQuery UI 1.7: The User Interface Library for jQuery ISBN: 978-1-847199-72-0<br /> <br /> Paperback: 392 pages<br /> <br /> Build highly interactive web applications with readyto-use widgets from the jQuery User Interface library 1. <br /> <br /> Organize your interfaces with reusable widgets: accordions, date pickers, dialogs, sliders, tabs, and more<br /> <br /> 2. <br /> <br /> Enhance the interactivity of your pages by making elements drag-and-droppable, sortable, selectable, and resizable<br /> <br /> Please check www.PacktPub.com for information on our titles<br /> <br /> jQuery 1.4 Reference Guide ISBN: 978-1-849510-04-2<br /> <br /> Paperback: 336 pages<br /> <br /> A comprehensive exploration of the popular JavaScript library 1. <br /> <br /> Quickly look up features of the jQuery library<br /> <br /> 2. <br /> <br /> Step through each function, method, and selector expression in the jQuery library with an easy-to-follow approach<br /> <br /> 3. <br /> <br /> Understand the anatomy of a jQuery script<br /> <br /> 4. <br /> <br /> Write your own plug-ins using jQuery's powerful plug-in architecture<br /> <br /> jQuery 1.3 with PHP ISBN: 978-1-847196-98-9<br /> <br /> Paperback: 248 pages<br /> <br /> Enhance your PHP applications by increasing their responsiveness through jQuery and its plugins. 1. <br /> <br /> Combine client-side jQuery with your server-side PHP to make your applications more efficient and exciting for the client<br /> <br /> 2. <br /> <br /> Learn about some of the most popular jQuery plugins and methods<br /> <br /> 3. <br /> <br /> Create powerful and responsive user interfaces for your PHP applications<br /> <br /> Please check www.PacktPub.com for information on our titles<br /> <br /> </div> </div> </div> <div class="row hidden-xs"> <div class="col-md-12"> <h2></h2> <hr /> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/learning-ext-js.html"> <img src="https://epdf.tips/img/300x300/learning-ext-js_5a4ab7beb7d7bc21216471c7.jpg" alt="Learning Ext JS" /> <h3 class="note-title">Learning Ext JS</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/learning-ext-js.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/learning-ext-js-32fe5644011a2ab6c8d3931e82c28aad4a88853.html"> <img src="https://epdf.tips/img/300x300/learning-ext-js-32_5a7584a3b7d7bc1b599e1595.jpg" alt="Learning Ext JS 3.2" /> <h3 class="note-title">Learning Ext JS 3.2</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/learning-ext-js-32fe5644011a2ab6c8d3931e82c28aad4a88853.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/learning-ext-js11430.html"> <img src="https://epdf.tips/img/300x300/learning-ext-js_5a4ab7cdb7d7bc25214d77e5.jpg" alt="Learning Ext JS" /> <h3 class="note-title">Learning Ext JS</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/learning-ext-js11430.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/learning-ext-js3a3033d9e87ea604b8bf4d14af2fb60f48761.html"> <img src="https://epdf.tips/img/300x300/learning-ext-js_5a757642b7d7bcba25529522.jpg" alt="Learning Ext JS" /> <h3 class="note-title">Learning Ext JS</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/learning-ext-js3a3033d9e87ea604b8bf4d14af2fb60f48761.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/learning-ext-js-32.html"> <img src="https://epdf.tips/img/300x300/learning-ext-js-32_5a757739b7d7bcb82569934c.jpg" alt="Learning Ext JS 3.2" /> <h3 class="note-title">Learning Ext JS 3.2</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/learning-ext-js-32.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/learning-ext-js65235.html"> <img src="https://epdf.tips/img/300x300/learning-ext-js_5a4ab87fb7d7bc25214d77e7.jpg" alt="Learning Ext JS" /> <h3 class="note-title">Learning Ext JS</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/learning-ext-js65235.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/learning-ext-js55032.html"> <img src="https://epdf.tips/img/300x300/learning-ext-js_5a4ab8b5b7d7bc21216471c8.jpg" alt="Learning Ext JS" /> <h3 class="note-title">Learning Ext JS</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/learning-ext-js55032.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/learning-ext-js9c626868d9e72adad422ac686104837734791.html"> <img src="https://epdf.tips/img/300x300/learning-ext-js_5a7589b5b7d7bc6a0d3e0f9b.jpg" alt="Learning Ext JS" /> <h3 class="note-title">Learning Ext JS</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/learning-ext-js9c626868d9e72adad422ac686104837734791.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/ext-js-in-actiondc77e74b82e6cce039f616376ceed1ca90255.html"> <img src="https://epdf.tips/img/300x300/ext-js-in-action_5a757fb5b7d7bc1d591e0be3.jpg" alt="Ext JS in Action" /> <h3 class="note-title">Ext JS in Action</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/ext-js-in-actiondc77e74b82e6cce039f616376ceed1ca90255.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/ext-js-30-cookbook.html"> <img src="https://epdf.tips/img/300x300/ext-js-30-cookbook_5a4ab80eb7d7bc25214d77e6.jpg" alt="Ext JS 3.0 Cookbook" /> <h3 class="note-title">Ext JS 3.0 Cookbook</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/ext-js-30-cookbook.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/ext-js-30-cookbook7ae4a59430c2f7a150598b44710d23f955316.html"> <img src="https://epdf.tips/img/300x300/ext-js-30-cookbook_5a757689b7d7bcb9253853ba.jpg" alt="Ext JS 3.0 Cookbook" /> <h3 class="note-title">Ext JS 3.0 Cookbook</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/ext-js-30-cookbook7ae4a59430c2f7a150598b44710d23f955316.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/ext-js-in-action.html"> <img src="https://epdf.tips/img/300x300/ext-js-in-action_5a4abf6fb7d7bc8f0f96b054.jpg" alt="Ext JS in Action" /> <h3 class="note-title">Ext JS in Action</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/ext-js-in-action.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/ext-js-in-action4daf64ff3c97f9d84e1dbc9845444e1757398.html"> <img src="https://epdf.tips/img/300x300/ext-js-in-action_5a75854db7d7bc1d591e0be4.jpg" alt="Ext JS in Action" /> <h3 class="note-title">Ext JS in Action</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/ext-js-in-action4daf64ff3c97f9d84e1dbc9845444e1757398.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/ext-js-4-first-look1365d432f8f32ad7bdf0a996c17378b010893.html"> <img src="https://epdf.tips/img/300x300/ext-js-4-first-look_5a759729b7d7bc163c74b90b.jpg" alt="Ext JS 4 First Look" /> <h3 class="note-title">Ext JS 4 First Look</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/ext-js-4-first-look1365d432f8f32ad7bdf0a996c17378b010893.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/ext-js-4-first-look.html"> <img src="https://epdf.tips/img/300x300/ext-js-4-first-look_5a759261b7d7bc6d0dfe6118.jpg" alt="Ext JS 4 First Look" /> <h3 class="note-title">Ext JS 4 First Look</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/ext-js-4-first-look.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/ext-js-4-web-application-development-cookbook.html"> <img src="https://epdf.tips/img/300x300/ext-js-4-web-application-development-cookbook_5a3f5c1cb7d7bcd160fe351a.jpg" alt="Ext JS 4 Web Application Development Cookbook" /> <h3 class="note-title">Ext JS 4 Web Application Development Cookbook</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/ext-js-4-web-application-development-cookbook.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/oracle-application-express-40-with-ext-js.html"> <img src="https://epdf.tips/img/300x300/oracle-application-express-40-with-ext-js_5a758021b7d7bc1e5907e50f.jpg" alt="Oracle Application Express 4.0 with Ext JS" /> <h3 class="note-title">Oracle Application Express 4.0 with Ext JS</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/oracle-application-express-40-with-ext-js.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/practical-ext-js-projects-with-gears.html"> <img src="https://epdf.tips/img/300x300/practical-ext-js-projects-with-gears_5a4ab745b7d7bc21216471c6.jpg" alt="Practical Ext JS projects with Gears" /> <h3 class="note-title">Practical Ext JS projects with Gears</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/practical-ext-js-projects-with-gears.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/ext-js-4-web-application-development-cookbook69131.html"> <img src="https://epdf.tips/img/300x300/ext-js-4-web-application-development-cookbook_5a3f5c1eb7d7bccd60313b7e.jpg" alt="Ext JS 4 Web Application Development Cookbook" /> <h3 class="note-title">Ext JS 4 Web Application Development Cookbook</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/ext-js-4-web-application-development-cookbook69131.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/practical-ext-js-projects-with-gears-practical-projects.html"> <img src="https://epdf.tips/img/300x300/practical-ext-js-projects-with-gears-practical-pro_5a757636b7d7bcb9253853b9.jpg" alt="Practical Ext JS Projects with Gears (Practical Projects)" /> <h3 class="note-title">Practical Ext JS Projects with Gears (Practical Projects)</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/practical-ext-js-projects-with-gears-practical-projects.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/32.html"> <img src="https://epdf.tips/img/300x300/32_5b74bcbbb7d7bc026facaa7f.jpg" alt="32" /> <h3 class="note-title">32</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/32.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/los-carros-pesados-js-2-y-js-3-1944-1973.html"> <img src="https://epdf.tips/img/300x300/los-carros-pesados-js-2-y-js-3-1944-1973_5a758d90b7d7bc6d0dfe6117.jpg" alt="Los carros pesados JS-2 y JS-3: 1944-1973" /> <h3 class="note-title">Los carros pesados JS-2 y JS-3: 1944-1973</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/los-carros-pesados-js-2-y-js-3-1944-1973.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/ext-gwt-20-beginners-guide.html"> <img src="https://epdf.tips/img/300x300/ext-gwt-20-beginners-guide_5b9a6af1b7d7bcac1df10305.jpg" alt="Ext GWT 2.0: Beginner's Guide" /> <h3 class="note-title">Ext GWT 2.0: Beginner's Guide</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/ext-gwt-20-beginners-guide.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/32-cuentos.html"> <img src="https://epdf.tips/img/300x300/32-cuentos_5b8f6badb7d7bc085af28c38.jpg" alt="32 cuentos" /> <h3 class="note-title">32 cuentos</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/32-cuentos.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/32-decembre.html"> <img src="https://epdf.tips/img/300x300/32-decembre_5b9c6b4db7d7bcb1340cbc85.jpg" alt="32 décembre" /> <h3 class="note-title">32 décembre</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/32-decembre.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/32-caliber3bf92f8c340ca71b7367efbb45eef80a78113.html"> <img src="https://epdf.tips/img/300x300/32-caliber_5bebeaafb7d7bcf41f4fc35a.jpg" alt="32 Caliber" /> <h3 class="note-title">32 Caliber</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/32-caliber3bf92f8c340ca71b7367efbb45eef80a78113.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/32-fangs.html"> <img src="https://epdf.tips/img/300x300/32-fangs_5be87ef3b7d7bcf41f4f396a.jpg" alt="32 Fangs" /> <h3 class="note-title">32 Fangs</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/32-fangs.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/cr-32.html"> <img src="https://epdf.tips/img/300x300/cr-32_5b468251b7d7bc9d590921d9.jpg" alt="CR 32" /> <h3 class="note-title">CR 32</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/cr-32.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/32-caliber.html"> <img src="https://epdf.tips/img/300x300/32-caliber_5beb0208b7d7bcf71f8d0daa.jpg" alt="32 Caliber" /> <h3 class="note-title">32 Caliber</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/32-caliber.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/32-caliberb40c9c334659d44ece2da8354215441f34340.html"> <img src="https://epdf.tips/img/300x300/32-caliber_5bec1b38b7d7bcf71f8d3e4e.jpg" alt="32 Caliber" /> <h3 class="note-title">32 Caliber</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/32-caliberb40c9c334659d44ece2da8354215441f34340.html">Read more</a> </div> </div> </div> </div> </div> <div class="col-lg-3 col-md-4 col-xs-12"> <div class="panel-recommend panel panel-primary"> <div class="panel-heading"> <h4 class="panel-title">Recommend Documents</h4> </div> <div class="panel-body"> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/learning-ext-js.html"> <img src="https://epdf.tips/img/60x80/learning-ext-js_5a4ab7beb7d7bc21216471c7.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/learning-ext-js.html"> Learning Ext JS </a> </label> <div class="note-meta"> <div class="note-desc">Learning Ext JS Build dynamic, desktop-style user interfaces for your data-driven web applications Shea Frederick Col...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/learning-ext-js-32fe5644011a2ab6c8d3931e82c28aad4a88853.html"> <img src="https://epdf.tips/img/60x80/learning-ext-js-32_5a7584a3b7d7bc1b599e1595.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/learning-ext-js-32fe5644011a2ab6c8d3931e82c28aad4a88853.html"> Learning Ext JS 3.2 </a> </label> <div class="note-meta"> <div class="note-desc">Learning Ext JS 3.2 Build dynamic, desktop-style user interfaces for your data-driven web applications using Ext JS S...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/learning-ext-js11430.html"> <img src="https://epdf.tips/img/60x80/learning-ext-js_5a4ab7cdb7d7bc25214d77e5.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/learning-ext-js11430.html"> Learning Ext JS </a> </label> <div class="note-meta"> <div class="note-desc">Learning Ext JS Build dynamic, desktop-style user interfaces for your data-driven web applications Shea Frederick Col...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/learning-ext-js3a3033d9e87ea604b8bf4d14af2fb60f48761.html"> <img src="https://epdf.tips/img/60x80/learning-ext-js_5a757642b7d7bcba25529522.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/learning-ext-js3a3033d9e87ea604b8bf4d14af2fb60f48761.html"> Learning Ext JS </a> </label> <div class="note-meta"> <div class="note-desc">This material is copyright and is licensed for the sole use by Roman Heinrich on 25th December 2008 Am Hilligenbusch 47...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/learning-ext-js-32.html"> <img src="https://epdf.tips/img/60x80/learning-ext-js-32_5a757739b7d7bcb82569934c.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/learning-ext-js-32.html"> Learning Ext JS 3.2 </a> </label> <div class="note-meta"> <div class="note-desc">Learning Ext JS 3.2 Build dynamic, desktop-style user interfaces for your data-driven web applications using Ext JS S...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/learning-ext-js65235.html"> <img src="https://epdf.tips/img/60x80/learning-ext-js_5a4ab87fb7d7bc25214d77e7.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/learning-ext-js65235.html"> Learning Ext JS </a> </label> <div class="note-meta"> <div class="note-desc">This material is copyright and is licensed for the sole use by Roman Heinrich on 25th December 2008 Am Hilligenbusch 47...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/learning-ext-js55032.html"> <img src="https://epdf.tips/img/60x80/learning-ext-js_5a4ab8b5b7d7bc21216471c8.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/learning-ext-js55032.html"> Learning Ext JS </a> </label> <div class="note-meta"> <div class="note-desc">This material is copyright and is licensed for the sole use by Roman Heinrich on 25th December 2008 Am Hilligenbusch 47...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/learning-ext-js9c626868d9e72adad422ac686104837734791.html"> <img src="https://epdf.tips/img/60x80/learning-ext-js_5a7589b5b7d7bc6a0d3e0f9b.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/learning-ext-js9c626868d9e72adad422ac686104837734791.html"> Learning Ext JS </a> </label> <div class="note-meta"> <div class="note-desc">Learning Ext JS Build dynamic, desktop-style user interfaces for your data-driven web applications Shea Frederick Col...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/ext-js-in-actiondc77e74b82e6cce039f616376ceed1ca90255.html"> <img src="https://epdf.tips/img/60x80/ext-js-in-action_5a757fb5b7d7bc1d591e0be3.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/ext-js-in-actiondc77e74b82e6cce039f616376ceed1ca90255.html"> Ext JS in Action </a> </label> <div class="note-meta"> <div class="note-desc">IN ACTION Jesus Garcia MANNING Ext JS in Action Ext JS in Action JESUS GARCIA MANNING Greenwich (74° w. long.) F...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/ext-js-30-cookbook.html"> <img src="https://epdf.tips/img/60x80/ext-js-30-cookbook_5a4ab80eb7d7bc25214d77e6.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/ext-js-30-cookbook.html"> Ext JS 3.0 Cookbook </a> </label> <div class="note-meta"> <div class="note-desc">Ext JS 3.0 Cookbook 109 great recipes for building impressive rich internet applications using the Ext JS JavaScript li...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://epdf.tips/report/learning-ext-js-3260f432e3184bce667bb8e437b916fc0562321" style="border: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Report "Learning Ext JS 3.2"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value="">-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;">

Close Send