Short source code examples

To build a Sencha ExtJS application, move to your project’s root directory, then run this command:

$ sencha app build

Assuming that the build works fine, you can test the production build in your browser at a URL like this:

I just tried a quick test of transparency/translucency on Mac OS X using Java, and in short, here is the source code I used to create a transparent/translucent Java JFrame on Mac OS X 10.9:

Here are a few examples of how to set the Font on Java Swing components, including JTextArea, JLabel, and JList:

// jtextarea
textArea.setFont(new Font("Monaco", Font.PLAIN, 20));

// jlabel
label.setFont(new Font("Helvetica Neue", Font.PLAIN, 14));

// jlist
list.setFont(new Font("Helvetica Neue", Font.PLAIN, 12));

A test application

You can use code like the following Scala code to easily test different fonts. Modify however you need to, but it displays a JFrame with a JTextArea, and you can change the font on it:

If you want the horizontal and/or vertical scrollbars to always show on a Java JScrollPane, configure them like this:


Other options are:



I just learned how to send STDOUT and STDERR to a file in a Java application (without using Unix shell redirect symbols). Just add these two lines of code to the main method in your Java (or Scala) program:

System.setOut(new PrintStream("/Users/al/Projects/Sarah2/std.out"));
System.setErr(new PrintStream("/Users/al/Projects/Sarah2/std.err"));

Then when you use:



Nothing major here, I just wanted to note the use of several scalacOptions in the following build.sbt example:

Here’s a quick example of how to use a Sencha ExtJS or Touch DelayedTask:

onMainViewportAfterRender: function(viewport, options) {
    var tabPanel = viewport.down('tabpanel');
    var task = new Ext.util.DelayedTask(function() {

As shown, the first thing you do is create a task by giving a DelayedTask a callback function. Then you tell the task how long it should delay before executing.

As a quick note today, here are my current Sencha utilities (most of them being string utilities):

I learned today that you break out of a Sencha ExtJS Store each loop by returning false from your function. This code shows the technique:

Sencha ExtJS - How to dynamically create a form textfield (Ext.form.field.Text)

Without much introduction, here’s a large block of Sencha ExtJS controller code. The code needs to be cleaned up, but at the moment it shows:

The following code shows how to dynamically create a Sencha ExtJS form textfield, i.e., a Ext.form.field.Text field. Maybe one of the best things about this example is that it shows how to get input focus on a textfield:

Without any significant introduction, here are some more Sencha ExtJS code examples. I’m just trying to make my example code easier for me to find; if it helps you, that’s cool, too.

The following code shows:

Here are two Sencha ExtJS Ext.Ajax.request JSON POST and GET examples. The first one shows how to add a Stock by getting all of the values in a Sencha form (Ext.form.Panel). Keys that I learned recently are:

  • formPanel.getForm() gets the form (Ext.form.Basic)
  • Ext.JSON.encode(formPanel.getValues()) JSON encodes all of the form values

Here’s the code:

onStockFormKeyPress: function(textfield, event, options) {
    if(event.getKey() == event.ENTER) {
        Ext.Msg.alert('Keys','You pressed the Enter key');

This function is called when the keypress event is handled in the init function of my controller class:

Sencha ExtJS examples

Here’s a simple Sencha example:{
    title: 'Dude',
    msg: 'Dude, you need to select at least one link.',
    buttons: Ext.Msg.OK,
    icon: Ext.Msg.WARNING

I’ll add more examples here over time.

This Sencha Store Ajax JSON proxy reader/writer example comes from the link shown. It shows how to use:

This code shows how to dynamically add a hidden field to a form with Sencha ExtJS 4:

A Sencha ExtJS checkboxgroup and checkbox listener example:

A Sencha ExtJS checkbox listener and textfield example. First, the checkbox and textfield definitions:

    fieldLabel: 'myCheckBox'
    xtype: 'checkbox',
    name: 'myCheckBox'
    fieldLabel: 'myTextField'
    xtype: 'textfield',
    name: 'myTextField',
    disabled: true

Next, how to add a listener to the checkbox, and enable or disable the textfield when the checkbox is clicked:

Here’s a Sencha ExtJS form panel (Ext.form.Panel) example, using an hbox layout: