Getting Started

The ComboBox is always a very usefull form field type, and populating it dynamically makes it even more usefull. We will just be creating a basic ComboBox thats populated from a JSON data source which pulls data from our database.

Setup The Reader

As with any data source, we will need to setup the reader so our data store knows how to read the JSON data were retreiving. We can pass an empty config object to JsonReader since were just populating a simple ComboBox and the second argument is a very simple record definition.

<br /> var rd_random_employee_data = new Ext.data.JsonReader({}, [ 'id', 'name']);<br />

Setup The Data Store

The data source uses a standard store, which by default reads JSON formatted data.

<br /> var ds_random_employee_data_active = new Ext.data.Store({<br /> proxy: new Ext.data.HttpProxy({<br /> // this json data contains only employees where active is ‘true’<br /> url: ‘forms-combobox-data.php?active=true’<br /> }),<br /> reader: rd_random_employee_data,<br /> remoteSort: false<br /> });<br />

The ComboBox

Now we just specify the store in our ComboBox instantiation code and set the displayField and hiddenName (which should be different from the name, if specified).

<br /> var random_employees_active = new Ext.form.ComboBox({<br /> fieldLabel: ‘Active Random Employee Data’,<br /> store: ds_random_employee_data_active,<br /> valueField: ‘id’,<br /> displayField: ‘name’,<br /> hiddenName: ‘active_id’,<br /> mode: ‘remote’,<br /> minChars : 0<br /> });<br />

Setting the minChars to zero and the mode to ‘remote’ will make sure that the data is fetched each time the combo is clicked or focused.

Getting Started

DomHelper is a very powerful tool, so were going to start with some simple things, and you can take it from there. We are going to be using the insertAfter and insertBefore methods of DomHelper in the following examples.

Spacing form Elements

For this example we are adding a spacer div that will bump the next form element down enough to make it line up with a form element in another column (see image). The first argument to insertAfter is the dom element, allot of the time you can use something simple to retrieve the dom element, such as Ext.get(‘bla’). In our case, were going to use DomQuery to find our dom element since were modifying dynamic forms.

Ext.DomHelper.insertAfter(<br /> Ext.DomQuery.selectNode(‘input[name="last"]‘),<br /> {<br /> tag: ‘div’,<br /> ‘style’: ‘width:180px;height:48px;’<br /> },<br /> false<br /> );

Adding More Radio Buttons

In this one we will add a second radio button to allow the form to have two options on the same line (see image). First the actual radio button is added, then its label is added.

Ext.DomHelper.insertAfter(<br /> Ext.DomQuery.selectNode(‘label:contains(Male)’),<br /> {<br /> tag: ‘input’,<br /> id: ‘gender2′,<br /> type: ‘radio’,<br /> name: ‘gender’,<br /> ‘class’: ‘x-form-radio x-form-field’<br /> },<br /> false<br /> );<br /> Ext.DomHelper.insertAfter(<br /> Ext.get(‘gender2′),<br /> {<br /> tag: ‘label’,<br /> ‘class’: ‘x-form-cb-label’,<br /> ‘for’: ‘gender2′,<br /> html: ‘Female’<br /> },<br /> false<br /> );

I would suggest downloading the code used for this
example so you have something to work with. You can also find a

working example.

We will go through the full circle of using forms, from populating the form with data from the server, to submitting that data back to the server. The backend I use is PHP and MySQL, however this tutorial is not specific to PHP and MySQL and only requires that you have a way to read and output JSON data on your server.

Let’s Get Started

We first need to set our form’s url, which is a php script that will take POST data and write it to our database.

<br /> var form_employee = new Ext.form.Form({<br /> …<br /> url:’forms-submit-process.php’,<br /> …<br /> });<br />

Our data consist of five fields, id, name, title, hire_date and active, which will be retreived and placed into a data store.

The following code sets up the data store, at this point no data has been retrieved. Our proxy references a php script that retrieves row id 14 from our database and formats it as a JSON string.

<br /> employee_data = new Ext.data.Store({<br /> proxy: new Ext.data.HttpProxy({url: ‘forms-submit-getdata.php?id=14′}),<br /> reader: new Ext.data.JsonReader({},<br /> [ 'id', 'name', 'title', 'hire_date', 'active']<br /> ),<br /> remoteSort: false<br /> });<br />

The next thing to do is setup our event listener to watch for when the data loads, this ensures that we don’t populate the form before the data has been loaded.

<br /> employee_data.on(‘load’, function() {</p> <p> // data loaded, do something with it here… </p> <p>});</p> <p>

When that data is loaded we can take it and populate the form fields using setValue. Here we are using getAt(0) to retrieve the first row of data (row zero) from our data store.

NOTE: the form and form fields used here are defined and explained in the getting started tutorial.

<br /> employee_name.setValue(employee_data.getAt(0).data.name);<br /> employee_title.setValue(employee_data.getAt(0).data.title);<br /> employee_hire_date.setValue(employee_data.getAt(0).data.hire_date);<br /> employee_active.setValue(<br /> Ext.util.Format.boolean(employee_data.getAt(0).data.active)<br /> );<br />

We will also want to create our submit button and render the form, remembering to set extra parameters to pass along with our POST data from the form fields. You will find it useful to pass a row identifier (id) so the php script knows which row to update in the database, along with an action just for good measure.

I’m also using isValid to make sure the form conforms to each field’s requirements before submitting.

<br /> form_employee.addButton(‘Save’, function(){<br /> if (form_employee.isValid()) {<br /> form_employee.submit({<br /> params:{<br /> action:’submit’,<br /> id:employee_data.getAt(0).data.id<br /> },<br /> waitMsg:’Saving…’<br /> });<br /> }else{<br /> Ext.MessageBox.alert(‘Errors’, ‘Please fix the errors noted.’);<br /> }<br /> }, form_employee);</p> <p> form_employee.render(‘employee-form’);<br />

Loading Our Data

Now we load the data.

<br /> employee_data.load();<br />

It really can be just that easy to create a working Ext form with an amazing level of usability right out of the box. We have some server side scripts that retrieve and format data from our database, and write that data back to our database. These server side scripts can be as simple as a few lines.

What’s Next?

As always, the API documentation and examples are a great way to learn how to tweak this form to fit your needs.

• API Documentation
• Community Forums

Grid Data

A paging grid must have a server side element to perform the breaking up of data into pages.

For this example we are using php as the server side language, and a MySQL database with some randomly generated data. The PHP script below is used to retrieve our data and break it up into pages using the limit and start variables that are passed from the paging toolbar.

<br /> $link = mysql_pconnect(“test-db.vinylfox.com”, “test”, “testuser”)<br /> or die(“Could not connect”);<br /> mysql_select_db(“test”) or die(“Could not select database”);</p> <p>$sql_count = “SELECT id, name, title, hire_date, active FROM random_employee_data”;<br /> $sql = $sql_count . ” LIMIT “.$_GET['start'].”, “.$_GET['limit'];</p> <p>$rs_count = mysql_query($sql_count);</p> <p>$rows = mysql_num_rows($rs_count);</p> <p>$rs = mysql_query($sql);</p> <p>while($obj = mysql_fetch_object($rs))<br /> {<br /> $arr[] = $obj;<br /> }</p> <p>Echo $_GET['callback'].’({“total”:”‘.$rows.’”,”results”:’.json_encode($arr).’})’; </p> <p>

Were not going to dig much into the server side code, since it can vary quite a bit for each developers needs and environment.

Whats Needed to Make a Paged Grid?

NOTE: The example uses ScriptTagProxy only because the data resides on a different server from the example code. In most cases you will be pulling data from the same server the code resides on and using HttpProxy.

The only difference in the data Store is the addition of a totalProperty declaration. In our example, we use ‘total’ which is coming from our server side script with the value for the total number of rows we had before breaking them up into pages.

<br /> var ds = new Ext.data.Store({</p> <p> proxy: new Ext.data.ScriptTagProxy({<br /> url: ‘http://www.vinylfox.com/yui-ext/examples/grid-paging/grid-paging-data.php’<br /> }),</p> <p> reader: new Ext.data.JsonReader({<br /> root: ‘results’,<br /> totalProperty: ‘total’,<br /> id: ‘id’<br /> }, [<br /> {name: 'employee_name', mapping: 'name'},<br /> {name: 'job_title', mapping: 'title'},<br /> {name: 'hire_date', mapping: 'hire_date', type: 'date', dateFormat: 'm-d-Y'},<br /> {name: 'is_active', mapping: 'active'}<br /> ])</p> <p> });<br />

The Paging Bar

Adding a paging toolbar to the bottom of the grid pane, and your almost done.

<br /> var gridFoot = grid.getView().getFooterPanel(true);</p> <p> var paging = new Ext.PagingToolbar(gridFoot, ds, {<br /> pageSize: 25,<br /> displayInfo: true,<br /> displayMsg: ‘Displaying results {0} – {1} of {2}’,<br /> emptyMsg: “No results to display”<br /> });<br />

The last step is to pass the initial start and limit parameters to your data load.

<br /> ds.load({params:{start:0, limit:25}});<br />

A large portion of the time spent setting up paging is going to be your server side environment that handles passing data back and forth with the grid, once you have that in place the task of adding paging to a grid can be very simple.

The Final Product

grid-paging.js

<br /> Ext.onReady(function(){</p> <p> var ds = new Ext.data.Store({<br /> // HttpProxy should be used here<br /> proxy: new Ext.data.ScriptTagProxy({<br /> url: ‘http://www.vinylfox.com/yui-ext/examples/grid-paging/grid-paging-data.php’<br /> }),</p> <p> reader: new Ext.data.JsonReader({<br /> root: ‘results’,<br /> totalProperty: ‘total’,<br /> id: ‘id’<br /> }, [<br /> {name: 'employee_name', mapping: 'name'},<br /> {name: 'job_title', mapping: 'title'},<br /> {name: 'hire_date', mapping: 'hire_date', type: 'date', dateFormat: 'm-d-Y'},<br /> {name: 'is_active', mapping: 'active'}<br /> ])</p> <p> });</p> <p> var cm = new Ext.grid.ColumnModel([{<br /> id: 'name',<br /> header: "Name",<br /> dataIndex: 'employee_name',<br /> width: 100<br /> },{<br /> header: "Title",<br /> dataIndex: 'job_title',<br /> width: 170<br /> },{<br /> header: "Hire Date",<br /> dataIndex: 'hire_date',<br /> width: 70,<br /> renderer: Ext.util.Format.dateRenderer('n/j/Y')<br /> },{<br /> header: "Active",<br /> dataIndex: 'is_active',<br /> width: 50<br /> }]);</p> <p> var grid = new Ext.grid.Grid(‘grid-paging’, {<br /> ds: ds,<br /> cm: cm,<br /> autoExpandColumn: ‘name’<br /> });</p> <p> grid.render();</p> <p> var gridFoot = grid.getView().getFooterPanel(true);</p> <p> var paging = new Ext.PagingToolbar(gridFoot, ds, {<br /> pageSize: 25,<br /> displayInfo: true,<br /> displayMsg: ‘Displaying results {0} – {1} of {2}’,<br /> emptyMsg: “No results to display”<br /> });</p> <p> ds.load({params:{start:0, limit:25}});</p> <p>});<br />

grid-paging-working.php

<br /> <html><br /> <head></p> <link rel="stylesheet" type="text/css" href="/lib/resources/css/ext-all.css" /> <script type="text/javascript" src="/lib/yui-utilities.js"></script><br /> <script type="text/javascript" src="/lib/ext-yui-adapter.js"></script><br /> <script type="text/javascript" src="/lib/ext-all-debug.js"></script></p> <p> <script type="text/javascript" src="grid-paging.js"></script></p> <p> </head><br /> <body></p> <div id="grid-paging" style="border:1px solid #99bbe8;overflow: hidden; width: 665px; height: 300px;"></div> <p> </body><br /> </html><br />

Step 1, HTML for Your Template

The first step is pretty straight forward, its the HTML that will be used to format your data. Some keywords in curly brackets will be the placeholders for your data {id}, {url} and {text}. You could simplify this by using {0}, {1}, {2}, but naming your placeholders makes the code more readable.

Now we load the html template we just created into a template object (line 5), then compile the template for speed (line 6). Compiling the template is not required, but generally improves the speed.

<br /> var html = ‘<a id="{id}" href="{url}" class="nav">{text}</a><br />‘;</p> <p> var tpl = new Ext.Template(html);<br /> tpl.compile();<br />

Step 2, Adding Data to Your Template

In this next step we are going to append two rows to our data using the append method, as you can see the elements ‘id’, ‘url’ and ‘text’ correspond with placeholders in our template above.

<br /> tpl.append(‘blog-roll’, {<br /> id: ‘link1′,<br /> url: ‘http://www.jackslocum.com/’,<br /> text: “Jack’s Site”<br /> });<br /> tpl.append(‘blog-roll’, {<br /> id: ‘link2′,<br /> url: ‘http://www.extjs.com/’,<br /> text: “Jack’s New Site”<br /> });<br />

Thats the basics of using the template, pretty simple, eh?

The Final Product

template-getting-started.js

<br /> Ext.onReady(function(){</p> <p> var html = ‘<a id="{id}" href="{url}" class="nav">{text}</a><br />‘;</p> <p> var tpl = new Ext.Template(html);<br /> tpl.compile();</p> <p> tpl.append(‘blog-roll’, {<br /> id: ‘link1′,<br /> url: ‘http://www.jackslocum.com/’,<br /> text: “Jack’s Site”<br /> });<br /> tpl.append(‘blog-roll’, {<br /> id: ‘link2′,<br /> url: ‘http://www.extjs.com/’,<br /> text: “Jack’s New Site”<br /> });</p> <p>});<br />

template-getting-started-working.php

<br /> <html><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></p> <link rel="stylesheet" href="/lib/resources/css/ext-all.css" /> <script src="/lib/yui-utilities.js"></script><br /> <script src="/lib/ext-yui-adapter.js"></script><br /> <script src="/lib/ext-all.js"></script><br /> <script type="text/javascript" src="template-getting-started.js"></script><br /> </head><br /> <body></p> <div id="blog-roll" class="ygrid-mso"></div> <p> </body><br /> </html></p> <p>

Step 1, Data Definition

First we need to tell the grid what XML element defines each row of data, in this case its named ‘Item’ as you can see from the sample XML below.

Single Row of XML Sample Data

<br /> <Item><br /> <ASIN>0446613657</ASIN><br /> <DetailPageURL>http://www.amazon[*SNIP*]JVQEG2</DetailPageURL><br /> <ItemAttributes><br /> <Author>Sidney Sheldon</Author><br /> <Manufacturer>Warner Books</Manufacturer><br /> <ProductGroup>Book</ProductGroup><br /> <Title>Are You Afraid of the Dark?</Title><br /> </ItemAttributes><br /> </Item><br />

Set the record in your schema definition (line 8 of the sample code below) to ‘Item’ so it coresponds to a row in our XML data.

Then we need to define which collumn contains the unique identifier by setting the ‘id’ (line 9 of the sample code below). In our sample data this is the ‘ASIN’ collumn.

The last part of our data definition are the fields you want to display (line 11 of our sample code). This is just an array with the field names. Make sure these correspond with the element names in your XML data and place them in the order you want the collumns displayed in your grid, they dont need to be in the same order they are found in the XML file.

<br /> var dataStore = new Ext.data.Store({</p> <p> proxy: new Ext.data.HttpProxy({url: ‘sampledata-sheldon.xml’}),</p> <p> reader: new Ext.data.XmlReader({<br /> record: ‘Item’,<br /> id: ‘ASIN’<br /> }, [<br /> 'Author', 'Title', 'Manufacturer', 'ProductGroup'<br /> ])<br /> });<br />

Step 2, Collumn Model

The next step would be defining the Collumn Model, which simply means setting up some properties for the collumns that determine how they are displayed and treated. This is an array containing configuration parameters for each collumn given in the order of the collumns as defined in the data definitions “fields” array from the previous step.

Probably the most common configuration variables are going to be header and width, so you will want to make sure to declare atleast those two, however width is not required and can be taken care of using the autoWidth/Height functions later on.

Sample Collumn Model

<br /> var colModel = new Ext.grid.ColumnModel([<br /> {header: "Author", width: 120, dataIndex: 'Author'},<br /> {header: "Title", width: 180, dataIndex: 'Title'},<br /> {header: "Manufacturer", width: 115, dataIndex: 'Manufacturer'},<br /> {header: "Product Group", width: 100, dataIndex: 'ProductGroup'}<br /> ]);<br />

The last thing we do is to pass the Grid the data store and collumn model (lines 22-25), render the grid, then load in the data from our data store. Thats really all you need to get your grid up and working.

Render it!

<br /> var grid = new Ext.grid.Grid(‘mygrid’, {<br /> ds: dataStore,<br /> cm: colModel<br /> });<br /> grid.render();</p> <p> dataStore.load();<br />

The Final Product

grid-getting-started.js

<br /> Ext.onReady(function(){</p> <p> var dataStore = new Ext.data.Store({</p> <p> proxy: new Ext.data.HttpProxy({url: ‘sampledata-sheldon.xml’}),</p> <p> reader: new Ext.data.XmlReader({<br /> record: ‘Item’,<br /> id: ‘ASIN’<br /> }, [<br /> 'Author', 'Title', 'Manufacturer', 'ProductGroup'<br /> ])<br /> });</p> <p> var colModel = new Ext.grid.ColumnModel([<br /> {header: "Author", width: 120, dataIndex: 'Author'},<br /> {header: "Title", width: 180, dataIndex: 'Title'},<br /> {header: "Manufacturer", width: 115, dataIndex: 'Manufacturer'},<br /> {header: "Product Group", width: 100, dataIndex: 'ProductGroup'}<br /> ]);</p> <p> var grid = new Ext.grid.Grid(‘mygrid’, {<br /> ds: dataStore,<br /> cm: colModel<br /> });<br /> grid.render();</p> <p> dataStore.load();<br /> });<br />

grid-getting-started-working.php

<br /> <html><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></p> <link rel="stylesheet" href="/lib/resources/css/ext-all.css" /> <script src="/lib/yui-utilities.js"></script><br /> <script src="/lib/ext-yui-adapter.js"></script><br /> <script src="/lib/ext-all.js"></script><br /> <script type="text/javascript" src="grid-getting-started.js"></script><br /> </head><br /> <body></p> <div id="mygrid" class="ygrid-mso"></div> <p> </body><br /> </html><br />