Add a Data Driven Combobox to ExtJS Form

I’ve been enhancing the session editor for AngularU  (Written in ExtJS 4.2)  and I’ve recently had to add a couple data driven comboboxes.  One to specify which track the session is in and one to assign which track the session is in.  Having done it a couple times in a row, my muscle memory is pretty good so I thought I’d do it again but this time on my blog.

This is what the result looks like:

image

The basics of the relationship between the table data is that we have a Session Table and a Track Table as follows:

image

For the sake of the controls, we actually have two rest feeds.  One Track and one Session.  You can see them both here:

http://angularu.com/rest/track

http://angularu.com/rest/session

The track is a primary keyof Id and a track name of Name.  Session has SessionTrackId as the foreign key.

So, the steps are as follows.  First we add a new model and store for the track table (we had the session model and store already).  Then we update the form that has that data with the combobox.  Below are the details of those thre places.

That’s it! Hope this helps

About Peter Kellner

Peter is a software professional specializing in mobile and web technologies. He has also been a Microsoft MVP since 2007. In addition, he's a multi-course video author at Pluralsight. To read more about Peter Kellner and his experience click here. For information about how Peter Kellner might be able to help you with your project click here.

Follow me:


Trackbacks

  1. […] Add a Data Driven Combobox to ExtJS Form (Peter Kellner) […]

Follow

Get every new post delivered to your Inbox

Join other followers: