ExtJS Store Reset

I recently discovered something rather annoying about ExtJS Stores.
You may know that you can request all of the modified Records from a Store with something like:

var arr_modified = obj_store.getModifiedRecords();

This can be very useful if you have a lot of Records but only want to perform actions on the ones that have been edited by the user.
However, what I didn't realise is that the modified Records are held separately so that if you empty the Store (by calling removeAll()) and repopulate it then call getModifedRecords() again not only do you get any modified Records from the new batch but from the old batch also.

The remedy to this is quite simple, upon emptying the Store you must also call rejectChanges() which clears the cache of changed Records (this is complimentary to commitChanges() which performs basically the same action but for a different reason).

Custom ExtJS header buttons

ExtJS Panels can have a limited range of buttons on the header bar but what if you want a custom button? These can be added to a toolbar just underneath the header but if space is at a premium or perhaps you only want one button it's not always ideal.

One solution is to have no header and just make the toolbar look like a header:

var obj_panel = new Ext.Panel({
 tbar: new Ext.Toolbar({
// make the toolbar background look like a header
 cls: 'x-panel-header',
 height: 25,
 items: [
// give the toolbar a title which looks like a Panel title
  '<span style="color:#15428B; font-weight:bold">Title Here</span>',
  '->', //fill element
  {
   text: 'Button Text',
   iconCls: 'add', // optional icon class
   handler: function() {
   // do stuff here
  }
 },' ']
 }),
// ...
});

(The styles used above fit the standard ExtJS theme)

This produces something like this:

Creating a basic select box in ExtJS

I'm currently working on a project that involves generating an entirely ExtJS-based interface from PHP code.

I needed to be able to produce in ExtJS the equivelent of a standard HTML <select> box. This can be achieved with a ComboBox, however, it seems that ComboBoxes are heavily geared towards doing lots of clever things like loading in options over AJAX, allowing the user to type in their own options, auto-completing typed in options, etc. That's all great but if all you want is a standard drop-down with a predefined set of options it takes a bit of work.

I incorrectly assumed that something like the following would work:

obj_combo = new Ext.form.ComboBox({
 name: 'countries',
 items: [
  {value: '1', text: 'UK'},
  {value: '2', text: 'US'},
// ...
]
});

Unfortunaltey, it's not that simple.

Here's an example of the actual code required:

obj_combo = new Ext.form.ComboBox({
 name: 'countries',
// Stop users being able to type in the combobox
 editable: false,
// Even though the user cant type any more
// once they select one option it'll remove any
// others that don't start with the same letters
// unless we turn off filtering
 disableKeyFilter: true,
// Only allow users to pick an option that exists
// in the list of options (not one of their own)
 forceSelection: true,
// This isn't entirely necessary but the combox
// will start off blank otherwise
 emptyText: '--select one--',
// This one's vital: when the user clicks on the
// drop-down show ALL options
 triggerAction: 'all',
// By default it retrieves remote data,
// we're using local data
 mode: 'local',
// ComboBox will only accept data from a Store
// so we have to create a basic one
 store: new Ext.data.SimpleStore({
  id: 0,
  fields: ['value', 'text'],
  data : [['1', 'UK'], ['2', 'US']]
 }),
// Specify which fields in the store hold
// the value and the display text
 valueField: 'value',
 displayField: 'text',
// Important: by default the POST/GET data
// for this item will contain the display text
// not the value. This option creates a hidden field
// with the same name as the dropdown containing the
// selected value so it is that which gets returned
 hiddenName: 'countries'
});

With all those set (plus any of your own) you should have the equivalent of an HTML select box in ExtJS.

For good examples of different ComboBoxes (but unfortunately little explanation of them) check this link:
http://extjs.com/deploy/ext/examples/form/combos.html

Traversing XML in ExtJS

We've just started using the JavaScript ExtJS framework for a new project and whilst it is very good at presentational stuff we have found it to be lacking in the DOM manipulation and traversal department.

We use XML a lot to send data back and forth and so we needed to use that instead of ExtJS' preferred JSON. That in itself is fine, ExtJS provides an XmlReader class that can interpret XML. However, this is geared towards reading in a result set for use in a grid, etc. We wanted to simply return some messages and get ExtJS to read them.
Not impossible I'm sure but we we're struggling with it.

Long story short: we decided to use jQuery for that bit :)
We were already very familiar with jQuery and where it is not as good at presentation as ExtJS it makes up for it in it's superior (imo) DOM traversal and manipulation.

ExtJS and jQuery can co-exist quite peacefully so this was no problem, here's a sample:

Ext.Ajax.request({
 // ..
 // success and failure functions are passed
 // the XMLHTTPRequest object
 success: function(obj_response) {
  var str_val=$('mynode',obj_response.responseXML).text();
  alert(str_val);
 }
 // ...
});

(This assumes that, somewhere, you're including both the ExtJS and jQuery library js files)

This would work for:

<?xml version='1.0'?>
<mynode>This would be the output</mynode>

Again, I'm sure ExtJS can do something similar but I couldn't get it to work.

Bear in mind that other ExtJS classes that can make AJAX calls sometimes pass the success and fail functions another object which contains the XMLHTTPRequest object, so the call is something like obj_response.response.responseXML. Check the ExtJS API Docs for more.

If you are familiar with ExtJS and not jQuery, or vice-versa, I'd highly recommend reading up on both :)