Extjs5 store load is requesting a model file even when the model is defined in the same file

Question

I don't know if this is a configuration issue in my app because I have done the same thing on one server which works perfectly. On a different web server I am trying to set up I am just trying to get an example working and I'm running into some extremely odd behavior. For some reason whenever the store loads it does a get request for a file that has the same name as the model name of the store. I don't understand why it's requesting a model file when the model is defined in the same file!? I didn't always have the model or store defined in the same file, they were in the proper directory structure but I moved them into one file to troubleshoot this issue and rule out possibilities but it's the same result, so for simplicity it's in the same file:

 Ext.define('FPTModel', {
  extend: 'Ext.data.Model',
  fields: [
    {name: 'f1', type: 'int'}, 
    {name: 'f2', type: 'string'},
  ]
});

Ext.define('appName.view.main.Main', {
  extend: 'Ext.container.Container',
  requires: [...my controller and viewModel are here...],

  xtype: 'app-main',
  initComponent: function() {
    var myStore = Ext.create('Ext.data.Store', {
      model: 'FPTModel',
      data: [
        {f1: 1, f2: 'someData'}, 
        {f1: 2, f2: 'some more data'}, 
      ],
      autoLoad: true
    });
    this.testStore = myStore;
    this.callParent();
  },
  controller: 'main',
  viewModel: {
    type: 'main'
  },
  layout: {
    type: 'border'
  },
  items: [{
    region: 'center',
    xtype: 'tabpanel',
    items: [{
      title: 'tab 1',
      xtype: 'container',
      layout: 'vbox',
      items: [{
        xtype: 'grid',
        height: 300,
        width: '100%',
        columns: [
          {header: 'Field 1', dataIndex: 'f1' }, 
          {header: 'Field 2',dataIndex: 'f2'}, 
        ],
        store: this.testStore
      }]
    }]
  }]
});

When the page loads everything is fine and there are no errors. Whenever the store loads I see a GET request go out for https://my.site/FPTModel?_dc=1432862899334&page=1&start=0&limit=25

I know this is happening when the store loads because when I remove the autoLoad it doesn't send the get request and if I call testStore.load anywhere it does the get request.

This get request returns 404 obviously because that file doesn't exist. I don't understand why it's trying to load the model file from the server's root directory, or at all, when it's already defined. When I had this defined in it's proper directory structure (appName.model.FPTModel) then the get request was for .../appName.model.FPTModel...

I have been using extjs for about 2 years now and I have never seen anything like this.... Hoping someone out there can shed some light on this as it's driving me crazy. I hope there is something simple that I am missing somewhere...

Johan Van de Merwe · Accepted Answer

This is because you do an Ext.define on the model.

Then Extjs is going to look in namespace of your app and tries to find the model FPTModel as an FPTModel.js file, because you used just "FPTModel", in the root of your app.

You should use Ext.create to create the model as a variable result and use that variable (containing the model object) in in your store. Or you should create an additional file with the model description in folder: appName/model/ and refer to it in the store.

But then you have to add a require config setting in your store to the model. Something like

require: ['appName.model.FPTModel']

You don't have to do this if you have add the model and store to the requires of your application.js in your app.

If you have no further needs for the model I would include the fields in the store definition.

I have done some restructuring of your object (not complete). I have added some panels for clarity. Don't use a border layout if you don't need one and avoid overdoing layouts and unneccessary nesting of panels.

I have added the function getGridStore which you can call with this.getGridStore(), to avoid functions like this.teststore = myStore.

So if you have to reload the store you simply do: this.getGridStore().load(), or in the application or view controller something like: this.getMainPanel.getGridStore().load().

The autoLoad config is not required, because the store already holds the data. It is only required if you load the data from a proxy (server).

Ext.define('appName.view.main.Main', {
   extend: 'Ext.panel.Panel',
   layout: 'border',
   requires: [],
   xtype: 'app-main',

   controller: 'main',

   viewModel: {
      type: 'main'
   },

   initComponent: function () {

      var myModel = Ext.create('Ext.data.Model', {
         fields: [
            {name: 'f1', type: 'int'},
            {name: 'f2', type: 'string'},
         ]
      });

      var myStore = Ext.create('Ext.data.Store', {
         model: myModel,
         data: [
            {f1: 1, f2: 'someData'},
            {f1: 2, f2: 'some more data'},
         ],
         autoLoad: true
      });

      Ext.applyIf(this, {
         items: [{
            region: 'center',
            title: 'Center Panel',
            flex: 3,
            xtype: 'tabpanel',
            items: [{
               title: 'tab 1',
               xtype: 'gridpanel',
               layout: 'fit', // maybe not even neccessary
               columns: [
                  {header: 'Field 1', dataIndex: 'f1'},
                  {header: 'Field 2', dataIndex: 'f2'},
               ],
               store: myStore
            }, {
               xtype: 'panel',
               html: 'Some other tab',
               layout: 'fit'
            }]
         }, {
            xtype: 'panel',
            region: 'east',
            flex: 1,
            html: 'East panel',
            title: 'East Panel'
         }]
      });

      this.callParent();
   },

   getGridStore: function() {
      return this.down('gridpanel').getStore();
   }
});

Extjs5 store load is requesting a model file even when the model is defined in the same file

Answers (2)

Related Questions