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:
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:
No configuration needed. Next, let’s add our ExtJs ComboBox and configure it:
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
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.
@Justin Noel,
Try setting triggerAction=”all” in the ext combobox config.
@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.
@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.
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?
@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.