Question

I am trying to get some master data from server in JSON format and bind it to selectfield with the help of Store.

Find my code below

Model

Ext.define('Mobile.model.OrganizationModel', {
  extend: 'Ext.data.Model',
   config: {
    fields: [
        { name: 'Name', type: 'string' },
        { name: 'Id', type: 'int' }
    ]
   }
});

Store

Ext.define('Mobile.store.OrganizationStore', {
extend: 'Ext.data.Store',
model: 'Mobile.model.OrganizationModel',

autoLoad: true,

proxy: {
    type: 'ajax',
    url: 'login/GetOrgList',
    method: 'GET',
    reader: {
        type: 'json'
    }
}

});

View

Ext.define("Mobile.view.LoginView", {
extend: "Ext.form.FormPanel",
alias: "widget.login",
id: 'loginFormPanel',

config: {

    margin: '0 auto',
    name: 'loginform',
    frame: true,
    url: 'login/Authenticate',
    title: 'something',
    items: [

      {
          xtype: 'fieldset',

          itemId: 'LoginFieldset',
          margin: '10 auto 0 auto ',

          title: '',
          items: [
                  {
                      xtype: 'selectfield',
                      label: 'Organization',
                      name: 'Organization',
                      store: 'OrganizationStore',
                      displayField: 'Name',
                      valueField: 'Id',
                      placeHolder: 'Select a Value'
                  }
            ]
      },


    ]
 }

});

APP.js

Ext.application({
name: "Mobile",   
controllers: ["LoginController"],
views: ['LoginView', 'HomeView'],
models: ['UserModel', 'OrganizationModel'],
stores: ['OrganizationStore'],
launch: function () {
    var loginPanel = Ext.create('Ext.Panel', {
        layout: 'fit',
        items: [
            {
                xtype: 'login'
            }
        ]
    });
    Ext.Viewport.add(loginPanel);
}

});

JSON Data format is

[{“Id”:1,”Name”:”Company 1″},{“Id”:2,”Name”:”Company 2″},{“Id”:3,”Name”:”Company 3″}]

The problem is it is not sending request to server and loading JSON data and binds. Any idea about this issue?

Answer 1

update you store code to

    Ext.define('Mobile.store.OrganizationStore', {
extend: 'Ext.data.Store',
config:{
model: 'Mobile.model.OrganizationModel',

autoLoad: true,

proxy: {
    type: 'ajax',
    url: 'login/GetOrgList',
    method: 'GET',
    reader: {
        type: 'json'
    }
}


  }
  });