1

I continue to study extjs. I wanted to get data using the store object and display it in the Ext.grid component.Grid, but I get a few errors. Here is a link to my Sencha Fiddle Sencha Fiddle, maybe someone has more experience, please see what I'm doing wrong. I'm interested in a couple of points. I want to display the data at the moment when they loaded, that is, without additional triggers. At the same time, I created the store object in one place with the Ext.grid component.Is Grid the correct approach, or should store always be in a separate file?Thank you so much in advance for your help!

Евгений Мушков
  • 29
  • 5

1 Answers1

2

I made some changes to the lines where you're implementing a function in the store config of the grid. It wasn't necessary because you are already storing the value of the store in the constant 'store'.

No, you don't always need to create a separate store file. BUT it's good and RECOMMENDED to do so for best practices and convention.

While looking your fiddle, I noticed that your grid's dataIndex wasn't matching the response from the API. When I inspected the network request using the browser's dev. tools, I found that the JSON you receive isn't in the format you were expecting for the grid columns. As a result, the records were not being displayed in the grid. I've made the necessary edits for you.

Here is the updated code for the grid.

const store = Ext.create("Ext.data.Store", {  
      alias: "store.gridviewstore",
      proxy: {
    type: "ajax",
    url: "https://jsonplaceholder.typicode.com/posts",
   
  },
  autoLoad: true,
});

Ext.define("ModernApp.view.grid.GridView", {
  extend: "Ext.grid.Grid",
  title: "Simpsons",
  xtype: "gridview",
  store: store,
  columns: [
    { text: "Title", dataIndex: "title", width: 200, itemId: "txtTitle" },
    { text: "Body", dataIndex: "body", width: 250, itemId: "txtBody" },
    { text: "Id", dataIndex: "Id", width: 120, itemId: "id" },
  ],

  height: 200,
  layout: "fit",
  fullscreen: true,
});

store.load({
  callback: function (record, operation, success) {
    const data = store.getData();
    data.each((record) => {});
    const panel = Ext.create("ModernApp.view.grid.GridView");
  },
});

feel free to ask anything about it that you couldn't understand

Felipe da Cunha Bueno
  • 61
  • 4
  • 1
    Thank you so much for such a detailed answer! You wrote that my store does not match the data from the server, I just used reader for this. That is, I converted the data into the form that I need. Please tell me the best practice for this? @Felipe – Евгений Мушков Jun 06 '23 at 07:27
  • Sorry for the waiting, the time zone doesn't help, right? – Felipe da Cunha Bueno Jun 06 '23 at 19:48
  • Right, I get it. So the best practice is for you to create a Model folder with a model file of the data you want to receive. So you can look at the ExtJS documentation, for the Model class to know more about it: https://docs.sencha.com/extjs/7.6.0/modern/Ext.data.Model.html I advise you to use Proxy too https://docs.sencha.com/extjs/7.6.0/modern/Ext.data.proxy.Proxy.html The ExtJS documentation is good for learning, it only takes patience – Felipe da Cunha Bueno Jun 06 '23 at 20:09
  • In there you can search more of the methods of it's classes. Proxy can load items into the server, fetch, update... Basically can do everything. Model can convert some datas, or render some data using renderer. It is long the list of things you can do with it. – Felipe da Cunha Bueno Jun 06 '23 at 20:12