Using ExtJS with WebAPI CheckBoxList Setting Defaults Correctly

Posted by Peter Kellner on July 23, 2013 · 5 mins read

Often, we found ourselves creating lists of checkboxes with Sencha’s ExtJS and we want to call Microsoft’s WebAPI in Visual Studio.  ExtJS by default wants to send form values on and off and WebAPI expects booleans which are true and false.  You can override this in the ExtJS 4.2.1 checkbox control by setting inputValue: ‘true’ and uncheckedValue: ‘false’ on every checkbox, or, you can take advantage of the “defaults” parameter in the checkboxgroup and then you do not have to do it on each checkbox.  Here is what are checkbox group looks like rendered.

image

The code to generate it is below (notice the default: attribute in the JavaScript)

{
xtype: 'checkboxgroup',
border: 1,
defaults: {
inputValue: 'true',
uncheckedValue: 'false'
},
layout: {
type: 'fit'
},
fieldLabel: 'Include Sponsors in these mailings',
vertical: true,
items: [
{
xtype: 'checkboxfield',
name: 'sponsorPlatinum',
boxLabel: 'platinum'
},
{
xtype: 'checkboxfield',
name: 'sponsorGold',
boxLabel: 'gold'
},
{
xtype: 'checkboxfield',
name: 'sponsorSilver',
boxLabel: 'silver'
},
{
xtype: 'checkboxfield',
name: 'sponsorBronze',
boxLabel: 'bronze'
},
{
xtype: 'checkboxfield',
name: 'sponsorCommunity',
boxLabel: 'community'
},
{
xtype: 'checkboxfield',
name: 'currentSponsor',
boxLabel: 'Sponsor: Current Sponsor This Year'
},
{
xtype: 'checkboxfield',
name: 'pastSponsor',
boxLabel: 'Sponsor: Past Sponsor'
},
{
xtype: 'checkboxfield',
name: 'generalCCMailings',
boxLabel: 'Sponsor: GeneralCCMailings'
},
{
xtype: 'checkboxfield',
name: 'sponsorCCMailings',
boxLabel: 'Sponsor: SponsorCCMailings'
}
]
}

And, on the WebAPI side, when doing a post with a form including this, you will want to have a data structure catching the data something like this:

[HttpPost]
[ActionName("EmailGenerate")]
[Authorize(Roles = "admin")]
public HttpResponseMessage PostEmailGenerate(EmailSendDetail emailSendDetail)
{

and the structure of EmailSendDetail is this:

public class EmailSendDetail
{
public string EmailFrom { get; set; }
public string PreviewEmailSend { get; set; }
public string EmailUrl { get; set; }
public string Subject { get; set; }
public string SubjectHtml { get; set; }
public string MailBatchLabel { get; set; }
public string SqlStatement { get; set; }
public string EmailHtml { get; set; }

public bool SponsorPlatinum { get; set; }
public bool SponsorGold { get; set; }
public bool SponsorSilver { get; set; }
public bool SponsorBronze { get; set; }
public bool CurrentSponsor { get; set; }
public bool PastSponsor { get; set; }
public bool GeneralCCMailings { get; set; }
public bool SponsorCCMailings { get; set; }

public string Page { get; set; }
public string Start { get; set; }
public string Limit { get; set; }


}

Hope this helps!