Posts in the “sencha” category

I’ve started to write a mobile app using Sencha Touch for the client, and the Play Framework and Scala on the server side (to create a RESTful API). At some point I may make all of this code open source, but for today I’m just going to share some pictures of the Sencha Touch client.

Notes list

First, here’s the Notes screen. A note can be anything with a title, and optional body:

There are probably better ways to do this, but here’s a JavaScript function I wrote for a Sencha ExtJS application that extracts the text from an anchor tag (hyperlink):

Sencha ExtJS FAQ: How do I enable the use of the [Enter] key in the textfields of a form?

To let users hit the [Enter] key to submit a Sencha ExtJS form, I followed the example from the excellent book, Mastering ExtJS. First, I add this code to the this.control block of my form controller:

This brief Sencha tutorial shows how to convert the text in a Sencha ExtJS textfield to uppercase on the textfield blur event. I use this technique on the symbol field in a form where I let users enter stock symbols, such as “AAPL”, “GOOG”, etc.

First, the symbol field in my StockForm.js view component is defined like this:

Here are a few short examples of how to find an object in a Sencha Store (ExtJS or Sencha Touch).

As a first example, imagine that you have a Store of users, and want to find a user with the first name of “Alvin”. Assuming that your user model has a field named firstName, your query would look like this:

var user = usersStore.findRecord('firstName', 'Alvin');

After this query you can use the user object just as though you had created it by hand. (The object returned is a Model instance.)

It’s hard to find good Sencha JSON encoding and form POST examples, so here’s a quick collection of JSON examples I found while working yesterday. I know that these examples work with Sencha ExtJS; they may also work with Sencha Touch.

JSON encode a JavaScript object

First, the following example comes from this page, and shows how to convert a JavaScript object to JSON in an AJAX request:

Today I’m just sharing some Sencha ExtJS code that shows how to use a date field in several Sencha ExtJS components.

First, here’s a Sencha model class where I define a date field:

Here are my abbreviated notes on what’s required to add a new “Transactions” panel to my current Sencha ExtJS application:

I’ve been working with Sencha forms a little bit lately, especially Sencha ExtJS 4 forms and the form panel (Ext.form.Panel), and I’ve found these background/theory notes about forms to be helpful:

Sencha Touch seems to have some problems with its textareafield, especially with sizing and resizing the height in a form. The best solutions I’ve found so far are:

It’s often hard to find good Sencha ExtJS examples, but I ran across this one last night. It shows how to use a date column in a Sencha grid. I’ve highlighted the date column information in the source code below:

I can tell you from my own recent experience that if you don’t use the Sencha ExtJS Store load method properly, nothing will happen. After torturing myself twice by mishandling the load method, I thought maybe it would help if I wrote a quick blog post about how to properly use the load method.

Here's a quick Sencha Touch 2 Carousel example:

Here's an example of a Sencha Touch 2 List view that's populated with static data:

Ext.create('Ext.List', {
    store: {
        fields: ['name'],
        data: [
            {name: 'Notes'},
            {name: 'To-Do List'},
            {name: 'Contacts'},
        ]
    },

    itemTpl: '{name}'
});

Something like this could be used for a list of data items, or menu items.

This example comes from this link.

Source code for a Sencha Touch 2 native dialog:

Ext.device.Notification.show({
    title: 'One Button',
    message: 'This is a simple notification with one button.'
});

This example comes from this URL.

This is like an Ext.Msg dialog, but native instead. See http://docs.sencha.com/touch/2.2.1/#!/api/Ext.Msg for more information.

Here are some Sencha ExtJS Model examples, from the official Sencha docs.

Define a User:

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:

Sencha ExtJS Ext.Msg.show examples

Here’s a simple Sencha Ext.Msg.show example:

Ext.Msg.show({
    title: 'Dude',
    msg: 'Dude, you need to select at least one link.',
    buttons: Ext.Msg.OK,
    icon: Ext.Msg.WARNING
});

I’ll add more Ext.Msg.show examples here over time.

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:

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: