How to get the total number of rows/records in a JSON store using ExtJS?

My dilemma involves a JSON store that provides data in JSON format. I am currently attempting to determine the number of rows or records in the JSON string. However, when utilizing the store.getCount() function, it consistently returns 0. Strangely, the combobox is populated with rows. When attempting to use store.length, I receive an undefined value. This issue likely stems from the fact that the data is no longer in an array form, as it is being returned from the store which calls a PHP script. What would be the optimal approach to solve this problem?

javascriptjsonextjscombobox

Answer №1

Give this a try:

let myDataStore = Ext.extend(Ext.data.JsonStore, {
  ... config...,
  count : 0,
  listeners : {
    load : function(){
      this.count = this.getCount();
  }
}

Ext.reg('myDataStore', myDataStore);

Then, incorporate it into panels like this:

items : [{
 xtype : 'myDataStore',
 id : 'myDataStoreId'
}]

Simply access the count whenever needed:

Ext.getCmp('myDataStoreId').count

Answer №2

Your response in Json format generated by the server may look similar to the following...

{
    "total": 9999,
    "success": true,
    "users": [
        {
            "id": 1,
            "name": "Foo",
            "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d7b72725d7f7c6f337e7270">[email protected]</a>"
        }
    ]
}

Subsequently, you can utilize 

reader: {
    type : 'json',
    root : 'users',
    totalProperty  : 'total',
    successProperty: 'success'
}
within your store object.

Answer №3

According to information from the documentation, you can use the getTotalCount method to retrieve the size of your dataset.

Answer №4

When utilizing an ajax proxy for your store, follow this pattern:

proxy : {
   type : 'ajax',
   url : 'YOUR URL',
   reader : {
       type : 'json',
       root : 'NAME OF YOUR ROOT ELEMENT',
       totalProperty : 'NAME OF YOUR TOTAL PROPERTY' // required for pagination
   }
}

After loading your store with store.load();, an asynchronous Ajax request is sent. Make sure to verify the count in the callback function:

store.load({
  callback : function(records, operation, success) {
       console.log(this.getCount());         // count taking pagination into account
       console.log(this.getTotalCount());    // total size
         // or alternatively 
       console.log(records.length);          // number of records returned = getCount()
  }
});

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

Prevent typing on input fields for numbers exceeding 3 digits

How can I prevent users from entering a number with more than 3 digits? For example, allowing entries like 150 but not accepting numbers like 1601. The keypress should be disabled in such cases. The keypress event must be disabled. <template> < ...

javascriptvue.jsinputkeypress

Iterate through a JSON array using JQUERY's loop function

I have a PHP page that generates a JSON list consisting of integers up to approximately 210. I want to use a jQuery script to search for div elements with IDs containing the numbers from the JSON list and then replace their class with another one. How can ...

phpjqueryajaxjson

Converting Buffers to Binary with JavaScript Node.js

I've been working with Node.JS Buffers to send and receive packets, but I'm struggling to figure out how to convert these buffers into binary representation. I attempted the following code snippet, but it didn't yield the expected results co ...

javascriptnode.jsbuffer

Is it possible to use header() function in a file that is being accessed through

In a specific package, there is a crucial file that verifies session data and redirects the user to the login page with an error message if no valid session exists, using header("Location:" . $var);. This particular file is included in almost all files wi ...

phpjavascriptjqueryajax

Failure to execute Ajax request when searching for a query

My personal GitHub profile viewer React application allows you to search for a profile by username. By default, my own GitHub username is provided on the landing page. However, when trying to search for another user, my ajax call is not functioning properl ...

javascriptjqueryajaxapireactjs

What are the best practices for utilizing an array of routes?

I'm new to working with react but I noticed something strange. My routes are currently set up like this: <Main> <Route exact path="/home" component={Home} /> <Route exact path="/home1" com ...

javascriptreactjstypescriptreact-router-dom

What is the best way to access nativeElements during the ngOnInit lifecycle hook?

Assume in my angular script I have the ability to access an HTML element with viewChild('someDiv') or constructor(private elem: ElementRef){}. When my angular component loads, I want to immediately retrieve a property of that element and store it ...

javascriptangular

Executing MongoDB collection operations with array filtering

I am looking to count records based on tags and filter them before including in specific groups // data in database {tags: ['video', 'Alex'], ... }, {tags: ['video', 'John'], ... }, {tags: ['video', 'J ...

javascriptnode.jsmongodbtypescript

Fetch the Future<list<DATA>> array from an API in Flutter and parse the JSON response

I recently dove into Flutter and decided to start using FlutKit packages. I've encountered a challenge with an array LIST while working on this project. FlutKit utilizes a list with static Json data to cache initial data, including Products, Categorie ...

phpjsonflutterrest

What is causing this unique component to be positioned outside of the <tr> tag?

table.vue ... <tbody class="table-body"> <slot></slot> </tbody> ... TableCellRow.vue <template> <td class="table-row-cell" :class="this.class"> <s ...

javascriptvue.jsvuejs3

Send information as FormData object

I'm getting the data in this format: pert_submit: {systemId: "53183", pert-id: "176061", score: 0, q2c: "3\0", q2t: "", …} Now I need to send it as FormData in my post request. Since I can't use an ...

javascripttypescript

Why do I keep encountering a null window object issue while using my iPhone?

Hey there! I've got a React game and whenever the user loses, a new window pops up. const lossWindow = window.open( "", "", "width=500, height=300, top=200, left = 200" ); lossWindow.document.write( & ...

javascriptreactjsiphonesafari

Facilitating JSON functionality with Jersey and Grizzly

While experimenting with Jersey hosted using Grizzly, I encountered an issue where I am unable to consume and produce JSON. When making a GET request, the server returns a 500 error, and when making a POST request, it says that the media type is unsupporte ...

javajsonjerseyjersey-2.0grizzly

The JSON.parse function encounters an error in Chrome, but functions properly in Firefox

While this code snippet functions as expected on Firefox, it encounters an error on Chrome. How can this discrepancy be explained? VM317:1 Uncaught SyntaxError: Unexpected end of JSON input at JSON.parse () Script.js $(document).ready(function(){ $( ...

phpjqueryjsonajax

What is the best way to generate dynamic components on the fly in ReactJS?

Could you please guide me on: Techniques to dynamically create react components, such as from simple objects? Is it possible to implement dynamic creation in JSX as well? Does react provide a method to retrieve a component after its creation, maybe b ...

javascriptreactjs

Filtering server-side components in Next.js to create a customized list

Having been accustomed to the previous architecture of Next.js, I embarked on a new project where I am exploring the use of server and client components in the latest architecture. Specifically, I have a page dedicated to displaying race results in a tabl ...

javascriptreactjstypescriptnext.jsserver-side-rendering

New to Angular: Getting Started with NgModel Binding

Novice query: I am facing an issue with a simple input type=text element linked to ng-model="xyz.zyx", where xyz refers to an object. In my controller, I initialize this object and set the value for the property zyx as shown below: xyz { zyx: $scope.zz ...

javascriptangularjs

Fetching information from JSON file is unsuccessful

Attempting to retrieve data from a JSON source (). The goal is to extract information about each game including goals, location, and teams. However, the current code implementation seems to be ineffective. let url = "http://www.openligadb.de/api/getma ...

jsonswiftparsing

Bar Chart Data Label Problem with HighCharts

My goal is to have the label positioned outside the bar stack. I attempted to achieve this using the code below, but it seems to be inconsistent in its results. dataLabels: { enabled: true, color: '#333', ...

javascriptjquerybar-charthighcharts

Tips for effectively utilizing the display: inline property in conjunction with ng-repeat

I am struggling to create a timeline with a broken structure on my website. I suspect that the issue lies in using display:inline. When attempting to apply this to my site: https://i.stack.imgur.com/4Ur7k.png the layout gets distorted: https://i.stack.i ...

javascriptcssangularjshtml