Integrating list items with a Sencha Touch application

Currently, I am working on a Sencha Touch application that utilizes lists. In one particular list, we have approximately 400 different items and I have included the infinite: true parameter to enhance the performance of the view.

However, I have noticed a peculiar behavior where the items seem to be overlapping with one another.

https://i.sstatic.net/vzMFO.png

This is the snippet of my code:

xtype        : 'list',
cls          : 'mweb-list',
useComponents: true,
maxItemCache: 30,
useHeaders   : false,
infinite   : true,

The issue arises when I add the infinite parameter to the configuration.

The component cls does not contain any CSS rules. Here is an overview of the extended component:

Ext.define('xx.components.list.BaseListComponent', {
  extend: 'Ext.dataview.List',
  xtype : 'mwebBaseListComponent',

  config: {
    cls          : 'mweb-list',
    useComponents: true,
    emptyText    : '',
    loadingText  : '',
    useHeaders   : false
  }
});

Any insights or suggestions would be greatly appreciated!

Thank you for your help in advance.

javascriptsencha-touch

Answer №1

To optimize your layout, consider implementing the flag variableHeights:true.

xtype        : 'list',
cls          : 'mweb-list',
useComponents: true,
maxItemCache: 30,
useHeaders   : false,
infinite   : true,
variableHeights: true,

It seems that your mweb-list configuration is tailored for standard lists rather than infinite ones. If enabling variableHeights does not resolve the issue, please share your CSS code.

CSS:

.mweb-list {
    --> insert your CSS properties here
}

Answer №2

Utilizing the setting infinite: true, gives you the ability to utilize the itemHeight attribute to determine the height (measured in pixels) of each individual item within the list.

xtype        : 'list',
cls          : 'custom-list',
useComponents: true,
maxItemCache: 50,
useHeaders   : false,
infinite     : true,
itemHeight   : 100

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

Can PHP retrieve data when the form submit function is overridden with AJAX?

I have customized the .submit function of a form on this webpage. It is being loaded inside the #mainContent in an "index.php" and I want the Submit button to only replace this #mainContent. My goal is to retrieve data from this form and send it to a .php ...

javascriptphphtmlajaxjquery-mobile

Using JavaScript to extract the metadata of an image from a remote location

Is there a way to extract XMP metadata from a JPEG file using JavaScript? I came across a method for doing it in PHP (How can I read XMP data from a JPG with PHP?) which can be adapted for JavaScript using AJAX. However, the issue arises when trying to acc ...

javascriptajaxjpegxmp

Integrate a PHP variable into an HTML/JavaScript statement that was previously transformed from PHP

Incorporated within this PHP variable is a mix of HTML and JavaScript code. My task is to enhance it by adding another PHP variable. Specifically, I have a PHP variable denoted as $user->user_email. How can I seamlessly integrate this variable into th ...

javascriptphphtmlvar

How to Implement Click Actions on Elements in AngularJS

Just starting out with angularjs and I have a scenario with jQuery. handleClick(); function handleClick() { var doubleClick = false; $('#text span.word').on('click', function() { var that = this; setTimeout(funct ...

javascriptjqueryangularjs

Struggling with incorporating a lightbox within an accordion feature in an .html file

I'm currently attempting to integrate this lightbox into this accordion feature. Individually, I've managed to get both elements up and running smoothly. However, when trying to combine them on the same page (regardless of nesting one inside the ...

javascriptjqueryhtmlaccordionlightbox

Receiving data through a POST request in Node

I am currently working on a project where I need to send an email via a POST request to my node/express server. However, I am facing difficulties in passing the email details through the request and accessing them on the node side. Here is what I have tri ...

javascriptnode.jsexpress

What could be causing my PDO query to not run when using fetch()?

I am attempting to execute an update statement using a button onclick event, but I am encountering difficulties when trying to run it with the fetch api. Here is the JavaScript function I have: const changeProductAvailability = (id,status) => { const ...

javascriptphpajaxpdofetch-api

What is the process for transforming data objects into arrays of objects?

Currently, I am faced with a situation where I have one array containing 6 category names and 6 arrays of objects, each containing 5 objects related to those categories. I am seeking the most efficient way to restructure these data sets so that I end up wi ...

javascriptarraysjavascript-objects

Help with Web Scraping: Setting up Noodle.js and Using jQuery

After successfully installing noodle.js using npm install, my code looks like this. However, when I try to run the file (noodleTest.js) in the terminal with the command 'node noodleTest.js', I encounter the error message: jQuery.getJSON is not a ...

javascriptjqueryjsonajaxnode.js

By only toggling the "checked" state of the radio button that's been selected, we are simultaneously removing the attribute for all other buttons

I'm feeling overwhelmed and struggling to understand the reasoning behind this. There are 4 radio buttons (0) <input type="radio" name="radioGroup" checked="checked"> ( ) <input type="radio" name="radioGroup"> ( ) <input type="radio" ...

javascriptasp.net

The website flickers in and out as it loads

My site keeps flashing whenever it loads. Despite trying the solutions recommended in this stackoverflow post, I have had no success. Every page on my website loads a nav.html file using this code: $.get("nav.html", function(data){     $("#nav-placeho ...

javascriptjqueryhtmlcss

What is the best way to strip out a changing segment of text from a string?

let: string str = "a=<random text> a=pattern:<random text (may be fixed length)> a=<random text>"; In the given string above, let's assume that a= and pattern are constants. It is possible that there may or may not be a ...

javascriptregextypescriptstringreplace

Does creating a form render the "action" attribute insignificant in an AJAX environment?

When submitting forms exclusively through AJAX, is there any advantage to setting the action attribute at all? I have yet to come across any AJAX-form guides suggesting that it can be left out, but I fail to see the purpose of including it, so I wanted t ...

javascripthtmlajaxformsajaxform

Can you provide some guidance on accessing HTTP headers while using Promises to make AJAX requests?

Currently, I am working on resolving jQuery ajax requests using bluebird.js and I have found it quite challenging to access the HTTP headers of the request. Here is a snippet of the code I am working with: Promise.resolve($.get(...)).then(function(data){ ...

javascriptjqueryajaxpromisebluebird

Having trouble retrieving object values from the request body during a POST request in [Node.js, MySQL]

I am currently developing a management system and working on creating POST requests for the API to add a new city to the database. However, I am facing an issue where instead of receiving the correct values from the request's body, I am getting "undef ...

javascriptmysqlnode.jsexpressrequest

Integrate JavaScript date into the gulp-rev workflow

I have been encountering an issue while using the gulp-rev plugin to add a revision of my app/html page generated by the Yeomann webapp generator. My workflow involves zipping the app and then adding a revision, but I am having trouble replacing the hash t ...

javascriptnpmgulptask

What is the best way to convert my query for use with MongoDB in a Node.js application?

Here is the structure of my MongoDB query: db.test.findOne({"User.David":{$elemMatch:{"action":"todo","status":"Done"}}}) I am currently developing a node.js API that allows users to retrieve documents based on username and status. Below is my attempt a ...

javascriptnode.jsmongodbmongoose

The functionality of WrapAll is not functioning properly in React JS

$('p').wrapAll($('<div class="wrapper"></div>')); .wrapper { background: #EEE; margin: 10px; padding: 5px; border: 1px solid black; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery. ...

javascriptjqueryreactjs

What is the process for exporting all sub-module types into a custom namespace?

When we import all types from a module using a custom-namespace, it appears to work smoothly, for example: import * as MyCustomNamespace from './my-sub-module' We are also able to export all types from a module without creating a new namespace, ...

javascripttypescripttypesnode-modules

Dynamically update a directive array in Vue.js based on real-time changes

In my Vue project, I have an array defined in the data() method that is populated through a custom directive in its bind hook. Here's the code snippet: import Vue from 'vue' export default { el: '#showingFilters', name: "Filte ...

javascriptarraysvue.jsvuejs2