Utilizing a JSON object named "shop" to populate a grid within a fresh ExtJS window

Similar to this Stack Overflow question, my issue involves loading JSON data into a new window. I want the structure of the new window to be like this example. The challenge is combining the solutions for reading JSON and creating a grid in a new window, so that the grid can display the JSON data passed to it. How should I modify the store line in the second code block (or in my own code below) to read from a variable containing my JSON data?

var obj = response;
try {
  obj = Ext.decode(response.responseText);
} catch (error) {}
if (obj) {
  Ext.create('Ext.window.Window', {
    title: 'Hello',
    height: 200,
    width: 400,
    layout: 'fit',
    items: {
      xtype: 'grid',
      border: false,
      columns: [{
        text: 'id',
        flex: 1,
        sortable: true,
        dataIndex: 'id'
      }, {
        text: 'name',
        width: 300,
        sortable: true,
        dataIndex: 'name'
      }],
      store: Ext.create('Ext.data.ArrayStore', {}) //this is the line I have to change
    }
  }).show();
} else {
  alert("Invalid response")
}

Answer №1

The JSON data is working, but it is not loading fully because it lacks a root. This solution is what I have found for now.

Creating an Ext.window.Window with the title 'Admants', height 200, width 400, and layout set to 'fit'. Inside this window, there is a grid with columns for id and name, and the data is being loaded into the store from the obj variable.

This issue has been partially resolved.

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

Issue with highlighting when one string overlaps with another

I am facing a challenge with handling a string that contains Lorem Ipsum text. I have JSON data that specifies the start and end offsets of certain sections within the text that I need to highlight. The approach I am currently using involves sorting the JS ...

Combining strings within a string after a specific word with nested Concatenation

In a given string variable "str," I am looking to concatenate another string between "InsertAfterMe" and "InsertBeforeMe". str="This is a string InsertAfterMe InsertBeforeMe" s1="sometext" s2="soMoreText" aList=[1,2,3,4,5] The concatenated string shoul ...

Difficulty activating JavaScript function - unsure of proper implementation

I'm having trouble with calling a function instead of an alert in my code. I tried using FunctionsName(); and removing the alert(''); but it doesn't seem to be working for me :( Could someone please take a look at the following code an ...

What could be causing my webpage to automatically refresh following a POST request in NodeJS?

Utilizing the express framework alongside NodeJS, I have encountered an issue where my client webpage refreshes after making a POST request that triggers a python script and returns a JSON object to the client. My dilemma lies in preventing this automatic ...

"Clicking on one item in the Bootstrap submenu doesn't close the other items,

I have this Javascript code snippet that deals with expanding and collapsing submenu items: <script type="text/javascript> jQuery(function(){ jQuery(".dropdown-menu > li > a.trigger").on("click",function(e){ var current ...

The dynamic concatenation of Tailwind classes is failing to have any effect, even though the full class name is being

I'm currently using Tailwind CSS within my Next.js project and I have a common method that dynamically returns the desired background color. However, despite adding the full class name, the background color is not displaying as expected. After reading ...

What is the correct method for storing or uploading an audio file to a designated destination?

Can anyone help me with storing recorded voices in a specific location and uploading the recorded files to that location? Below is a script for uploading an audio file using upload.php: Reference link: //upload link var upload = document.createElement( ...

The font family of Material-ui ToolbarTitle is no longer retained

https://i.sstatic.net/ygdwe.png The tutorial mentioned that the title should be styled with the Roboto font, just like the Options title above. However, despite including the Roboto font via a CDN in my project, the font does not appear as expected in my o ...

The directive code takes precedence over the controller code and is executed first

A custom directive has been implemented and is utilized as shown below: <div car-form car="car" on-submit="createCar(car)"></div> This directive is used on both the new and edit pages, each with its own controller. The EditCarController retri ...

Tips for utilizing the key special attribute with the v-for directive when working with an array of arrays

List item There is a variable that contains an array of arrays of objects in the following format: let FooVar: Array<Array<FooObject>> = [] ; The task is to iterate through this variable inside a component using the following structure: <s ...

When working with GWT, you can easily attach an event listener to any element on the host page

I am looking to implement a MouseOver event handler for any tag, specifically targeting anchor tags in a legacy HTML page. Following a GWT guide, I successfully utilized their JSNI method to retrieve all anchor tags with some minor adjustments for errors. ...

If the JSON file exists, load it and add new data without recreating the file or overwriting existing data

Currently, I am in the process of developing a function called createOrLoadJSON(). This function is responsible for checking whether an existing JSON file exists within the application. If the file does not exist, it should create a new file named "userDat ...

Error: Unable to disconnect from the Twilio Video room due to an undefined reference to the room variable

Currently, I am utilizing the Twilio Video Javascript API for live streaming and recording video content directly from the browser. The application itself is developed using Node.js/Express, with the Twilio API being loaded from a CDN link on the page. As ...

Exploring the DynamoDB List Data Type

Currently, I am working on an angular 8 application where I have chosen to store JSON data in a list data type within DynamoDB. Inserting records and querying the table for data has been smooth sailing so far. However, I have run into some challenges when ...

Access a portion of the redux state during server requests

I am facing a scenario where I need to make a server call using the most recent redux state. My initial thought was to pass a copy of the state through the method flow and then invoke the action creator with that state. However, there is a chance that the ...

What is the best method to set one div as active by default in jQuery UI Accordion?

$(window).load(function(){ $.fn.togglepanels = function(){ return this.each(function(){ $(this).addClass("ui-accordion ui-accordion-icons ui-widget ui-helper-reset") .find("h3") .addClass("ui-accordion-header ui-helper-reset ...

Delete an entry from the list

I have a fully functional Ajax call and function that fills up a datalist. This datalist is utilized to choose from a limited list and add it to a UL element on the page. Once an option is added from the datalist to the actual list, I aim to eliminate that ...

Javascript - Conceal a Dynamic Div Depending on its Text

I have a unique table that generates dynamic Divs with ID's that count as they are created in the following format: <div id="dgpCheckDiv10_0"> <input Delete </div> <div id="dgpCheckDiv10_1"> text2 </div> Some of t ...

Tax calculator that combines item prices and applies tax multiplication

Struggling to crack the code for my calculator. Despite consulting my textbook, I can't seem to figure out why it won't calculate properly. Any advice or tips would be greatly appreciated. <html> <head> <title> Total Calculator ...

Angular input for date is showing wrong value due to timezone problem

My database stores dates in UTC format: this.eventItem.date: "2023-06-21T00:00:00.000Z" The input form field value is showing '2023-06-20' (incorrect day number), which seems to be a timezone issue. I am located in a region with a +3 o ...