Posts in the “sencha” category

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.

Sencha ExtJS Ext.Ajax.request JSON POST and GET form panel examples

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:

A Sencha ExtJS checkbox listener and textfield example (Ext.cmp)

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:

Sencha ExtJS alert message dialog

To display an alert message dialog in Sencha Ext JS (ExtJS), use code like the following:

Ext.Msg.alert('Dialog Title', 'Your body text goes here ...');

This displays a simple JavaScript-like message dialog.

How to add a Sencha ExtJS splash (loading) screen

I’ve written a couple of small Sencha ExtJS applications lately, and I can confirm that the following technique works to display a splash screen while your application is loading.

(This isn’t a tutorial per se. I assume that you know how to use ExtJS, and just want to see how to implement a splash screen (loading page) as the user waits for the application to load.)

In short, you’ll want code like this in your Ext.application function: