02 April 2011 ~ 6 Comments

ExtDesigner tutorial – the basics: ComboBox

The following post describes the basic usage of the ExtJs ComboBox. I usually use Zend Framework on the backend for rapid development of rich internet applications. So have I done in this post, if you don’t use Zend Framework you can have a look at an example without Zend Framework here: ExtJs ComboBox.

Setup the datasource for the ExtJs ComboBox

In the following example I will use data from a mysql table containing states in the US. The data will be transported from a mysql table, by Zend Framework as json to the ExtJs ComboBox. If you want to copy my example you can use the following these sql statements for creating the table.

Setting up Zend Framwork

Next we need to setup Zend Framework, if you don’t have Zend Framework or if you don’t know how to setup Zend Framework. Read my post: Installing Zend Framework from command line.

First, let’s create our project, configure the database adapter, create a model for tblStates and add a State controller that will give us our json data:

zf.sh create project ext-designer-zend-framework-combobox-example
zf.sh configure db-adapter "adapter=PDO_Mysql&username=yourusername&password=yourpassword&dbname=yourdbname"
zf.sh create db-table State tblState
zf.sh create controller State

JSON for our ExtJs ComboBox

We now need to make our State controller return json data, let’s have a look at the State controller (located in /application/controllers/StateController.php):

class StateController extends Zend_Controller_Action
{
    public function init()
    {
        /* Initialize action controller here */
    }

    public function indexAction()
    {
        // action body
    }
}

Pretty empty. We need to do some modifications to get the json data we want for our Ext JsonStore:

class StateController extends Zend_Controller_Action
{

    public function init()
    {
        /* Initialize action controller here */
        $this->_helper->contextSwitch()->setAutoJsonSerialization(false);
    }

    public function indexAction()
    {
        // action body
        try {
	        $stateMdl = new Application_Model_DbTable_State();
                $states = $stateMdl->fetchAll()->toArray();
	        $this->_helper->json($states);
        } catch(Exception $e)   {
        	die($e->getMessage());
        }
    }
}

This post is not about Zend Framwork, so I won’t dig into the details here. If you have any questions – ask in the comment field below, or send me a tweet. Anyway, we now have all we need to create our ExtJs ComboBox!

Creating an ExtJs ComboBox in Ext Designer

Let’s start by creating the Ext JsonStore that our ComboBox is supposed to get its data from:
Create the json store for our ExtJs ComboBox

What I have done is:

  • Add 3 fields to the ExtJs JsonStore, according to our table structure (tblStates).
  • Named the 3 fields in the JsonStore: id, name, abbrev
  • Added an url for the JsonStore to fetch data from. The url is to the Zend Framework State controllers index view (http://aboutfrontend.com/examples/ext-designer-zend-framework-combobox/state/)
  • Set the autoLoad property to true, so that the JsonStore i loaded with data automatically.
  • And just for good practive I have set the storeId property and jsClass property.

You can test that it works by right clicking the store in Ext Designer and click “Load data”.

Next, let’s add a FormPanel to add our ComboBox to:

ExtJs ComboBox using ExtDesigner

No configuration needed. Next, let’s add our ExtJs ComboBox and configure it:
Setting up an ExtJs ComboBox in ExtDesigner

What I have done here, as you can see in the above screenshot is to first attach the JsonStore to the ExtJs ComboBox. Then I have set the following parameters in the ExtJs ComboBox:

  • name (just good practice)
  • displayField: name (same as you will find in the state store)
  • idField: id (you will also find this in the state store)
  • mode: local (since everything is loaded in the store)

That’s it! Export your project to a proper location, and run!

You can have a look at my working example here: http://aboutfrontend.com/examples/ext-designer-zend-framework-combobox/js/extdesigner-generated/xds_index.html

You can also download my Ext Designer project file here: http://aboutfrontend.com/examples/ext-designer-zend-framework-combobox/src/ext-designer-basic-combobox.xds

6 Responses to “ExtDesigner tutorial – the basics: ComboBox”

  1. Justin Noel 5 May 2011 at 15:08 Permalink

    Why does the selection list fail to show other states after a state is selected the first time?

    Example:
    1. Load the page for the first time.
    2. Click the drop down indicator.
    3. Select Texas.
    4. Click the drop down indicator again. Note that only Texas displays.

    In order to choose a different state, you have to erase Texas and then click the drop dow selector again.

  2. Nils-Fredrik 5 May 2011 at 15:15 Permalink

    @Justin Noel,
    Try setting triggerAction=”all” in the ext combobox config.

  3. Justin Noel 5 May 2011 at 16:20 Permalink

    @Nil-Fredrik : Thanks! That did the trick.

    BTW, I am just starting with ExtJS. Unfortunately, there is very little ExtJS4 info out there. You’ve got the best tutorials I’ve come across for even the old version of Ext. Thanks for sharing your knowledge.

  4. Nils-Fredrik 5 May 2011 at 16:43 Permalink

    @Justin Noel,
    Thanks for nice words! You should follow me on twitter.com/nilsfredrik and twitter.com/aboutfrontend

    Btw, I plan to upgrade all tutorials to ExtJs 4.

  5. Suresh.S 20 October 2011 at 17:04 Permalink

    Nils,

    Thanks for the tutorial. I have a couple of questions about Sencha.

    1. I see that you used Zend framework to do the backend coding. Is it possible to do the backend coding using any of the Sencha tools or should we do that with our own framework?

    2. I wanted a tabbed sheet and I got three tabs in it. How can we add more tabs?

  6. Sergio 19 March 2012 at 17:15 Permalink

    @Nil-Fredrik : Thank you very very much! This example has been the only one that I’ve seen working combining the Designer and JSON for combo boxes.

    [PD] I’ll add: The root property is necessary for the store but not for the combo box…. I mean, it’s never used.


Leave a Reply