[Solved] Dynamically populating an ExtJS checkboxgroup

2 Posts

cantlin Reply #1, 15 years, 6 months ago

In my CMP’s create and update forms, I’d like to display a list of checkboxes corresponding to ModX resources.

To display the right checkboxes, I believe I need to follow roughly this process:

Create a processor to return the relevant Resources as JSON.
Retrieve that data in an ExtJS JsonStore.
Pass it to the items parameter of my checkboxgroup on instantiation.

I’m new to all this ExtJS stuff, and I’m having a lot of trouble structuring code. My Window object looks like this:

Shepherd.window.CreateArticle = function(config) {
    config = config || {};
    Ext.applyIf(config,{
            title: _('shepherd.article_create')
           ,url: Shepherd.config.connectorUrl
           ,baseParams: { action: 'mgr/article/create' }
           ,width: 900
           ,fields:
              [{ xtype: 'textfield'
                     ,fieldLabel: _('shepherd.article_title')
                     ,name: 'title'
                     ,width: 300
                     },{
                 xtype: 'tinymce'
                        ,tinymceSettings: {
                        theme : "advanced",
                            theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|"
                            ...snip...
                      }
                     ,fieldLabel: _('shepherd.article_content')
                     ,name: 'content'
                     ,id: 'shepherd-article-content'
                     ,width: 700
                     },{
                 xtype: 'shepherd-combo-authors'
                     ,fieldLabel: 'Author'
                     }
                  ]
    });
    Shepherd.window.CreateArticle.superclass.constructor.call(this,config);
};
Ext.extend(Shepherd.window.CreateArticle, MODx.Window);
Ext.reg('shepherd-window-article-create', Shepherd.window.CreateArticle);

I managed to get a dynamic dropdown working along similar lines by creating the field like this:

Shepherd.combo.Authors = function(config) {
    config = config || {};
    Ext.applyIf(config,{
                id: 'shepherd-combo-authors'
                ,name: 'author'
                ,displayField: 'pagetitle'
                ,valueField: 'id'
                ,fields: ['id','pagetitle']
                ,url: Shepherd.config.connectorUrl
                ,baseParams: { action: 'mgr/article/getAuthorList' }
        });
    Shepherd.combo.Authors.superclass.constructor.call(this,config);
};
Ext.extend(Shepherd.combo.Authors, MODx.combo.ComboBox);
Ext.reg('shepherd-combo-authors', Shepherd.combo.Authors);

Unfortunately checkboxgroups seem to be very different animals. I tried dumping this in an onReady (using the same processor as before for now):

var store = new Ext.data.JsonStore({ 
      url: Shepherd.config.connectorUrl                                                                          
     ,baseParams: { action: 'mgr/article/getAuthorList' }                                                                                   
     ,fields: ['id', 'pagetitle']                                                                                                           
     ,autoLoad: true                                                                                                                        
});

That seems to be working OK, although I’d rather be loading it when the Window is opened. Using the store in the checkboxgroup is what I can’t get right:

{ xtype: 'checkboxgroup' ,items: store }

When I open my create form, "this.items[0] is undefined" pops up in the console. I can get "h.prototype is undefined" instead with...

{ xtype: 'checkboxgroup' ,items: new Ext.data.JsonReader({ root: 'results' }, store) }

Any pointers?

- 5,888 Posts
Bruno17 Reply #2, 15 years, 6 months ago

if you would try xdbedit you could use a checkbox-tv with @EVAL - binding or own custom-tv-inputs to fill this checkboxes.
-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

2 Posts

cantlin Reply #3, 15 years, 6 months ago

Working code:

checkboxArray = [];                                                                                                                         
                                                                                                                                            
var resourceStore = new Ext.data.JsonStore({
      url: MyExtra.config.connectorUrl                                                                
     ,root: "results"                                                                                                                       
     ,baseParams: { action: "mgr/resource/getList" ,parent: 123 }                                                                          
     ,fields: ["id", "pagetitle"]                                                                                                           
     ,autoLoad: false                                                                                                                       
     ,listeners: {                                                                                                                          
        load: function(t, records, options) {                                                                                               
            for(var i = 0; i < records.length; i++) {                                                                                          
              checkboxArray.push({id: records[i].data.id, boxLabel: records[i].data.pagetitle});                                              
            }                                                                                                                               
        }                                                                                                                                   
    }                                                                                                                                       
});                                                                                                                                         
                                                                                                                                            
authorStore.load();

And in the Window:

{ xtype: 'checkboxgroup'
    ,fieldLabel: 'Related Resources'
    ,items: checkboxArray
}

What kept tripping me up was the asynchronicity: my advice to anyone else mucking about with ExtJS for the first time would be to try and keep in mind that, it being JS, everything is always going to execute right away. Obvious, but amazingly forgettable. It might seem perfectly reasonable to load a store then do something with it to get the data structure you want, but in reality your store will still be loading when you try and loop through it. Dear self: remember to callback!

- 863 Posts
Lucas Reply #4, 15 years, 3 months ago

Moved my post to here:

http://modxcms.com/forums/index.php/topic,63978.msg374519/topicseen.html#msg374519