title: Adding link to remove besides each checkboxes in checkboxgroup
body: <p>I have a window where I am displaying other fields in addition to checkboxgroup.
  This checkboxes are displayed dynamically and are populated from an array named checkboxconfigs.
  How / Can I have a link to delete checkbox group.</p>
  
  <p>My code to display checkbox group is </p>
  
  <pre><code>function showassetForm(record,statusname,emptyval,checkList) 
  {
      checkboxconfigs = [];
      arrSubTicket = getSubTickets(record.data.Id);
  
      for(z=0;z&lt;arrSubTicket.length;z++)
         {
              checkboxconfigs.push({ //pushing into array
             boxLabel:arrSubTicket[z].Name,
             name:'checklist',
             inputValue:arrSubTicket[z].Id,
             relatedTicket:arrSubTicket[z].TicketId
      });
         }
      var  myCheckboxGroup = Ext.create('Ext.form.CheckboxGroup', {
          columns: 1,
          vertical: true,
          items: checkboxconfigs
      });
  
  
       myCheckboxGroup.on({              
          change: function(checkboxGroup, newValue) {
              console.log("Changed....");
               formattedValues = [];
  
              newValue = newValue.checklist.length === 0 ? [newValue.checklist] : newValue.checklist;
              console.log("newvals=="+newValue);
              checkboxGroup.items.each(function(checkbox){
                  var checkboxValue = checkbox.inputValue,
                      foramttedValue = {};
  
                  foramttedValue[checkboxValue] = newValue.indexOf(checkboxValue) !== -1 ? 'on' : 'off';
  
                  formattedValues.push(foramttedValue);
              });
          }
  
      });
  
  
  
           form = Ext.widget('form', {
              layout: {
                  type: 'vbox',
                  align: 'stretch'
              },
              border: false,
              bodyPadding: 10,
  
              fieldDefaults: {
                  labelAlign: 'top',
                  labelWidth: 100,
                  labelStyle: 'font-weight:bold'
              },
              defaults: {
                  margins: '0 0 10 0'
              },
  
  
  
              items: [{
                  xtype: 'fieldcontainer',
                  labelStyle: 'font-weight:bold;padding:0',
                  layout: 'vbox',
                  defaultType: 'textfield',
  
                  fieldDefaults: {
                      labelAlign: 'left'
                  },
  
                  items: 
                [
                  /*{
                      flex: 1,
                      name: 'Name',
                      fieldLabel: 'Ticket Description',
                      allowBlank: true
                  },*/ 
                  {
  
                      name: 'Hours',
                      fieldLabel: 'Hours',
                      allowBlank: true,
                      value: record.data.Hours
                  }, 
  
                  {    
                       flex: 2, 
                      xtype:'textarea',
                      name: 'Notes',
                      fieldLabel: 'Ticket Notes',
                      allowBlank: true
                  }, 
                  {
                      xtype: 'combo',
                      fieldLabel: 'Status',
                      hiddenName: 'Status',
                      allowBlank: false,
                      name:'Status',
                      store: new Ext.data.SimpleStore({
                          data: allstatus,
                          fields: ['value', 'text']
                      }),
                     // valueField: 'value',
                      valueField: 'value',
                      displayField: 'text',
                      triggerAction: 'all',
                      editable: false,
                     // value : record.data.Status
                      value : statusname
                  },
                  {
                      xtype: 'combo',
                      fieldLabel: 'Priority',
                      hiddenName: 'Priority',
                      allowBlank: false,
                      name:'Priority',
                      store: new Ext.data.SimpleStore({
                          data: priorities,
                          fields: ['value', 'text']
                      }),
                     // valueField: 'value',
                      valueField: 'value',
                      displayField: 'text',
                      triggerAction: 'all',
                      editable: false,
                      value : record.data.Priority
                  },                    
                  {
                      xtype: 'button',
                      //id: 'newSubTicket',
                      cls:'x-btn-default-small',
                      text: '+ Checklist',
                      handler : function () {
                          createSubticket(record,statusname);
                      },
                      style : 'margin:0 0px'
                  },
  
                  myCheckboxGroup
  
                  ]
              }],
  
              buttons: [{
                  text: 'Cancel',
  
                  handler: function() {                        
                      this.up('form').getForm().reset();
                      this.up('window').hide();
                     // checkboxconfigs = [];
                  }
              }, {
                  text: 'Save',
                  handler: function() {
                         if (this.up('form').getForm().isValid()) 
                         {
                          // In a real application, this would submit the form to the configured url
                          // this.up('form').getForm().submit();
                         form =  this.up('form').getForm();
                         var recordsToAdd = [],recordsToAddNotes = [];
                         var record1 = {},recordNotes = {};
                          //this.up('window').hide();
                          //var summary = form.findField('Name').getSubmitValue();
                          var hrs = form.findField('Hours').getSubmitValue();
                          var status = form.findField('Status').getSubmitValue();
                          var priority = form.findField('Priority').getSubmitValue();
                          var notes = form.findField('Notes').getSubmitValue();
                          //record1['dev_summary'] = summary;
                          //record1['dev_total_hours'] = hrs;
                          record1['ccfive_related_ticket_status']=status;
                          record1['dev_priority']=priority;
                          record1['io_uuid'] = record.data.Id;
                          //console.log("TicketName="+record.data.TicketName);
                          recordsToAdd.push(record1);
  
                          recordNotes['dev_note'] = notes;
                          recordNotes['dev_hours'] = hrs;
                          recordNotes['dev_related_punchlist_item'] = record.data.Id;
                          recordNotes['ccfive_related_ticket_status'] = status;
                          recordsToAddNotes.push(recordNotes);
                        /* Ext.Ajax.request({
                           url: '/api/rest/v1/dev_ticket',
                           method: "PUT",
                           jsonData: JSON.stringify(recordsToAdd), 
                           success: function(response, opts) {
                             //record.setName(summary);
                             //record.setHours(hrs);
                             //record.setHours(hrs);
                             console.log(record);
                             //alert("Ticket updated sucessfully")
                              //win.hide();
                           },
                           failure: function(response, opts) {
                              console.log('server-side failure with status code ' + response.status);
                           }
                        });
  
                        Ext.Ajax.request({
                           url: '/api/rest/v1/dev_ticket_note',
                           method: "POST",
                           jsonData: JSON.stringify(recordsToAddNotes), 
                           success: function(response, opts) {
                             console.log(record);
                             alert("Ticket updated sucessfully")
                              win.hide();
                           },
                           failure: function(response, opts) {
                              console.log('server-side failure with status code ' + response.status);
                           }
                        });
                        console.log(Ext.encode(formattedValues));
                        updateStatus(formattedValues);*/
                          console.log("checkboxes..........");
                          console.log(checkboxconfigs);
                        newSubtickets(checkboxconfigs);  
                      }
                  }
              }]
          });
  
          win = Ext.widget('window', {
              title: record.data.TicketName,
              closeAction: 'hide',
              width: 400,
              height: 450,
              minHeight: 220,
              layout: 'fit',
              resizable: true,
              modal: true,
              items: form
          });
          win.show();
  </code></pre>
  
  <p>}</p>
  
  <p>My window looks like in the image below
  <a href="https://i.stack.imgur.com/PMIxC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PMIxC.png" alt="enter image description here"></a>
  I need a link besides each checkbox to remove them.</p>