ExtJs Data Store values empty but Store Raw value populated

Question

So I'm having trouble trying to determine why my store's data values aren't populating for my itemselector component, but the raw data values are populated, it looks like my model and stores are setup correctly. I'm trying to just utilize that first particular portion of the json data so that's why I have the rootProperty set to 'data[0].options'. Just trying to populate that itemselector with that 'Area' collection of json data. Components are below, any help would be appreciated.

ItemSelector

xtype: 'itemselector',
                        cls: 'itemSelectorPlainPanel',
                        margin: '10 10 10 10',
                        labelAlign: 'top',
                        height: 200,
                        flex: 1,
                        autoScroll: true,
                        id: 'ertcSelector',
                        buttons: ['add', 'remove'],
                        reference: 'ertcSelector',
                        store: Ext.create('cers.store.ManagerFilterStore'),
                        displayField: 'label',
                        allowBlank: true,
                        msgTarget: 'side',
                        fromTitle: 'Available ERTC Home Area',
                        toTitle: 'Selected ERTC Home Area',
                        listeners: {
                         render: function() {
                             console.log(this);
                             /*console.log('Value is ' + this.fromField.store.data.items.length);*/
                            }
                         }

Store

Ext.define('cers.store.ManagerFilterStore', {
    extend: 'cers.util.Store',
    requires:[
        'cers.model.ManagerFilterItems',
        'cers.util.MsgHelper',
        'Ext.data.proxy.Rest'
    ],
    model: 'cers.model.ManagerFilterItems',
    storeId: 'managerFilterId',
    autoLoad: true,
    proxy: {
        type: 'rest',
        method: 'GET',
        url: '/rest/mgrqueue/init',
        extraParams: {
            authUserId: 'eksioog'
        },
        reader: {
            type: 'json',
            rootProperty: 'data[0].options',
            totalProperty: 'total',
            successProperty: 'success',
            messageProperty: 'message'
        }
    },
    listeners: {
        datachanged: function() {
            /*console.log('rawData below!!!!');
            console.log(this.getProxy());
            console.log('Model Info');
            console.log(this.getProxy().getModel().getFields());
            console.log('getData');
            console.log(this.getData());
            console.log('Fields');
            console.log(this.getProxy().getModel().getFields());
            console.log('Model');
            console.log(this.getProxy().getModel());
            console.log('Store');
            console.log(this);
            console.log('Data');
            console.log(this.getData());*/
            console.log('Reader');
            console.log(this.getProxy().getReader());
        }
    },

    constructor: function(){
        this.callParent(arguments);
        /*this.filter('model', 'Area');*/
    }
});

Model

Ext.define('cers.model.ManagerFilterItems', {
    extend: 'cers.util.Model',

    constructor: function (args) {
        this.callParent(args); // Calls the parent constructor of parent class being extended
    },
    fields: [
        { name: 'label', type: 'string'},
        { name: 'value', type: 'string'},
        { name: 'active', type: 'boolean'},
        { name: 'selected', type: 'boolean'}
    ],
    idProperty: 'label',

    getLabel : function() {
        return this.get('label');
    },

    setLabel : function(value) {
        this.set('label', value);
    },

    getValue : function() {
        return this.get('value');
    },

    setValue : function(value) {
        this.set('value', value);
    },

    getActive : function() {
        return this.get('active');
    },

    setActive : function(value) {
        this.set('active', value);
    },

    getSelected : function() {
        return this.get('selected');
    },

    setSelected : function(value) {
        this.set('selected', value);
    }
});

Json Data

{
  "data" : [ {
    "model" : "Area",
    "functionality" : "ManagerQueueFilter",
    "options" : [ {
      "label" : "HeadQuarters",
      "value" : "12",
      "active" : true,
      "selected" : false
    }, {
      "label" : "Northeast",
      "value" : "2",
      "active" : true,
      "selected" : false
    }, {
      "label" : "Testing Area",
      "value" : "41",
      "active" : true,
      "selected" : false
    } ], }
{
    "model" : "User",
    "functionality" : "ManagerQueueFilter",
    "options" : [
{
      "label" : "Green, Ted",
      "value" : "c0gret6_vzwm",
      "active" : false,
      "selected" : false
    }, {
      "label" : "Eksioglu, Oguz",
      "value" : "eksioog",
      "active" : true,
      "selected" : true
    } ]
  } ],
  "total" : 2,
  "success" : true,
  "message" : "Success"

Answer 1

Oh well, I just ended up manually setting the data equal to the raw data value in a listener that was waiting for the datachanged event like so:

listeners: {
        datachanged: function() {
            for(i = 0; i < this.getData().items.length; i++) {
                this.getData().items[i].data = this.getData().items[i].raw;
                console.log('New Data ' + i);
                console.log(this.getData().items[i].data);
            }
        }
    }

It's bootleg but it worked, still don't know why those Model instances didn't populate.

Answer 2

Try to add mode property to your itemselector:

...
mode: 'local',
...

Also, you haven't set valueField to your 'field'.