Home » EXTjs » EXT DataBound CheckboxGroup

EXT DataBound CheckboxGroup

CheckBoxGroupToday I’ve decided to post a control I created for EXTjs that might be useful to you.  The problem I was running into was that I had a group of checkbox controls that all needed to be set based on if a record exist in the database or not.  If the record is there, the box should be checked.  If it isn’t there, it shouldn’t be checked.

Further, if the user checks a box, it should add a corresponding record into the database.

Since there is nothing in the current framework that deals with this situation, I decided to create a control.

The config for the groupbox is the same as the config for the Ext.form.CheckboxGroup that ships with EXT 4.2 with the addition of two additional config properties, store and inputField.

The store config property lets you set the store that the control is bound to just like any other control in EXT that has a store property.  It will either use the store name, or it will use the store object.

The inputField config property will let you set which field in the model should be used to set the value of the checkboxes in the group.

You will configure the actual check boxes under the group as you would normally.  For the purposes of binding, you will need to set the inputValue config property to the value that will make the check box true.

Here’s the code:

Ext.define('framework.form.CheckboxGroup', {
    extend: 'Ext.form.CheckboxGroup',
    alias: 'widget.boundcheckboxgroup',
    store: null,
    valueField: null,
    getBoxes: function(query) {
        return this.query('[isCheckbox]' + (query||''));
    },
    init: function () {
        var self = this;
        self.callParent(arguments);
    },
    constructor: function (configs) {
        var self = this;
        self.callParent(arguments);
        self.store = configs.store;
        self.inputField = configs.inputField;

        self.on('afterrender', function () {
            if (typeof self.store === 'string') {
                self.store = 
                    Ext.data.StoreManager.get(self.store);
            }
            if (self.store !== undefined && 
                self.store !== null) {
                Ext.Array.forEach(self.getBoxes(), 
                    function (checkbox) {
                    var record = 
                        self.store.find(self.valueField, 
                        checkbox.inputValue);
                    if (record > -1) {
                        checkbox.setValue(
                            checkbox.inputValue);
                    }
                    checkbox.on('change', 
                        function (item, newValue) {
                        record = self.store.find(
                            self.inputField, 
                            item.inputValue);
                        if (record > -1 && 
                            !newValue) {
                            self.store
                                .removeAt(record);
                        }
                        if (record === -1 
                            && newValue) {
                            var model = 
                                self.store.add({});
                            model[0].set(self.inputField, 
                                item.inputValue);
                        }
                    });
                });
            }
        });
    }
});

 

 

Other post in EXTjs

Related Post

  • Testing EXTjs with Selenium using C#Testing EXTjs with Selenium using C# For the last two years, about 99% of the work I’ve been doing has been JavaScript programming using EXTjs.  The problems I’ve encountered along the way are primarily related to […]
  • Access a control by ID From Within a Databound ControlAccess a control by ID From Within a Databound Control Databound controls are at once very easy and very frustrating.  If you just need to do some simple databinding that gets a list of items on the screen and you need the ability to edit […]
  • 7 Reasons To Evade Ext JS7 Reasons To Evade Ext JS I’ve worked with Ext JS now for a total of 2.5 years.  First with Ext 4.2 and now with Ext 6.x.Here’s my experience, and warning, of why you should avoid this disaster of a […]
  • ASP.NET Dynamic ValidatorASP.NET Dynamic Validator One of the controls that was added to ASP.NET 3.5 in the SP1 release was the Dynamic Validator control.I completely missed it.What it does is pretty cool.  But it doesn’t […]
  • Panel DefaultButton does not workPanel DefaultButton does not work Or, at least, it didn't. Here's what happened:Yesterday a client asked me to help track down a problem he was having with setting the default button for a text box.As you should […]

About Dave Bush

Dave Bush is a Full Stack ASP.NET developer focusing on ASP.NET, C#, Node.js, JavaScript, HTML, CSS, BootStrap, and Angular.JS.Does your team need additional help in any of the above? Contact Dave today.