Posts in the “sencha” category

How to convert a Sencha ExtJS textfield to uppercase on the textfield blur event

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:

Sencha ExtJS Store “findRecord” query examples

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

Some Sencha form JSON encode and POST examples

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:

Sencha ExtJS - How to properly use the Store load method

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.

A Sencha Touch 2 List view with static data

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.

How to build a Sencha ExtJS application

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

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.

How to loop over each element in a Sencha Touch or ExtJS Store

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:

A collection of Sencha ExtJS and Touch 'Store' examples

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: