Combining ExtJS Paging with Dropdown Selection

Having an issue with a combo box created using the ExtJS framework. The pagination feature is not working correctly. Can anyone provide assistance with this?

var store =   new Ext.data.ArrayStore({
    fields: ['id'],
    pageSize:1,
    data  : [
      ['15'],       ['25'],       ['225'],       ['325'],       ['525'],       ['625'],       ['125'],       ['8725'],       ['825'],       ['1825'],       ['3825'],       ['4825'],       ['67825'],       ['82725'],       ['84725'],       ['86725'],       ['87525'],       ['87625'],       ['872665'],       ['235'],       ['235'],       ['225'],       ['245'],       ['550']
    ]
  });
var combo = new Ext.form.ComboBox({
  name : 'perpage',
  width: 40,
  mode : 'remote',
  value: '1',
  store:       store, //the store you use in your grid

  pageSize:true,
  listWidth     : 1,
  width         : 600,
  triggerAction : 'all',
  displayField  : 'id',
  valueField    : 'id',
  forceSelection: true
});


var window = Ext.create('Ext.window.Window', {
    width: 650,
    height: 100,
    items: [combo]
}).show();

All 24 records are displayed on each page. https://i.sstatic.net/cpytY.png

The image shows that all 24 records are shown on every page. However, the expectation is to display only one record per page.

Answer №1

The dropdown menu will always display all the data stored in the memory. Typically, the memory store does not contain all the data from the server when pagination is enabled. In this case, the proxy takes care of managing the data.

If you try using a MemoryProxy with enablePaging and specific data values, observe the following:

var customStore =   new Ext.data.ArrayStore({
    fields: ['id'],
    pageSize:1,
    proxy: {
        type:'memory',
        enablePaging:true,
        data  : [
            ['15'], ['25'], ['225'], ['325'], ['525'], ['625'], ['125'], ['8725'], ['825'], ['1825'], ['3825'], ['4825'], ['67825'], ['82725'], ['84725'], ['86725'], ['87525'], ['87625'], ['872665'], ['235'], ['235'], ['225'], ['245'], ['550']
        ]
    }
});

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

Transferring Data from Controller to HTML in AngularJS Version 1

Recently, I started working with angularjs on a new project that involves three main HTML files. The first file is index.html, which contains the ng-view directive. The second file is home.html, where various products are displayed from a database. Each pr ...

Here's a method for transferring data from one array to another: when there is existing data in the

Although this may seem simple to some, I have been struggling with it for hours without any success. If I have the following data in an array: var tDataValues = { id: "TenantID", text: "FullName", username: "Username", cnic: 'CNIC&ap ...

Comparison between a Typescript optional field and a field that has the potential to be undefined

Can you clarify the contrast between an optional field and a T | undefined field? export interface Example { property1: string | undefined property2?: string } ...

Vue and Axios encountered a CORS error stating that the 'Access-Control-Allow-Origin' header is missing on the requested resource

I've encountered the error above while using Axios for a GET request to an external API. Despite consulting the Mozilla documentation, conducting thorough research, and experimenting with different approaches, I haven't made any progress. I&apos ...

Creating an Extjs model for a complex nested JSON structure

Take a look at this JSON structure { "id": 123, "name": "Ed", "orders": [ { "id": 50, "total": 100, "order_items": [ { "id": 20 ...

The functionality of Material UI Slider components becomes less responsive when enclosed and rendered in JSX

Why is the Material UI's Slider not working smoothly when called in JSX as shown below? SliderAndValue.js import { Slider } from "@material-ui/core"; import { useState } from "react"; import "./styles.css"; export const ...

How can I retrieve the PHP response once a successful upload has occurred using DropzoneJS?

I am currently in the process of integrating Dropzone into my website. My goal is to capture the "success" event and extract specific information from the server response to add to a form on the same page as the DropZone once the upload is finished. The k ...

Trying to dynamically filter table cells in real time using HTML and jQuery

During my search on Stack Overflow, I successfully implemented a real-time row filtering feature. However, I now require more specificity in my filtering process. Currently, the code I am using is as follows: HTML: <input type="text" id="search" place ...

Include two arguments when making a $http POST request

I am facing a situation where a single property can have multiple images, but each image can only be assigned to that one property (one-to-many relationship with propertyId as foreign key). In the HTML, I am fetching the propertyId and passing it along wi ...

Manually detecting changes in the query string using AngularJS

My AngularJS application includes an edit form with a routing URL like app/edit/:id. When I navigate to app/edit/5, I am able to edit the object with ID 5. However, if I manually change the URL to app/edit/6, the application loads the object with ID 6 in ...

Arrange the grid in a pleasing manner

I'm really struggling with this issue. In my current setup, I have a Grid container that holds two separate grids - one for a textfield and another for a checkbox. Unfortunately, I can't seem to get them to align properly. <Grid container& ...

How can I keep dragging objects on Raphael JS Freetransform without showing the handles?

Hey there! Currently, I am immersed in a new project that hinges on the utilization of Raphael JS alongside the Raphael.Freetransform plugin. The plugin has been performing admirably with smooth transitions so far. Nonetheless, upon utilizing the hideHandl ...

Highlight main title in jQuery table of contents

I have successfully created an automatic Table of Contents, but now I need to make the top heading appear in bold font. jQuery(document).ready(function(){ var ToC = "<nav role='navigation' class='table-of-contents vNav'>" + ...

Troubleshooting: PHP AJAX Image Upload Issue - Images Not Being Uploaded

I am having an issue with my code. Although it doesn't show any errors in the console, clicking the upload button does not trigger any action. Following a tutorial, I tried to send a post request to itself, but the image is neither uploaded to the des ...

Refreshingly modernizing SVG in Angular

I've been facing a challenge in my Angular application where I am trying to dynamically add paths to an SVG element within an HTML file. The issue is that even though the paths are getting added to the DOM, they are not showing up in the browser when ...

Javascript for Cordova utilizing WebSocket and incorporating client side certificates

I am looking to establish a secure SSL/TLS connection between my client and server, with only a specific authorized client allowed to connect. To achieve this, I have generated a client certificate using OpenSSL on the server for mutual authorization. The ...

Dropdown with multiple selections organized in a hierarchical structure

I am in need of the following : Implement a drop-down menu that reflects hierarchical parent-child relationships. Include a checkbox for each node to allow for selection. If all child nodes are selected, their parent node should be automatically ch ...

Looking for assistance in showcasing information retrieved from an external API

I've been working with an API and managed to fetch some data successfully. However, I'm having trouble displaying the data properly in my project. Can anyone provide assistance? Below is a screenshot of the fetched data from the console along wit ...

`Integrate Passport Azure AD authentication into your GraphQL Server's Context`

Seeking assistance from experienced individuals to tackle some async JavaScript issues. I am trying to secure a GraphQL server using the Passport library and the passport-azure-ad strategy. The validation of incoming Access Tokens seems to be working fine ...

Exploring the React Hook lifecycle methods of componentWillReceiveProps and componentDidUpdate

I am facing two main challenges: Despite the React guideline discouraging the use of derived state, there are still certain edge cases where it is necessary. In the context of a functional component with React Hook, what would be the equivalent implemen ...