Short source code examples

I normally don’t like to throw large blocks of code out here, but the following Sencha Touch source code shows how to use the refs config parameter.

refs documentation

Before getting to the source code, here are the refs comments you’ll find in the code:

"In the refs configuration, you can set up references to view instances. This allows you to retrieve and manipulate components on the page inside of your controller’s actions."

and:

The following Sencha Touch code shows how to define a Store, where the store references a model, has a proxy, and also uses some configuration parameters to help control the REST/GET URL/URI the store generates:

The following controller code shows how I dynamically render radio buttons in a Sencha Touch controller. Just scroll down and look for the recordedStreamsStore.each block of code:

The following code shows my current Sencha Touch utilities. Much of it comes from a Packt book I can’t remember the name of, but several of the JavaScript functions are my own:

This code shows how to add a title bar (titlebar) to a Sencha Touch panel:

The following code shows how I created a tab panel in a Sencha Touch application, with a few important parts highlighted:

The Sencha website has a few good examples of how to use an ActionSheet, including this basic one:

The following code shows how I set the margins on a Sencha Touch component (an item in a list of items):

{
    xtype: 'container',
    style: 'text-align: left; margin-left: 26px; margin-top:14px;',
    html: '<div>Funny - 20<br/>Voted Yes, But Not Worth It - 2</div>',
    id: 'checkboxView',
}

As shown, you do this by setting the style on the component.

It seems like the following code should have also worked, but it didn’t:

Nothing major to see here, but some Linux xscreensaver commands I don’t want to forget:

# download an xscreensaver package
$ sudo apt-get install xscreensaver-data-extra

# restart xscreensaver
$ pkill xscreensaver && xscreensaver -nosplash &

This example shows how to URL-encode HTTP query parameters using Ext.urlEncode in a Sencha ExtJS (or Touch) application:

Here is a small collection of Sencha ExtJS ‘Store’ objects from a recent project. I suspect they will also work with Sencha Touch, though I haven’t tried them there yet. (They may need a few small modifications, dunno.) I share them here hoping they will help anyone who needs to see some =Store= examples.

First, this Store object is named Users:

As a quick example of how to loop over each element in a Sencha Touch or ExtJS store, I use the following code to dynamically create a series of checkboxes.

In short, in a Sencha controller:

Ext.define('Focus.controller.Projects', {
    extend: 'Ext.app.Controller',

I declare a Store:

stores: [
    'Tasks'
],

then later create a reference to the Store:

This source code shows how to use the Sencha Touch Ext.XTemplate:

There are times when working with Sencha Touch where I try to make things too hard some times, but in this case, I’m pretty sure this is the simplest possible Sencha Panel with embedded HTML:

var myPanel = Ext.create('Ext.Panel', {
    html: 'Hello, world'
});

I don’t think it can get any easier than that.

The following Python example shows how to split a string into a list, get the second element from the list (which happens to be a long), and convert that string to a long value:

line = 'Foo bar baz|1234567890'
ts = line.split('|', 1)[1]
t = long(ts)

I needed to do this for my Radio Pi project, and this code worked out well.

Here’s an example of how to print the formatted time in Python:

import time
print time.strftime("%a, %b %d %I:%M %p")

That code results in the following output:

Thu, May 29 11:26 AM

To see what’s running on a Mac OS X port, use this lsof command:

$ sudo lsof -i :5150

This command shows what’s running on port 5150. Just change that to whatever port you want to see.

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: