Why does this Ext JsonStore not load data (code inside)? I'll pay Euro 50,- for solution!

375 Posts

gadgetto Reply #1, 13 years, 11 months ago

Hello,

could anyone please have a look at the code below and tell me, why this JsonStore doesn't load records?

I pay Euro 50,- (via PayPal) for the first one who provides the answer with the solution.
If the answer comes from an MODx team member I donate the Euro 50,- to the project!

This code is part of an ExtJS data grid where a right click loads an ExtJS window. This window has a few text fields and a CheckboxGroup. The JsonStore function below should load and provide the data for this Checkbox group.

The Json data is returned correctly from the (getList) processor - the problem is, the JsonStore doesn't create records from this Json data.

If needed, I can provide additional informations.

MyExtra.window.UpdateSubscriber = function(config) {
    config = config || {};

    var catExtFieldArray = new Array();
    
    Ext.onReady(function() {
        var catExtFieldStore = new Ext.data.JsonStore({
            url: MyExtra.config.connectorUrl
            ,baseParams: {
                action: 'mgr/subscribers/getCatList'
            }
            ,root: 'newslettercategories'
            ,fields: [{name:'id', type: 'int'}, {name:'name', type:'string'}]
            ,autoLoad: false
            ,autoDestroy: true
            ,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
                            });
                        }
                    },scope:this
                }
                ,'loadexception': {
                    fn: function(obj, options, response, e){
                        console.info('store loadexception, arguments:', arguments);
                        console.info('error = ', e);
                    },scope:this
                }
            }
        });
        catExtFieldStore.load();
        
        //for testing!
        // if uncommented the update window loads and the checkbox group is rendered correctly with the test data!
        /*
        catExtFieldArray.push({"name":"newslettercategories[]","inputValue":"3","boxLabel":"Category 1"});
        catExtFieldArray.push({"name":"newslettercategories[]","inputValue":"7","boxLabel":"Category 2","checked":"true"});
        catExtFieldArray.push({"name":"newslettercategories[]","inputValue":"8","boxLabel":"Category 3"});
        catExtFieldArray.push({"name":"newslettercategories[]","inputValue":"10","boxLabel":"Category 4"});
        catExtFieldArray.push({"name":"newslettercategories[]","inputValue":"11","boxLabel":"Category 5","checked":"true"});
        */
    
        //debug
        //console.log('Connector URL: '+MyExtra.config.connectorUrl);
        console.log('Store records length: '+catExtFieldStore.getCount());
        console.log(catExtFieldStore);
        console.log(catExtFieldArray);
        console.log(config);
        //console.log('User-Extended: '+Ext.getCmp('extended').getValue());
    });

    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);

The processor code:

class CategoryGetListProcessor extends modObjectGetListProcessor {
    public $classKey = 'MyExtraCategory';
    public $languageTopics = array('myextra:default');
    public $defaultSortField = 'name';
    public $defaultSortDirection = 'ASC';
    public $objectType = 'myextra.category';
    
    public function prepareQueryBeforeCount(xPDOQuery $c) {
        $c->select(array('id','name'));
        return $c;
    }

    public function prepareRow(xPDOObject $object) {
        $ta = $object->toArray('', false, true, true);
        return $ta;
    }
}
   
return 'CategoryGetListProcessor';

Part of the console log tells me:

Ext.data.JsonStore.Ext.extend.constructor
autoDestroy: true
autoLoad: false
baseParams: Object
action: "mgr/subscribers/getCatList"
__proto__: Object
batchCounter: 0
batches: Object
__proto__: Object
data: Ext.util.MixedCollection
allowFunctions: false
events: Object
add: true
clear: true
remove: true
replace: true
sort: true
__proto__: Object
getKey: function (b){return b.id}
arguments: null
caller: null
length: 1
name: ""
prototype: Object
__proto__: function Empty() {}
items: Array[0]
length: 0
__proto__: Array[0]
keys: Array[0]
length: 0
__proto__: Array[0]
length: 0
map: Object
__proto__: Object
__proto__: H
events: Object
add: true
beforeload: true
beforesave: true
beforewrite: true
clear: true
datachanged: true
exception: true
load: h.Event
listeners: Array[1]
name: "load"
obj: Ext.data.JsonStore.Ext.extend.constructor
autoDestroy: true
autoLoad: false
baseParams: Object
batchCounter: 0
batches: Object
data: Ext.util.MixedCollection
events: Object
fields: Ext.util.MixedCollection
idProperty: "id"
lastOptions: Object
modified: Array[0]
paramNames: Object
proxy: Ext.data.HttpProxy
reader: Ext.data.JsonReader
recordType: function (){I.apply(this,arguments)}
removed: Array[0]
root: "newslettercategories"
sortToggle: Object
successProperty: "success"
totalProperty: "total"
url: "/modxdev/myextra/assets/components/myextra/connector.php"
__proto__: H
__proto__: Object
loadexception: h.Event
metachange: true
remove: true
save: true
update: true
write: true
__proto__: Object
fields: Ext.util.MixedCollection
allowFunctions: false
events: Object
getKey: function (g){return g.name}
arguments: null
caller: null
length: 1
name: ""
prototype: Object
__proto__: function Empty() {}
items: Array[2]
0: Ext.data.Field.Ext.extend.constructor
convert: function (b){return b!==undefined&&b!==null&&b!==""?parseInt(String(b).replace(Ext.data.Types.stripRe,""),10):(this.useNull?null:0)}
name: "id"
sortType: function (a){return a}
type: Object
__proto__: H
1: Ext.data.Field.Ext.extend.constructor
convert: function (b){return(b===undefined||b===null)?"":String(b)}
name: "name"
sortType: function (a){return String(a).toUpperCase()}
type: Object
__proto__: H
length: 2
__proto__: Array[0]
keys: Array[2]
0: "id"
1: "name"
length: 2
__proto__: Array[0]
length: 2
map: Object
id: Ext.data.Field.Ext.extend.constructor
convert: function (b){return b!==undefined&&b!==null&&b!==""?parseInt(String(b).replace(Ext.data.Types.stripRe,""),10):(this.useNull?null:0)}
name: "id"
sortType: function (a){return a}
type: Object
convert: function (b){return b!==undefined&&b!==null&&b!==""?parseInt(String(b).replace(Ext.data.Types.stripRe,""),10):(this.useNull?null:0)}
sortType: function (a){return a}
type: "int"
__proto__: Object
__proto__: H
name: Ext.data.Field.Ext.extend.constructor
convert: function (b){return(b===undefined||b===null)?"":String(b)}
name: "name"
sortType: function (a){return String(a).toUpperCase()}
type: Object
convert: function (b){return(b===undefined||b===null)?"":String(b)}
sortType: function (a){return String(a).toUpperCase()}
type: "string"
__proto__: Object
__proto__: H
__proto__: Object
__proto__: H
idProperty: "id"
lastOptions: Object
modified: Array[0]
paramNames: Object
proxy: Ext.data.HttpProxy
reader: Ext.data.JsonReader
ef: Array[2]
getId: function (i){var g=d(i);return(g===undefined||g==="")?null:g}
getRoot: function (d){return d[c]}
getSuccess: function (d){return d[c]}
getTotal: function (d){return d[c]}
jsonData: Object
results: Array[4]
0: Object
id: 6
name: "Sonstiges"
__proto__: Object
1: Object
id: 4
name: "Sozialversicherungsrecht"
__proto__: Object
2: Object
id: 5
name: "Steuerrecht"
__proto__: Object
3: Object
id: 7
name: "Testliste"
__proto__: Object
length: 4
__proto__: Array[0]
total: "4"
__proto__: Object
meta: Object
onMetaChange: function (){var d=c.apply(this||window,arguments);b.apply(a||this||window,arguments);return d}
recordType: function (){I.apply(this,arguments)}
__proto__: H
recordType: function (){I.apply(this,arguments)}
removed: Array[0]
root: "newslettercategories"
sortToggle: Object
successProperty: "success"
totalProperty: "total"
url: "/modxdev/myextra/assets/components/myextra/connector.php"
__proto__: H

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

[ed. note: gadgetto last edited this post 13 years, 11 months ago.]

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/

☆ A M B ☆
3,112 Posts

goldsky Reply #2, 13 years, 11 months ago

Why not just extend the MODx.combo.ComboBox?
It has Ext.data.JsonStore defined.

MyExtra.window.UpdateSubscriber = function(config) {
    config = config || {};

    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: 'myextra-combo-category'
            ,fieldLabel: _('myextra.subscriber_categories')
            ,columns: 2
        }]
    });
    MyExtra.window.UpdateSubscriber.superclass.constructor.call(this,config);
};
Ext.extend(MyExtra.window.UpdateSubscriber,MODx.Window);
Ext.reg('myextra-window-subscriber-update',MyExtra.window.UpdateSubscriber);


MyExtra.combo.Category = function(config){
    config = config || {};
    
    Ext.applyIf(config,{
        hiddenName: 'id'
        ,name: 'category'
        ,width: 250
        ,listWidth: 300
        ,displayField: 'category'
        ,valueField: 'id'
        ,fields: ['id','category']
        ,url: MyExtra.config.connectorUrl
        ,emptyText: 'Select a Category...'
        ,baseParams:{
            action: 'mgr/subscribers/getCatList'
            ,combo : true
        }
        ,typeAhead: true
    });
    MyExtra.combo.Category.superclass.constructor.call(this,config);
};
Ext.extend(MyExtra.combo.Category,MODx.combo.ComboBox);
Ext.reg('myextra-combo-category',MyExtra.combo.Category);

[ed. note: goldsky last edited this post 13 years, 11 months ago.]

Rico
Genius is one percent inspiration and ninety-nine percent perspiration. Thomas A. Edison
MODx is great, but knowing how to use it well makes it perfect!

www.virtudraft.com

Security, security, security! | Indonesian MODx Forum | MODx Revo's cheatsheets | MODx Evo's cheatsheets

Author of Easy 2 Gallery 1.4.x, PHPTidy, spieFeed, FileDownload R, Upload To Users CMP, Inherit Template TV, LexRating, ExerPlan, Lingua, virtuNewsletter, Grid Class Key, SmartTag, prevNext

Maintainter/contributor of Babel

Because it's hard to follow all topics on the forum, PING ME ON TWITTER @_goldsky if you need my help.

375 Posts

gadgetto Reply #3, 13 years, 11 months ago

Thanks @goldsky but I need a checkbox group (multiselect). The Admin should be able to check more than one categories.
Probably a multi select box should also work.

By the way - your code works fine!

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/

discuss.answer

375 Posts

gadgetto Reply #4, 13 years, 11 months ago

OK - just figured out whats wrong (after 3 days of search):

This has to be:

,root: 'results'

and not:

,root: 'newslettercategories'

Seems the getListProcessor returns the Json array with exactly this root value!
Maybe this will help others not to search 3 days...

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/

☆ A M B ☆
3,112 Posts

goldsky Reply #5, 13 years, 11 months ago

sure, no prob.
glad it's solved. wink

Rico
Genius is one percent inspiration and ninety-nine percent perspiration. Thomas A. Edison
MODx is great, but knowing how to use it well makes it perfect!

www.virtudraft.com

Security, security, security! | Indonesian MODx Forum | MODx Revo's cheatsheets | MODx Evo's cheatsheets

Author of Easy 2 Gallery 1.4.x, PHPTidy, spieFeed, FileDownload R, Upload To Users CMP, Inherit Template TV, LexRating, ExerPlan, Lingua, virtuNewsletter, Grid Class Key, SmartTag, prevNext

Maintainter/contributor of Babel

Because it's hard to follow all topics on the forum, PING ME ON TWITTER @_goldsky if you need my help.

Answered Why does this Ext JsonStore not load data (code inside)? I'll pay Euro 50,- for solution!