ABCWebware

I like to write JavaScript functions with ExtJS that take advantage of elements that already exist and have been loaded in the browser, and manipulate them later for various purposes, such as interaction with the users.  I also like to write these functions so that they can be contained within a library and called upon, within any page loaded on the site.  So when a user goes from page to page, the function loads and can be called - it does not matter whether a particular DOM element exists on the page - if the function requires that element, it will simply return a value of false and not cause a JavaScript exception error.

To often, I see examples of ExtJS code, referencing objects in the following manner:

What if this code was stored in a script file, named “js_code.js”, and put in the header file of a template based, content management system? You would probably end up getting JavaScript complaints on every page that the element with ID=”user_image” does not exist. I suppose someone could write, within PHP, some logic to not include that js_code.js file, when a user is not on that page, but that would be silly, not to mention messy. Perhaps a better solution would be to include a complete different header file for that page that loads the js_code.js.

For me, I don’t like dealing with lots of files in my projects - there are often more than enough to maintain. I like to query the DOM for an object’s existence, before following through with any manipulation on it. To do this, it is quite easy:

If you have several elements you want to search for and apply manipulation to, you can use Ext.select, along with the ^= operator to search for elements with name set to a limited number of characters - in this instance, any image that begins with “user_”, will be selected. Also, by using Ext.select, instead of Ext.DomQuery.select, we are taking advantage of extending more Ext class methods to the objects selected, so that we can iterate (loop through) the selected objects and perform our operation. The code below should help explain:

So as you see, above, we were able to hide all images, using the each method, extended from the Ext.select class, by looping through and passing the object through a generic function, which allowed us to manipulate or process each object individually. Is that cool or what?

I will have more examples and code, using this technique, online here soon. I use this all the time in my code with ExtJS and recommend it to everyone. An important note though - because of problems I have found between Internet Explorer and Firefox, no matter what type of programming you do with ExtJS, you will save yourself alot of time and headaches if you make sure that all of your important elements that you wish to manipulate have both an ID and NAME attribute. I also have better luck querying the DOM for elements, using the NAME tag, rather than the ID. I am not sure why - I don’t have time to figure this out, at the moment. But if you’re just trying to get a project out the door for the boss - trust me. Query by name attribute on elements, and make sure the ID and NAMES exist and are the same, and you will be a happy coder - life will be good. Life will be not so good, and you will encounter bad luck at your every turn, if you choose not to heed this warning. Have a nice day!