Call & Scope

So as it turns out, the simple answer is no. The each method uses the call method of the Function constructor to apply scope to the function executed on each pass of the loop. When no scope is provided to the each method, it uses the current item as the scope – which is kinda strange, but whatever.

No Scope

Here is my smart idea – don’t use the call method if there is no scope provided. Simple, and it seems like it would help speed things up, so let’s give it a shot.

Ext.each = function(array, fn, scope){<br /> if(Ext.isEmpty(array, true)){<br /> return;<br /> }<br /> if(!Ext.isIterable(array) || Ext.isPrimitive(array)){<br /> array = [array];<br /> }<br /> for(var i = 0, len = array.length; i < len; i++){<br /> if((scope) ? fn.call(scope, array[i], i, array) : fn(array[i], i, array) === false){<br /> return i;<br /> }<br /> }<br /> };

The basic change here is on line 9 where I check to see if scope was passed in, and decide to either call the function to apply scope or just execute it directly.

// original<br /> fn.call(scope || array[i], array[i], i, array)<br /> // my version<br /> (scope) ? fn.call(scope, array[i], i, array) : fn(array[i], i, array)

Using my current web app as the guinea pig, this version ran between 5-18% faster in Firefox than it’s non scope checking predecessor. Internet Explorer’s results were so far scattered across the board that I could not draw a conclusion – in some tests 50% faster, in others 350% slower. As usual, IE left me confused, so im just going to ignore that for now.

Can We Do Better?

The next thing that caught my eye was the fact that when a single item is passed into the each method, it is shoved into an array and sent through the for loop – this seemed like a place for improvement.

Ext.each = function(array, fn, scope){<br /> if(Ext.isEmpty(array, true)){<br /> return;<br /> }<br /> if (!Ext.isIterable(array) || Ext.isPrimitive(array)) {<br /> if ((scope) ? fn.call(scope, array, 0, array) : fn(array, 0, array) === false) {<br /> return 0;<br /> }<br /> } else {<br /> for (var i = 0, len = array.length; i < len; i++) {<br /> if ((scope) ? fn.call(scope, array[i], i, array) : fn(array[i], i, array) === false) {<br /> return i;<br /> }<br /> }<br /> }<br /> };

In this case I have simply taken any single non array item that is passed in and executed the function immediately, bypassing the for loop. Results of this change were not noticeable, and matched almost identically with my previous version. Upon closer inspection, it turns out that this case is never reached, in other words, there is always an array passed in. Go figure.

Summary

The moral of the story here is to think simple when trying to optimize code, otherwise we end up going to far into optimizing and actually make the code more complex and likely slower, but this does not mean that the code with the fewest characters or lines will be the quickest. Experimenting is fun, so I would encourage everyone to try things like this just to see how they work and in turn gain a better understanding of how the methods you use every day actually work. Priceless.

Code for these tests can be downloaded from my Ext.ux.Misc Git repo on Github.

My next step is to test each loop “unrolling” to see what the effect is…let me know what you have tried on your own, and how it has worked out for you.

These Overrides are a way for us to change the way the base library works, usually because of a defect, but sometimes just because we don’t like or agree with the way something works. Here we are going to cover how to write a basic Override that ‘fixes’ or adds a feature to something in the library.

Why?

The last thing we want to do is edit any of the Ext JS distribution files, such as ext-all.js or ext-core.js, we want to instead apply our changes into the library without touching the library files directly, using the library itself to overwrite specific functions where needed. Editing the library files directly would make upgrading nearly impossible. This is where the Override method comes in to help.

Downfall

Overriding a base function causes an extra maintenance responsibility – a shift of responsibility – simple as that. Though less of a problem than say, editing the ext-all.js file. Every upgrade of the base library (Ext JS) we make requires that we re-examine all of our Overrides to make sure they still sync up with code from the base library, and that the problem were overriding has not been fixed by the Ext JS development team.

Override

Were going to start with an override that adds a feature to the library that we desperately need! Or at least that’s what our boss tells us.

We are adding an option to cascade the placement of new windows based on the position of the previous window. The reason I am adding this as an Override instead of a Plugin or Extension is because im lobbying to get it added as a feature to the library (not really) and when it gets added to the library and I upgrade, I will be able to simply remove my override and continue with life.

The goal is to end up with an no Overrides in your application, by reporting bugs and enhancements to the Ext JS team, and following through so they get fixed in the library.

The Override method of the Ext JS library will take the function(s) we pass to it and overwrite functions of the same name within the component specified. The previously defined function that were replacing are completely removed, and the new ones put in their place.

Two arguments are accepted for the Override method, the first is the class that we are overriding, and the second is an object with the methods we are overriding.

Ext.override(/*CLASS*/, /*METHODS OBJECT*/{<br /> /*METHOD NAME*/:function(){<br /> /*DO IT!*/<br /> },<br /> /*ANOTHER METHOD NAME*/:function(){<br /> /*DO IT MORE!*/<br /> }<br /> });

The Code

We start by copying the source of the original method from the Ext JS source files that come with the SDK download (located in the src folder), in this case it’s the beforeShow method of Ext.Window (in Window.js). Using the source as a starting point, we can modify the function to do what we need.

Ext.override(Ext.Window, {<br /> beforeShow : function(){<br /> delete this.el.lastXY;<br /> delete this.el.lastLT;<br /> if(this.x === undefined || this.y === undefined){<br /> var xy = this.el.getAlignToXY(this.container, ‘c-c’),<br /> pos = this.el.translatePoints(xy[0], xy[1]);<br /> if(this.position === ‘cascade’){<br /> this.x = Ext.winPosx = (Ext.winPosx)? Ext.winPosx+20 : pos.left;<br /> this.y = Ext.winPosy = (Ext.winPosy)? Ext.winPosy+20 : pos.top;<br /> }else{<br /> this.x = this.x === undefined? pos.left : this.x;<br /> this.y = this.y === undefined? pos.top : this.y;<br /> }<br /> }<br /> this.el.setLeftTop(this.x, this.y);<br /> if(this.expandOnShow){<br /> this.expand(false);<br /> }<br /> if(this.modal){<br /> Ext.getBody().addClass(‘x-body-masked’);<br /> this.mask.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));<br /> this.mask.show();<br /> }<br /> }<br /> });

NOTE: Find the source on my Github ExtJS.Patterns repo.

Here it has been modified to add an if statement that looks at our new position config to see if its been set to ‘cascade’. From there we can add 20 pixels to both the x and y axis of the previous window position to place it cascaded. The previous window position has been stored in the winPosx/y properties of the Ext object. The else simply runs the original window position code.

This is all overwriting the original beforeShow method of the Window, which simply placed the window in the center of it’s container. This change applies to every single window that is created, even windows that might be extended from the base window class, it’s essentially changing the source code of the Ext JS library, without touching the source files.

How About Fixes

Fixes are really the same thing, if were adding new features or fixing problems it’s all the same as far as Overrides are concerned, though most of the time an Override would be used to fix a bug. Need I say more?

Summary

Overrides are great for adding features or fixes to the library code without disturbing the source files. Keep this in mind when you run into a bug in the library and need to ‘patch’ it to get things working, or have required features that should be part of the base library. The goal should be having NO overrides at all, which can be achieved by reporting bugs and posting feature requests. Enjoy!

Scenario (our use case)

Our goal here is to create a ‘required’ indicator on all form fields by setting a required flag on the configuration object of each component – in our case, form fields. The code base (the web app) is already in place, so this is a web application that has been completed and is in use.

We have a few options available to make this happen:

• Override
• Extend
• Intercept/Sequence

Lets take a look at the benefits and problems imposed by these methods.

Override

Of course one way to get what we want is to override a particular method in the component were using. If were lucky, there is a stub function in place that we can use, but more often than not, this is not the case. What were left with is having to copy code from the library source files and modify it to fit our needs – not the optimal solution. This means that each time the Ext JS codebase is updated, we need to check the changes against our overridden copy. This is a maintenance nightmare, though there are cases where this is the optimal solution.

Extend (new Component)

The better of our two options is the Extend method. This way creates a copy of the component that we can modify to fit our needs. Not a bad solution all and all. The two problems here are that any components that inherit from our extended component will not get our new functionality, and we now have a copy of the component with a new name, so each place we use that component needs to use our updated component name, ie: ‘mysupertextfield’ instead of ‘textfield’. Again, not a big deal, but if I already have a complete web app, and im adding a bit of functionality to a common component, I don’t want to have to run a find/replace on the entirety of my code.

Meet intercept/sequence

My personal favorite in this situation is to add our functionality either before or after an existing method. The intercept method of Ext JS takes whatever function you provide and executes it right before whatever method in the component you specify. The function we define is also executed in the same scope as the method were intercepting.

Ext.intercept(Ext.form.Field.prototype, ‘initComponent’, function() {<br /> var fl = this.fieldLabel, ab = this.allowBlank;<br /> if (ab === false && fl) {<br /> this.fieldLabel = ‘<span style="color:red;">*</span> ‘+fl;<br /> } else if (ab === true && fl) {<br /> this.fieldLabel = ‘  ‘+fl;<br /> }<br /> });

NOTE: Find the source on my Github ExtJS.Patterns repo.

With this override, we can use the existing allowBlank flag to trigger the required indicator

…<br /> {<br /> fieldLabel: ‘Last Name’,<br /> allowBlank: false,<br /> name: ‘last’<br /> },{<br /> fieldLabel: ‘Company’,<br /> allowBlank: true,<br /> name: ‘company’<br /> }<br /> …

In this case, intercept seems to be the perfect fit, allowing us to add a visual required indicator to each component that is extended from the Field base class. The one downside I see here is that this code is executed every single time a field is created, so be sure to make it lean.

We could also use Sequence to achieve this, which uses the same syntax and concept as Intercept, but executes after the method we define has executed instead of before. The order of execution is like this:

• Intercept
• Method (ie: initComponent)
• Sequence

Summary

I hope this has helped. Over the next few weeks I will be blogging about the many Ext JS patterns available, their pros and cons, and practical usage. Each one will have code paired with it on Github.

this.config[col] is undefined

The autoExpandColumn feature of the ColumnModel accepts an ‘id’ as the argument, this ‘id’ needs to match the ‘id’ given to the Column configuration.

{<br /> columns: [{<br /> id: 'not_so_super_column_id', // column id defined<br /> header: 'Super Duper',<br /> dataIndex: 'superduper'<br /> }],<br /> …,<br /> autoExpandColumn: ‘super_duper_column_id’ // wrong column id used – fail!<br /> }

Another thing to keep in mind, is that while it works sometimes, the value for autoExpandColumn should NOT be a column index – the id of the column should always be used.

types[config.xtype || defaultType] is not a constructor (b[d.xtype || e] is not a constructor)

This happens when trying to instantiate (create) a component that does not exist, the most common reason is a typo or spelling error. For instance, using ‘gridpanel’ as the xtype instead of ‘grid’ – which is a mistake I make often myself. Sometimes we can forget a level of namespacing, like using Ext.FormPanel instead of the proper Ext.form.FormPanel.

{<br /> xtype: ‘formpanel’ // fail<br /> },{<br /> xtype: ‘form’ // win!<br /> }

Another one I always run into is typing ‘combobox’ instead of the correct ‘combo’ for the xtype – a list of xtypes can be found in the ExtJS documentation under Ext.Component.

this.addEvents is not a function

This is not a new problem (you like that pun?) but unfortunately the error message sends us off in the wrong direction. When this message appears it sounds like its an event related problem, but what it simply means is that we have forgotten to preface a constructor with the ‘new’ operator.

Ext.form.TextField({}); // fail<br /> new Ext.form.TextField({}); // win!

el is null

So with this one, its a little easier to figure out what went wrong just from the error message. In shorthand variable naming, a couple of letters are picked out of a longer word that phonetically make sense, and do not spell something else or sound like other commonly used words. So in this case ‘el’ is short for ELement. As the error message says ‘el is null’, which if we translate from geek speak to English it says ‘html element does not exist’.

</p> <div id="sweet_dude"></div> <p>new Ext.Button({<br /> text: ‘Clicky’,<br /> renderTo: ‘dude_sweet’ // does not match the id!<br /> });

f.convert is not a function

This one is not so common, but still happens every once and a while. It means that your data reader was trying to read the data you passed to your store with a particular data type that did not exist. Thats allot to take in, so lets take a look at this example.

var myStore = new Ext.data.ArrayStore({<br /> fields: [{<br /> name:'fullname',<br /> type:'badass'<br /> }, {<br /> name:'first',<br /> type:'string'<br /> }]<br /> });

In this example the ‘fullname’ column has a datatype of ‘badass’, which does not exist. On the flip side, the datatype for ‘first’ of ‘string’ does exist.

Summary

Now if we can just keep these in our memory, we might be able to have a productive day -or just drink more coffee and see how that pans out.

A solution that works for me has taken the shape of a sticky note – I affectionately refer to this as the “SCOPE DONKEY!” note. Its my reminder for things to look for when I get that icky feeling that there is a scope related problem. So here is the rundown:

Each

Using Ext.each or the each method of an array or store, etc. is the first easy way to loose scope. The following bit of code looses scope, so our doSomething method is not available inside of the each.

Ext.each(myArry, function(r){<br /> this.doSomething(r);<br /> });

This next code maintains scope within the each loop.

Ext.each(myArry, function(r){<br /> this.doSomething(r);<br /> }, this);

The difference is in the third argument that passes scope to the each loop.

Events

Setting up event handlers is another easy place to loose scope, and when the event finally fires off it quickly becomes unclear where the problem originated

myCmp.on(‘myevent’, this.myHandler);

This next code maintains scope within the event handler.

myCmp.on('myevent', this.myHandler, this);

Just like with the each loop, we are passing in a scope as the third argument

NOTE: (thanks Rich Waters) this also applies to subscribing to events via the listeners config, for example:

listeners: {<br /> myevent: {<br /> fn: this.myHandler,<br /> scope: this<br /> }<br /> }

Buttons

A Buttons handler is scoped to the button component itself by default, so everything inside that handler has a this that references the button. Its not very often that I actually use a buttons handler to manipulate the button itself, so I need my scope somewhere else. Luckily the button config has a scope option.

buttons: [{<br /> text: 'Do Something',<br /> handler: this.doSomething,<br /> scope: this<br /> }]

Message Boxes

The MessageBox's callback is a similar situation to the Button, so we need to pass it a scope as well, this way we have access to this inside the handler.

Ext.Msg.prompt(<br /> 'Do Something',<br /> 'Something',<br /> this.doSomething,<br /> this<br /> );

I hope these tips help you out - By paying special attention to these four areas you should be able to minimize those late night scope related debugging sessions.

The code for this tutorial can be downloaded here, and a live example is available here.

Were going to implement a fairly simplistic grid drag and drop. This implementation will allow you to drag a row of data to re-order it within the same grid. We will also play with the look of the dragproxy, which is a visual element used to represent the grid row while its in transition.

Getting Started

The first thing we need to do is tell our GridPanel that it’s going to be used for drag and drop, this is because the default behavior for a grid is to have no drag and drop functionality (which cuts down on resources, ie: memory). We can enable the drag and drop functionality by setting the enableDragDrop config value to true

enableDragDrop : true

Now that the first step is out of the way, lets move on to defining some of our drag and drop specifics.

D&D Groups

We will need to set the drag and drop group – ddGroup – this is a unique identifier that ExtJS components will use to share their dragged and dropped items. For our example, we are using ‘mygrid-dd’. In your case this might be something more along the lines of ‘contacts’ or ‘products’ which could be set on multiple components to allow drag and drop between them.

ddGroup : ‘mygrid-dd’,<br /> ddText : ‘Place this row.’,

Setting those two config options will give us a grid that allows rows to be dragged but not dropped, and has a very generic looking dragproxy. So lets first tackle getting rid of that ugly dragproxy by overwriting it at the start of the selection process. We can do this by adding a beforerowselect listener that will modify the dragproxy message.

Listening For The Drag

Using the grids selection model, we can listen for a beforerowselect event and change the dragproxy.

sm: new Ext.grid.RowSelectionModel({<br /> singleSelect:true,<br /> listeners: {<br /> beforerowselect: function(sm,i,ke,row){<br /> grid.ddText = title_img(row.data.title, null, row);<br /> }<br /> }<br /> })

This gives us a much nicer looking dragproxy, but we still have nowhere to drop the row.

Dropping The Row

In order to drop a row we need to setup the grids body area as a DropTarget, which will allow it to accept a dropped row.

var ddrow = new Ext.dd.DropTarget(grid.getView().mainBody, {<br /> ddGroup : ‘mygrid-dd’,<br /> notifyDrop : function(dd, e, data){<br /> var sm = grid.getSelectionModel();<br /> var rows = sm.getSelections();<br /> var cindex = dd.getDragData(e).rowIndex;<br /> if (sm.hasSelection()) {<br /> for (i = 0; i < rows.length; i++) {<br /> store.remove(store.getById(rows[i].id));<br /> store.insert(cindex,rows[i]);<br /> }<br /> sm.selectRecords(rows);<br /> }<br /> }<br /> });

Just like the GridPanel, one of the first config options we need to set on the DropTarget is the ddGroup, which is set to mygrid-dd. This allows the GridPanel to accept any drops that come from a component having this same ddGroup (of course we are only using one as both source and target). Next we setup the code to be executed when a successful drop happens – the notifyDrop.

Lets break down the code were executing when a successful drop occurs:

1. Grab a reference to the GridPanel‘s SelectionModel.
2. Find out what row(s) are selected.
3. Get the index of where the row was dropped in relation to the other rows.
4. Loop through the selected rows.
5. Remove the row of data from its current location.
6. Add the row of data at its new location.
7. Select the new row (just for a touch of class)

From this bit of code we have a grid that allows you to re-order the rows. If you wanted to update the database with the new order, then an ajax call could be added within the notifyDrop event. We could even use this same basic concept to drag rows between separate grids or other ExtJS components.

Whats Next?

There are a few samples in the SDK download that deal with drag and drop, and as always the API documentation has a huge amount of information to help you on your way.

• Reorder Within a Tree
• Multiple Tree Drag & Drop
• Multiple Grid Drag & Drop
• API Documentation

The Plugin

If your not familiar with the Grid Filter plugin, I would suggest checking out the ExtJS User Extension and Plugins forum thread on this plugin. ExtJS has decided to include my PHP script in the example code released with their 2.1 API download, which I think is a great idea, since the question of how exactly to make this grid filtering work seems to come up very often.

The General Concept

There are five data types that can be filtered, and each of them has their own specific options.

• string
• list
• boolean
• numeric
• date

All the info needed to filter a column is passed by the filter grid plugin as a single ‘filter’ post variable that essentially is a multi-dimentional array.

Each filtered column passes three values, and in some cases a fourth.

• type
• value
• field
• comparison (only for date or numeric – ne, eq, gt, lt)

This ends up making the post variable look something like this – with two filters.

	 filter[0][data][type] : list
	filter[0][data][value] : small,medium
	      filter[0][field] : size
	 filter[1][data][type] : boolean
	filter[1][data][value] : true
	      filter[1][field] : visible

The predictable format of post variables makes it easy to code the server side PHP for this.

The Code

<br /> $where = ” 0 = 0 “;<br /> if (is_array($filter)) {<br /> for ($i=0;$i<count($filter);$i++){<br /> switch($filter[$i]['data']['type']){<br /> case ‘string’ : $qs .= ” AND “.$filter[$i]['field'].” LIKE ‘%”.$filter[$i]['data']['value'].”%’”; Break;<br /> case ‘list’ :<br /> if (strstr($filter[$i]['data']['value'],’,')){<br /> $fi = explode(‘,’,$filter[$i]['data']['value']);<br /> for ($q=0;$q<count($fi);$q++){<br /> $fi[$q] = “‘”.$fi[$q].”‘”;<br /> }<br /> $filter[$i]['data']['value'] = implode(‘,’,$fi);<br /> $qs .= ” AND “.$filter[$i]['field'].” IN (“.$filter[$i]['data']['value'].”)”;<br /> }else{<br /> $qs .= ” AND “.$filter[$i]['field'].” = ‘”.$filter[$i]['data']['value'].”‘”;<br /> }<br /> Break;<br /> case ‘boolean’ : $qs .= ” AND “.$filter[$i]['field'].” = “.($filter[$i]['data']['value']); Break;<br /> case ‘numeric’ :<br /> switch ($filter[$i]['data']['comparison']) {<br /> case ‘ne’ : $qs .= ” AND “.$filter[$i]['field'].” != “.$filter[$i]['data']['value']; Break;<br /> case ‘eq’ : $qs .= ” AND “.$filter[$i]['field'].” = “.$filter[$i]['data']['value']; Break;<br /> case ‘lt’ : $qs .= ” AND “.$filter[$i]['field'].” < ".$filter[$i]['data']['value']; Break;<br /> case ‘gt’ : $qs .= ” AND “.$filter[$i]['field'].” > “.$filter[$i]['data']['value']; Break;<br /> }<br /> Break;<br /> case ‘date’ :<br /> switch ($filter[$i]['data']['comparison']) {<br /> case ‘ne’ : $qs .= ” AND “.$filter[$i]['field'].” != ‘”.date(‘Y-m-d’,strtotime($filter[$i]['data']['value'])).”‘”; Break;<br /> case ‘eq’ : $qs .= ” AND “.$filter[$i]['field'].” = ‘”.date(‘Y-m-d’,strtotime($filter[$i]['data']['value'])).”‘”; Break;<br /> case ‘lt’ : $qs .= ” AND “.$filter[$i]['field'].” < '".date('Y-m-d',strtotime($filter[$i]['data']['value']))."'"; Break;<br /> case ‘gt’ : $qs .= ” AND “.$filter[$i]['field'].” > ‘”.date(‘Y-m-d’,strtotime($filter[$i]['data']['value'])).”‘”; Break;<br /> }<br /> Break;<br /> }<br /> }<br /> $where .= $qs;<br /> }<br /> $query = “SELECT * FROM demo WHERE “.$where;<br />

This simple bit of code is all we need on the server side to have a fully filterable set of data.

See it in action here (switch ‘Local Filtering’ off)

UPDATE – 5/28 : Added support for ‘ne’ (not equals) on numeric and date fields.

Getting Started

If you havent yet used the Google Maps API, then I would suggest going through some of their examples prior to this. I will assume that you already have knowledge of how the Google Maps API works.

Sadly, its quite easy if you already know what the Google Maps API needs, and what Ext provides. Getting to this point took me a few evenings of goofing with it. A Google Map initialization expects to be passed a DOM object, like what you would get from getElementById(‘bla’), and Ext provides this with Ext.get(‘bla’).dom. This changes slightly when your using a tab or window, because you want your map to render in the body area of the tab/window, Ext provides body.dom for these situations.

The window and Tab need to be rendered before you can gain access to the body.dom element, for this I just tag a show() in the end when they are being created.

Tabs

<br /> var tabs = new Ext.TabPanel({<br /> renderTo: ‘tabs’,<br /> width:450,<br /> height: 300,<br /> frame:true<br /> });<br /> var tab1 = tabs.add({id: ‘gmap’,title: ‘Map Tab’,html: ‘map’,tbar: [<br /> 'Address',<br /> addr_field = new Ext.form.TextField({<br /> width:200,<br /> qtip:'Example: 123 Fake Street, Baltimore, MD, 21211, US'<br /> })<br /> ]}).show();<br /> var tab2 = tabs.add({title: ‘Some Other Tab’});<br /> map = new GMap2(tab1.body.dom);<br />

Windows

<br /> dialog = new Ext.Window({<br /> title: ‘Google Map in a Window’,<br /> width:535,<br /> height:500,<br /> shadow:true,<br /> closeAction: ‘hide’,<br /> buttons: [<br /> {<br /> text:'Map Address',<br /> handler: function(){ Map.addressPrompt(); }<br /> },<br /> {<br /> text:'Close',<br /> handler: function(){ dialog.hide(); }<br /> }<br /> ]<br /> }).show();<br /> map = new GMap2(dialog.body.dom);<br />

The last line of each of these sniplets is the important part, it gives the Google Maps API access to the proper DOM element. Its just that simple, and when I figured it out, I was kicking myself.

Getting Started

The ComboBox is always a very usefull form field type, and populating it dynamically makes it even more usefull. We will just be creating a basic ComboBox thats populated from a JSON data source which pulls data from our database.

Setup The Reader

As with any data source, we will need to setup the reader so our data store knows how to read the JSON data were retreiving. We can pass an empty config object to JsonReader since were just populating a simple ComboBox and the second argument is a very simple record definition.

<br /> var rd_random_employee_data = new Ext.data.JsonReader({}, [ 'id', 'name']);<br />

Setup The Data Store

The data source uses a standard store, which by default reads JSON formatted data.

<br /> var ds_random_employee_data_active = new Ext.data.Store({<br /> proxy: new Ext.data.HttpProxy({<br /> // this json data contains only employees where active is ‘true’<br /> url: ‘forms-combobox-data.php?active=true’<br /> }),<br /> reader: rd_random_employee_data,<br /> remoteSort: false<br /> });<br />

The ComboBox

Now we just specify the store in our ComboBox instantiation code and set the displayField and hiddenName (which should be different from the name, if specified).

<br /> var random_employees_active = new Ext.form.ComboBox({<br /> fieldLabel: ‘Active Random Employee Data’,<br /> store: ds_random_employee_data_active,<br /> valueField: ‘id’,<br /> displayField: ‘name’,<br /> hiddenName: ‘active_id’,<br /> mode: ‘remote’,<br /> minChars : 0<br /> });<br />

Setting the minChars to zero and the mode to ‘remote’ will make sure that the data is fetched each time the combo is clicked or focused.

Getting Started

DomHelper is a very powerful tool, so were going to start with some simple things, and you can take it from there. We are going to be using the insertAfter and insertBefore methods of DomHelper in the following examples.

Spacing form Elements

For this example we are adding a spacer div that will bump the next form element down enough to make it line up with a form element in another column (see image). The first argument to insertAfter is the dom element, allot of the time you can use something simple to retrieve the dom element, such as Ext.get(‘bla’). In our case, were going to use DomQuery to find our dom element since were modifying dynamic forms.

Ext.DomHelper.insertAfter(<br /> Ext.DomQuery.selectNode(‘input[name="last"]‘),<br /> {<br /> tag: ‘div’,<br /> ‘style’: ‘width:180px;height:48px;’<br /> },<br /> false<br /> );

Adding More Radio Buttons

In this one we will add a second radio button to allow the form to have two options on the same line (see image). First the actual radio button is added, then its label is added.

Ext.DomHelper.insertAfter(<br /> Ext.DomQuery.selectNode(‘label:contains(Male)’),<br /> {<br /> tag: ‘input’,<br /> id: ‘gender2′,<br /> type: ‘radio’,<br /> name: ‘gender’,<br /> ‘class’: ‘x-form-radio x-form-field’<br /> },<br /> false<br /> );<br /> Ext.DomHelper.insertAfter(<br /> Ext.get(‘gender2′),<br /> {<br /> tag: ‘label’,<br /> ‘class’: ‘x-form-cb-label’,<br /> ‘for’: ‘gender2′,<br /> html: ‘Female’<br /> },<br /> false<br /> );