Posts in the “sencha” category

Here’s an example of a Model and a Store from the Sencha ExtJS Store docs:

The following code shows how to dynamically create a Sencha ExtJS form textfield, i.e., a Ext.form.field.Text field. Maybe one of the best things about this example is that it shows how to get input focus on a textfield:

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.

As a quick note today, here are my current Sencha utilities (most of them being string utilities):

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:

This code shows how to dynamically add a hidden field to a form with Sencha ExtJS 4:

This Sencha Store Ajax JSON proxy reader/writer example comes from the link shown. It shows how to use:

A Sencha ExtJS checkboxgroup and checkbox listener example:

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:

Here’s a Sencha ExtJS form panel (Ext.form.Panel) example, using an hbox layout:

A good Sencha ExtJS form example.

Without any significant introduction, here are some more Sencha ExtJS code examples. I’m just trying to make my example code easier for me to find; if it helps you, that’s cool, too.

The following code shows:

This Sencha ExtJS code snippet shows how to use the Ext.Element down method to get the value from a textfield:

Sencha ExtJS - How to dynamically create a form textfield (Ext.form.field.Text)

Without much introduction, here’s a large block of Sencha ExtJS controller code. The code needs to be cleaned up, but at the moment it shows:

onStockFormKeyPress: function(textfield, event, options) {
    if(event.getKey() == event.ENTER) {
        Ext.Msg.alert('Keys','You pressed the Enter key');
    }
}

This function is called when the keypress event is handled in the init function of my controller class:

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.

I learned today that you break out of a Sencha ExtJS Store each loop by returning false from your function. This code shows the technique:

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

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:

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.