Note that there are some explanatory texts on larger screens.

plurals
  1. POPagingScroller in ExtJs 4.1 MVC grid implementation not triggering ajax request
    primarykey
    data
    text
    <p>I am trying to figure out a basic implementation of infinite scrolling in a ExtJs 4.1.0 grid. </p> <p>I am working off this example <a href="http://ext4all.com/post/extjs-4-1-grid-infinite-scroll-in-mvc" rel="nofollow">http://ext4all.com/post/extjs-4-1-grid-infinite-scroll-in-mvc</a> and at this point my code is practically identical to the example.</p> <p>When my page loads, the grid is filled with the first page of data as the first ajax request fires and works as expected. However, when I scroll down to the bottom of the grid, nothing happens... I am expecting to see an ajax request fire, grabbing additional data (as in the example).</p> <p>Any ideas?</p> <p>Here is my code:</p> <p><strong>HTML</strong></p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;link rel="stylesheet" type="text/css" href="./extjs-4.1.0/resources/css/ext-all.css"&gt; &lt;link rel="stylesheet" type="text/css" href="./styles.css"&gt; &lt;script type="text/javascript" src="./extjs-4.1.0/ext-all-debug.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="./test-scrolling.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="page"&gt; &lt;header&gt; &lt;div class='wrap'&gt; &lt;h1&gt;Test&lt;/h1&gt; &lt;div class='clear'&gt;&lt;/div&gt; &lt;/div&gt; &lt;/header&gt; &lt;div class="content"&gt; &lt;div class="wrap"&gt; &lt;div id="main"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>Javascript</strong></p> <pre><code>Ext.define('AP.model.Log', { extend: 'Ext.data.Model', fields: [ 'Id', 'ProcessId', 'IndexRequest', 'AssetIndexStart', 'AssetIndexEnd', 'StartDate', 'EndDate'] }); Ext.define('AP.store.Log', { extend: 'Ext.data.Store', model: 'AP.model.Log', autoLoad: true, remoteSort: true, buffered: true, pageSize: 100, proxy: { type: 'ajax', url: 'http://localhost/...', limitParam: 'limit', reader: { type: 'json', root: 'Log', successProperty: 'Success' } } }); Ext.define('AP.view.Log', { extend: 'Ext.grid.Panel', alias: 'widget.log', title: 'Log', store: 'Log', initComponent: function () { this.columns = [{ header: 'Index Start', dataIndex: 'AssetIndexStart', flex: 1 }, { header: 'Index End', dataIndex: 'AssetIndexEnd' }, { header: 'Start Date', dataIndex: 'StartDate' }, { header: 'End Date', dataIndex: 'EndDate' }]; this.callParent(arguments); } }); Ext.define('AP.controller.Log', { extend: 'Ext.app.Controller', stores: ['Log'], models: ['Log'], views: ['Log'], init: function () {} }); Ext.Loader.setConfig({ enabled: true }); Ext.application({ name: 'AP', appFolder: 'app', controllers: [ 'Log'], launch: function () { Ext.widget('log', { title: 'Log', width: 600, height: 400, renderTo: 'main' }); } }); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload