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 Ext.ComponentQuery.query('viewport')[0].removeAll(); 2. Recreate viewport, here the viewport's class name is _myApp....

August 22, 2014 · 1 min · admin

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....

December 27, 2013 · 1 min · admin

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....

December 21, 2013 · 1 min · admin

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....

June 10, 2013 · 1 min · admin

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:...

June 13, 2009 · 1 min · admin