We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 10378
    • 375 Posts
    Hello - here I am again,

    now that the JsonStore gets it's data correctly, I have a new problem:


    I can't get the variable catExtFieldArray (which is filled within the load listener of the JasonStore) to the items property of the checkboxgroup field.

    The code below fires "catExtFieldArray is not defined". I know the problem lies within the scope behavior of JavaScript.

    How can I make the array available to the items property of the checkboxgroup field?

    I tried to make the variable global by declaring it outside of the Ext.onReady function but without success. I googled alot of articles regarding the scope behavior but cant figure out how to do this.

    Could anyone please enlighten me?

    Thanks in advance,
    Martin


    MyExtra.window.UpdateSubscriber = function(config) {
        config = config || {};
    
        Ext.onReady(function() {
            var catExtFieldArray = new Array();
            var catExtFieldStore = new Ext.data.JsonStore({
                url: MyExtra.config.connectorUrl
                ,baseParams: {
                    action: 'mgr/subscribers/getCatList'
                }
                ,root: 'results'
                ,fields: ['id','name']
                ,autoLoad: false
                ,listeners: {
                    'load': {
                        fn: function(t, records, options) {
                            for (var n=0; n<records.length; n++) {
                                catExtFieldArray.push({
                                    name: "newslettercategories[]",
                                    inputValue: records[n].data.id,
                                    boxLabel: records[n].data.name
                                });
                            }
                        }
                    }
                    ,'loadexception': {
                        fn: function(obj, options, response, e){
                            console.info('store loadexception, arguments:', arguments);
                            console.info('error = ', e);
                        },scope:this
                    }
                }
            });
            catExtFieldStore.load();
        });
     
        Ext.applyIf(config,{
            title: _('myextra.subscriber_update')
            ,url: MyExtra.config.connectorUrl
            ,baseParams: {
                action: 'mgr/subscribers/update'
            }
            ,fields: [{
                xtype: 'hidden'
                ,name: 'id'
            },{
                xtype: 'displayfield'
                ,fieldLabel: _('myextra.subscriber_username')
                ,name: 'username'
                ,anchor: '100%'
            },{
                xtype: 'textfield'
                ,fieldLabel: _('myextra.subscriber_fullname')
                ,name: 'fullname'
                ,anchor: '100%'
            },{
                xtype: 'textfield'
                ,fieldLabel: _('myextra.subscriber_email')
                ,name: 'email'
                ,anchor: '100%'
            },{
                xtype: 'checkboxgroup'
                ,fieldLabel: _('myextra.subscriber_categories')
                ,columns: 2
                ,items: catExtFieldArray
            }]
        });
        MyExtra.window.UpdateSubscriber.superclass.constructor.call(this,config);
    };
    Ext.extend(MyExtra.window.UpdateSubscriber,MODx.Window);
    Ext.reg('myextra-window-subscriber-update',MyExtra.window.UpdateSubscriber);
    

    This question has been answered by gadgetto. See the first response.

      Freelancer @bitego http://www.bitego.com
      ---
      GoodNews - one of the most advanced and integrated Group Mailer premium add-ons for MODX Revolution!
      More infos here: http://www.bitego.com/extras/goodnews/
      • 39194
      • 149 Posts
      This is strange. Your code should work.
      So, gadgetto, where was the bug?

      By the way, don't use Array constructor. Use var catExtFieldArray = [];
      • discuss.answer
        • 10378
        • 375 Posts
        Quote from: danya_postfactum at Nov 20, 2012, 11:32 PM
        This is strange. Your code should work.
        So, gadgetto, where was the bug?

        I didn't find a bug - instead I solved this by putting the checkbox group generator in an external file/function and let this function render the output to the appropriate field of the window:

        The external file/function to build the checkbox group:

        function catCheckboxGroup(renderTarget,groupName) {
            Ext.onReady(function() {
                var catStore = new Ext.data.JsonStore({
                    url: GoodNews.config.connectorUrl
                    ,baseParams: {
                        action: 'mgr/category/getList'
                    }
                    ,fields: ['id','name','uniquekey']
                    ,root: 'results'
                    ,autoLoad: false
                    ,autoDestroy: true
                    ,listeners: {
                        'load': {
                            fn: function(t, records, options, success) {
                                var catArray = new Array();
                                for (var i=0; i<records.length; i++) {
                                    catArray.push({
                                        name: groupName+'['+records[i].data.uniquekey+']'
                                        ,inputValue: records[i].data.id
                                        ,boxLabel: records[i].data.name
                                        ,anchor: '.45'
                                    });
                                }
                                var catCheckboxGroup = new Ext.form.CheckboxGroup({
                                    items: catArray
                                    ,columns: 2
                                    ,renderTo: renderTarget
                                });
                                //console.log(catArray);
                            }
                        }
                        /*,'loadexception': {
                            fn: function(obj, options, response, e){
                                console.info('store loadexception, arguments:', arguments);
                                console.info('error = ', e);
                            }
                        }*/
                    }
                });
                catStore.load();
            });
        };
        




        The field in the ExtJS window which calls the above function on render event:

        ...
        ,{
            id: 'cat-ext-checkboxgroup'
            ,fieldLabel: _('myextra.subscriber_categories')
            ,anchor: '100%'
            ,listeners: {
                'render': {fn: function() {catCheckboxGroup('cat-ext-checkboxgroup','newslettercategories')}
            }
        }
        ...
        


        I know this isn't the elegant way - but for now it works (except some strange rendering behavior where the 2 columns of the checkbox group doesn't always get 50%/50% width)

          Freelancer @bitego http://www.bitego.com
          ---
          GoodNews - one of the most advanced and integrated Group Mailer premium add-ons for MODX Revolution!
          More infos here: http://www.bitego.com/extras/goodnews/
          • 10378
          • 375 Posts
          Quote from: danya_postfactum at Nov 20, 2012, 11:32 PM
          By the way, don't use Array constructor. Use var catExtFieldArray = [];

          Could you please explain why I shouldn't use the constructor?
            Freelancer @bitego http://www.bitego.com
            ---
            GoodNews - one of the most advanced and integrated Group Mailer premium add-ons for MODX Revolution!
            More infos here: http://www.bitego.com/extras/goodnews/
            • 39194
            • 149 Posts
            If you like array constructor, of course you can use it. See the discussion here, for example.
              • 10378
              • 375 Posts
              Quote from: danya_postfactum at Nov 21, 2012, 02:18 AM
              If you like array constructor, of course you can use it. See the discussion here, for example.

              Ok - thanks for your information!

              What do you think about my solution above (using an external function to create the checkbox group)?
                Freelancer @bitego http://www.bitego.com
                ---
                GoodNews - one of the most advanced and integrated Group Mailer premium add-ons for MODX Revolution!
                More infos here: http://www.bitego.com/extras/goodnews/