sencha

sencha

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:

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 simple Sencha Touch Ext.Panel with HTML

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.

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:

Disabling extra Sencha ExtJS and Touch REST URL parameters

When you first work with a Sencha ExtJS or Touch Store and Proxy, you’ll quickly find that when you create GET and POST REST services, by default the store/proxy adds extra parameters to the end of the URLs you’re accessing.

How to use the Sencha ExtJS or Touch DelayedTask (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() {
        tabPanel.setActiveTab(0);
    });
    task.delay(250);
}

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.