Trouble with populating Ext.grid.Panel from ExtJS4 JSON data

Despite researching various posts on the topic, I am still facing issues. Even after attempting to create a Panel with minimal data, I cannot seem to make it work. This problem is really puzzling me. Below is the code snippet that I am currently working with:

Ext.onReady(function () {
    var proxy = new Ext.data.HttpProxy({
        url: path/to/app,
        api: {
            load: path/to/app
        }
    });


    var reader = new Ext.data.JsonReader({
        successProperty : 'success',
        idProperty      : 'id',
        root            : 'data',
        fields          : [{name:'id', type: 'int'}]
    });

    var writer = new Ext.data.JsonWriter({
        encode: false,
        writeAllFields: true
    });

    var store = new Ext.data.Store({
        autoLoad : true,
        autoSync : true,
        root     : 'data',
        restful  : true,
        fields   : [{name: 'id'}],
        proxy    : proxy,
        reader   : reader,
        writer   : writer
    });

    Ext.create('Ext.grid.Panel', {
        renderTo : 'gadgetview',
        store    : store,
        columns  : [{
                       header    : 'ID',
                       text      : 'ID',
                       dataIndex : 'id',
                       width     : 50
                   }],
        height   : 200,
        width    : 450,
        title    : 'Example'
    });
});

The server's response is as follows:

{"data":[{"id":1}], "success":true}

I'm optimistic that the solution is right in front of me.

Answer №1

Your setup is all over the place. The proxy has properties for both reader and writer, while the root property belongs to the reader.

Ext.ready(function() {

    var storage = new Ext.data.Store({
        autoload: true,
        fields: [{
            name: 'identity'
        }],
        proxy: {
            type: 'ajax',
            url: 'myurl',
            reader: {
                type: 'json',
                root: 'data'
            }
        }
    });

    Ext.create('Ext.grid.Panel', {
        renderTo: 'gadgetview',
        store: storage,
        columns: [{
            header: 'Identification',
            text: 'ID',
            dataIndex: 'identity',
            width: 50
        }],
        height: 200,
        width: 450,
        title: 'Sample'
    });
}); 

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Discover the steps for dynamically adding a new row in an Angular application

I am trying to add new rows to a table in Angular, but I'm having some trouble. Initially, there is one empty row, and when I click on the "add new" button after entering details, a new row should be added. I was able to do this using jQuery, but I&ap ...

Why are uppercase letters not allowed in field names for Amazon CloudSearch?

We are currently looking into sending our company's JSON data to Amazon Cloud search for indexing. Initially, we thought it would be a simple task of transferring the data as it is. However, we discovered that our attribute names are in camelCase form ...

Transfer information between two devices remotely through AJAX

I am in the process of developing a web application that utilizes a mobile phone as a controller, similar to this example: . The concept is quite simple - I just need to transfer text entered on the phone to the computer. There is no need for a database, ...

Just updated to Angular 10, encountered issue: Unable to modify the read-only property 'listName' of an object

After updating my Angular project from version 8 to version 10, I encountered an error while trying to edit an input field in a Material Dialog. The error message displayed is as follows: ERROR TypeError: Cannot assign to read only property 'listName& ...

Is there a way to listen for the validation of an HTML5 form before it is submitted?

I've been trying to figure out a way to detect if a form has been validated, but so far, no luck. For example: User clicks the submit button The form is invalid, so the submit event doesn't occur At this point, I want to add the class .form-fe ...

Looking to update the display of an array received in JSON format and then show it using ng-repeat?

Upon receiving a response from the backend, I am saving it in a variable called "allinfo" in my controller. The data received includes the name, date of birth, and hobby of a person. The hobby is an array that can contain any number of elements. In my vie ...

I can't seem to figure out which of these 4 statements is free of syntax errors

Can you identify which code block does not contain a syntax error? Out of the 4 options below, one of them is free from any syntax mistakes. alert("hello "+3+" times); alert("hello "+3 times); alert("hello +3+ times"); alert("hel ...

How can I ensure my screen updates instantly after modifying an image's source using Javascript?

My goal is to display a new image in an existing <img> tag by updating the src attribute using JavaScript. The issue I'm facing is that the screen doesn't immediately reflect the change when the src is updated with the URL of a thumbnail im ...

Using Javascript or Jquery, you can submit a form without the need for a button

I'm attempting to submit a form without using a button by invoking a JavaScript function and processing the form with JQUERY/PHP. My goal is for the form to be submitted silently on the backend without causing the page to reload. However, I keep encou ...

What is the process for updating the values of all objects within an array of objects using Javascript?

I am attempting to update the values of car in all objects within an array called data with the values from newData. Here is my code snippet: import "./styles.css"; const data = [ { id: 1, car: "Toyota 2020", owner: "BM" }, ...

Dismiss the Popover in Ionic 2

After opening a popover that redirects me to another page and then returning to the root page (popToRoot), I reload the data/dom upon an event and dismiss the popup once the json data is received from the server. Everything works smoothly with a lengthy ti ...

Steps to retrieve an array from AJAX request and save it to a JavaScript variable

How can I retrieve the 'this.responseText' array from this function and assign it to a variable named 'teacherIDList'? Any suggestions? var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readySt ...

The JSON parsing encountered an error with the response having "status":200 and "statusText":"OK"

I am encountering a parse error when trying to send a JSON object. {"readyState":4,"responseText":"","status":200,"statusText":"OK"} Here is the code snippet: var data = { fb_id: response.id, email: response.email, name: response.name, first_nam ...

Execute a Jquery Webservice function

Just starting out with Jquery and Ajax. I've been able to retrieve XML data from a web service, but now I need to convert it into an array for use with the AJAX GRIDVIEW. Below is my JS code, the result from the web method, and the desired array forma ...

Ways to troubleshoot CORS issue while working with pseudo API?

While utilizing a mock API, I encountered the familiar error message: "No 'Access-Control-Allow-Origin' header is present on the requested resource.". Despite watching videos and reading articles on this issue, the solutions provided we ...

A guide on updating an item in a basic JavaScript file with Node.js

This query pertains to Workbox and Webpack, but no prior knowledge of these libraries is necessary. Background Information (Optional) Currently using the InjectManifest plugin from Workbox 4.3.1 (workbox-webpack-plugin). While this version provides the o ...

What is the best method for gracefully opening external links in a reusable new tab?

Here is the progress I have made so far: <script> var win; function OpenInNewTab(url ) { // var win; if (win) { win.close(); } win =window.open(url, 'myWin'); win.focus(); } </script> My links are structured like ...

ng-class does not seem to be functioning properly when used within a file that is included via ng-include in

My question pertains to the menu I am loading using ng-include from the index file. <span ng-include="'app/components/common/menu.html'"></span> The content of menu.html is as follows: <li ng-class="active" > <a hr ...

Encountering a build time issue while incorporating Redis into Next.js

Incorporating Redis into my Next.js project has been beneficial overall. However, during the build process (next build), an error arises when it attempts to connect to Redis, resulting in the following message: Collecting page data ..[ioredis] Unhandled e ...

What is the best way to make this relative path function in JavaScript?

My file structure is organized in the following way: multiple folders a subfolder _includes getStatisticsTable.php _templates StatisticsWrapper.html Within StatisticsWrapper.html, I am using jQuery's .get() method to fetch external data which ...