Restart a ExtJS 4.2 Application by recreating the Viewport

If you are debugging your ExtJS application, it could be helpful from time to time to restart the application. Sure, simply pressing F5 usually does the trick, but it might happen that you want to keep the state of the application and just restart the viewport.

This is simply done by typing the following lines in your favorite JavaScript console:

  1. Remove existing viewport with a ComponentQuery
  2. Recreate viewport, here the viewport’s class name is myApp.myClass

 

Using Codenvy (Online IDE) to run Ext JS 4.2.1 Samples

Reader’s of my blog (are there any?) know I love JSFiddle. With it you can easily embed a running example of your JavaScript snippet. This is fine for single-file examples but it gets a bit complicated for more complex ones.
To showcase them, Codenvy is a very nice solution. It is an Online IDE that has a very nice feature called Codenvy Factory. This one lets you share the actual state of your workspace by distributing a simple link. People clicking on the click will get a copy of your workspace and can work in their own sandbox. No worries, the original workspace is not touched, so it is ideal for teaching purposes.
To demonstrate its versatility, I just made a workspace containing all ExtJS 4.2.1 examples for you to play around with.

Just click the link below and you can run all ExtJS examples and edit them as you wish online. And you even don’t have to sign up or login:

If you encounter any problems running the examples, please let me know – I already did some modifications to the original, so they are running under Codenvy.

Dynamically Changing the Structure of a Grid in ExtJS 4.2

If you have a grid in ExtJS, it might happen that you want to change the columns of the grid depending on the data you receive from the server.
In my new pet project Bulks I was facing this exact problem, so I thought it might be worth sharing the solution with you.
In the example below we try to render differently structured JSON arrays in the same grid. The function getKeysFromJson retrieves the keys from such an array. With this
information we can build the ExtJS columns array easily in the createColumns function by mapping each key to a column definition object.
The function createStore further shows us how to create an ExtJS store from the JSON and the keys array.
The store and the columns array are needed to call the reconfigure function of the ExtJS grid which changes the data and column layout of the grid.
Play with the following small example – I hope it demonstrates the idea:

BTW: Don’t wonder about the Chinese characters, I am just trying to learn that language and as everyone I am very happy being able to write my first characters…

Adding Buttons in a Dataview using ExtJS 4.2

If you have a dataview in your ExtJS application, it might be possible that you want to add some action buttons for each of its items. With some good old Javascript this is actually quite easy.
You just have to create a template that contains the HTML markup for the button and give it a distinguishable class name. In the itemmousedown listener of the dataview you later check for the class name.
Here’s a small example that uses this approach:

How to use JSF 2.2 with JBoss 7.1

As the new JSF 2.2 is nearly finished, we all want to play with the new features of it.

Markus Eisele has shown in his blog post Testdriving Mojarra 2.2.0-m08 how to do this with Glassfish 3. He’s German too, I begin to wonder if only we guys are that curious or no one else is using JSF any more 😉

Unfortunately with JBoss 7 we face the same problem he had: We can not just add the new libraries to our WAR archive as they will clash with the JSF 2.1 version of Mojarra (the reference implementation of JSF) already provided by JBoss 7.
So basically we have to disable this old version and activate the new version directly in the application server.

I will show you how to do it with JBoss 7.1.1 and the M08 release of Mojarra 2.2, but it should work for other versions the very same way:

JSF is divided into two parts: The implementation and the API.

We firstly exchange the former one by starting to download jsf-impl-2.2.0-m08.jar, which is the JAR archive containing the implementation.
After downloading, copy this archive to the folder of the old JSF implementation of your JBoss installation, which will be %JBOSS_HOME%/modules/com/sun/jsf-impl/main in that case.
In the same directory you will find a file called module.xml. Edit it and change the contents of the resources tag like this:

This is important as it tells JBoss which of the provided JAR archives (now there are two of them) to use. If you want to know more about this: Take a look at JBoss Modules, a module class loading approach JBoss 7 is using.
After that you have finished with exchanging the implementation and basically you have to do the same for the API part:

Firstly download the jsf-api-2.2.0-m08.jar archive and copy it to %JBOSS_HOME%/modules/javax/faces/api/main. Secondly edit the module.xml in the same directory by exchanging the resources tag:

Basically you should be finished now, but there is a bug in the milestone 8 of the API that it has a dependency to the implementation. For that reason you have to declare it by adding the following contents to the dependencies tag of the same module.xml file:

After that you can restart your modified JBoss instance. As JSF is lazily loaded you have to deploy a WAR referencing JSF to check whether our changes work. If so, you should see a log message like this:

[javax.enterprise.resource.webcontainer.jsf.config] (MSC service thread 1-2) Mojarra 2.2.0-m08

Finally, if you want to use the new features in application, you have to add the following dependency to your pom.xml:

And now have fun using JSF 2.2!