We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 18835
    • 41 Posts
    Is there also a MODExt component for checkboxes?

    For now I got some records into a comboBox.
    I would love to give all records a checkbox so the value’s will go into an array.

    The code i got:
    VisualTeams.combo.TeamPlayers = function(config) {
        config = config || {};
        Ext.applyIf(config,{
            name: 'teamplayers'
            ,hiddenName: 'player'
            ,displayField: 'username'
            ,valueField: 'id'
            ,fields: ['id','username']
            ,forceSelection: true
            ,typeAhead: false
            ,editable: false
            ,allowBlank: false
            ,listWidth: 300
            ,url: VisualTeams.config.connector_url
            ,baseParams: {
                action: 'mgr/players/getlist'
                ,team: MODx.request.team
                ,combo: true
            }
        });
        VisualTeams.combo.TeamPlayers.superclass.constructor.call(this,config);
    };
    Ext.extend(VisualTeams.combo.TeamPlayers,MODx.combo.ComboBox);
    Ext.reg('visualteams-combo-teamplayers',VisualTeams.combo.TeamPlayers);


    If it’s not existing. How can I make this work?
      • 4574
      • 2 Posts
      You want a CheckboxGroup, although you might also find the SuperBoxSelect extension interesting (example). A CheckboxGroup in a Window looks like:

      { xtype: 'checkboxgroup'
       ,fieldLabel: _('myextra.field_label')
       ,name: 'myField'
       ,items: myArray
      }


      You want to provide it with an array of hashes, something like:

      var myArray = [
        { name: "myfield[]", inputValue: "foo", boxLabel: "Foo" }
       ,{ name: "myfield[]", inputValue: "bar", boxLabel: "Bar" }
      ];
      


      You can build that from a remote source with a Store.

      var myArray = new Array();                                                                                               
                                                                                                                         
      var myStore = new Ext.data.JsonStore({                                                                         
         url: myExtra.config.connectorUrl                                                                               
        ,root: 'results'                                                                                                 
        ,baseParams: { action: 'mgr/myModel/getList' }                                                     
        ,fields: ["id", "title"]          
        ,autoLoad: false                                                                                                 
        ,listeners: {                                                                                                    
            load: function(t, records, options) {                                                                        
                for (var i=0; i<records.length; i++) {                                                                   
                  myArray.push({name: "myfield[]", inputValue: records[i].data.id, boxLabel: records[i].data.title});                                               
                }                                                                                                        
            }                                                                                                            
        }                                                                                                                
      });                                                                                                                
                                                                                                                         
      myStore.load();


      In your processor, you’ll be able to access the submitted values from $scriptProperties[’myfield’]. Cool!
        • 18835
        • 41 Posts
        Thank you for the information. I will try this out this evening.
          • 18835
          • 41 Posts
          I did exactly what you say but I get an error:

          The store:
          https://github.com/MaZZie/VisualTeams/blob/Develop/assets/components/visualteams/js/widgets/stores.js

          The matchgrid
          https://github.com/MaZZie/VisualTeams/blob/Develop/assets/components/visualteams/js/widgets/match.grid.js
          from line 220
          ,{
          xtype: 'panel',
          title: 'Players',
          layout: 'form',
          items: [
          { xtype: 'checkboxgroup'
          ,fieldLabel: ('Players')
          ,name: 'myField'
          ,items: myArray
          }
          ]
          }




          Error from firebug:
          this.proxy is undefined
          Observable()ext-all.js (regel 7)
          e = "read"
          a = undefined
          c = Object { params={...}}
          b = undefined
          Observable()ext-all.js (regel 7)
          b = Object { params={...}}
          stores.js?v=210rc4()stores...=210rc4 (regel 18)
          [Afbreken op deze fout] (function(){var h=Ext.util,k=Ext.each,...lclick",this.onNodeDblClick,this)}}); 



            • 4574
            • 2 Posts
            Have you tried wrapping the Store call in a document.ready function? A less than optimal approach, but it worked for me...

            Ext.onReady(function() {
            
              myArray = new Array();
            
              // etc
            
            });
            
              • 26903
              • 1,336 Posts
              Yep, try that, I’ve seen this error before, the url line in your grid definition
              VisualTeams.config.connector_url
              probably isn’t being set before its being used, try this with a hardwired URL if you wish to see if the proxy error goes away.
                Use MODx, or the cat gets it!
                • 18835
                • 41 Posts
                I got a little bit farther. The connector url is working and I also get a array back with the good data.
                Thank You!

                Now I got the error this.item[0] is undefined... But I will fix that... hopefully.

                  • 18835
                  • 41 Posts
                  Fixed:-)

                  playerStore = new Ext.data.JsonStore({
                  instead of
                  playerStore = new Ext.data.Store({
                    • 33968
                    • 863 Posts
                    Quote from: MaZZie at May 17, 2011, 12:39 PM

                    Now I got the error this.item[0] is undefined... But I will fix that... hopefully.
                    I got the same error from doing this, can’t help thinking that the checkboxgroup is being loaded before the JSON data is available.

                    I’ve confirmed that ’myArray’ contains the necessary data, just can’t get it to display in my form.

                    My page structure is like this:
                    Ext.onReady(function() {
                        myArray = new Array();
                        var myStore = new Ext.data.JsonStore({
                    
                        // code removed
                    
                        myStore.load(); 
                    });
                    
                    MyCmp.panel.Section = function(config) {
                        config = config || {record:{}};
                         
                        // code removed
                    
                        {
                    	xtype: 'checkboxgroup'
                    	,fieldLabel: 'Features'
                    	,items: myArray
                        }    
                    


                    Is that the correct way to structure that? I’ve tried many variations but getting desperate now. So close!!
                      • 15083
                      • 697 Posts
                      cantlin, thank you sir. your solution worked.
                      IF you wrap up the datastore and the panel/window that consumes the data in a EXT.onReady, it all works a treat smiley

                      Thank you sir!
                      Next problem is to style them, the look terrible!