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:

Add a delete button in each row of an ExtJS data grid

For usability reasons it is usually a good idea to add a delete button to each row of a data grid. If the user clicks on such a button, the whole row that contained the button will be deleted.

The data grid of ExtJS does not contain such a feature by default, but it could be implemented by adding a special column to the column model. Using this extension, it could be easily done like this:

Note that the itemDeleter instance must be added to the ColumnModel and set as selModel to work properly.