extjs 4.1.1 - 本地数据网格中的分页

Posted 2023-02-26

【中文标题】extjs 4.1.1 - 本地数据网格中的分页

【英文标题】：extjs 4.1.1 - Pagination in grid on local data

【发布时间】：2014-08-06 17:00:32

【问题描述】：

我对 extjs 比较陌生。我面临一个我无法解决的问题。我一直在网上搜索，但找不到答案。感谢任何帮助。

在我的代码中，我试图为网格上显示的数据添加分页。该代码对服务器进行 ajax 调用以获取数据。服务器发送的数据比需要的多。因此，客户端提取响应文本（json）的一部分，并将其显示在网格面板中。

网格可以很好地显示数据。但是分页不起作用。它总是显示“page 0 of 0”和“No data to display”。

但如果我用硬编码数据替换数据，并用硬编码数据创建存储和网格，则分页工作。所以看起来我必须在创建商店和网格时已经拥有数据。

这是简化的代码。使用 myStore1/myData1（硬编码数据）时，分页有效。将myStore1 和myData1 替换为myStore2 和myData2，在从服务器检索数据后加载，分页不起作用。

我在网上看到的所有示例都涉及硬编码数据...感谢任何见解或指针。

Ext.Loader.setConfig(
     enabled: true
    );

Ext.Loader.setPath('Ext.ux', 'ext-4.1.1/examples/ux');
Ext.require('Ext.ux.data.PagingMemoryProxy');

Ext.application(
    name: 'MS GUI',
    launch: function() 
    main();
    
);

function main() 

  itemsPerPage = 2;

  // hardcoded data
  myData1 =  ['xxx':'a1','yyy':'b1','zzz':'c1',
  'xxx':'a2','yyy':'b2','zzz':'c2',
  'xxx':'a3','yyy':'b3','zzz':'c3',
  'xxx':'a4','yyy':'b4','zzz':'c4'];

  // data to be loaded after the ajax call
  myData2 = [];



  // define model
  Ext.define('QueryResultModel', 
  extend: 'Ext.data.Model',
  fields: [
    name: 'xxx', type: 'string',
    name: 'yyy', type: 'string',
    name: 'zzz', type: 'string'
  );

  // define store1
  myStore1 = Ext.create('Ext.data.Store', 
  model: 'QueryResultModel',
  storeId: 'QueryResultStore1',
  autoLoad: false,
  pageSize: itemsPerPage, 
  data: myData,    // *** use hardcoded data here, and paging works ***
  proxy : 
    type: 'pagingmemory'
    
  );


  // define store2
  myStore2 = Ext.create('Ext.data.Store', 
  model: 'QueryResultMode',
  storeId: 'QueryResultStore2',
  autoLoad: false,
  pageSize: itemsPerPage, 
  data: ,         // *** empty data here, and once data loaded, paging does not work ****
  proxy : 
    type: 'pagingmemory'
    
  );


function createGrid()
   return Ext.create('Ext.grid.Panel', 
         title: 'Query Result',
         store: myStore1, // *** hardcoded data
         columns: [
            text: 'XXX' dataIndex: 'xxx',
            text: 'YYY' dataIndex: 'yyy',
            text: 'ZZZ' dataIndex: 'zzz'  
         ],
         dockedItem : [
            xtype: 'pagingtoolbar',
            id: 'pagingBar_id',
            store : myStore1,  // *** use hardcoded data - paging works
            displayInfo: true,
            displayMsg: 'Displaying records 0 - 1 of 2',
            displayMsg: "No data to display"
         ]

  );
 ; 


myContainer = Ext.create('Ext.container.Viewport', 
   id: 'mainPanel_id',
   layout:  type: 'border', padding: 5,
   renderTo: Ext.getBody(),
   items: [
      region: 'north',
      title: 'Whatever Title Here',
      collapsible: true,
      autoHeight: true,
      // *** other congig params here       
       , 
       
          region: 'west',
          title: 'Query Input',   
          // other config params here

          buttons : [
            
               text : 'Submit',
               id: 'submit_btn',
               listeners :  click: function() sendQuery();
            ,
            
               text : 'Reset',
               // other config parems here
            
          ]
       ,
       
          region: 'center',
          xtype:  'tabpanel',
          autoScroll: true,
          layout: 'fit',
          items : [ createGrid()]

       ,
       // other config for other regions here
   ]
 ); 


 function sendQuery() 
   // code here to make the ajax call to the server and
   // retrive the data, if success
   // load response date into myData2
   // note: the grid and pagingtoolbar are pointing to myStore2 (by replacing the myStore1)
   myStore2.loadData(myData2, false);

   // after the sendQuery() call, the paging tool bar still shows no data... while the grid is populated with 

   // none of the followings works:
   // Ext.getCmp('pagingBar_id').doRefresh();
   // Ext.getCmp('pagingBar_id').getStore().load();
   // myStore2.load(params: start:0);   
 ;

;

【问题讨论】：

在您的示例中，您永远不会将 myStore2 传递到任何网格中。如果您可以在fiddle.sencha.com/#home 重现您的问题，我可以为您查看。此外，这段代码在语法上也不正确，这意味着我无法粘贴并尝试运行它。

myData1 也是无效的 javascript。在发布问题之前，请确保您的代码在语法上是有效的

我已经在fiddle.sencha.com/#fiddle/8ia 稍微修正了你的代码，但在检查之前仍需要进一步修正

为了运行第二个场景（即使用来自服务器的真实数据），我必须在网格和停靠项中将 myStore1 替换为 myStore2（即 createGrid() 方法中的代码）。谢谢你的提议。该代码在机密系统中，我无法访问它。我将不得不在我的非类计算机上制定一个简化版本。这需要一段时间......

感谢您指出 myData1 的格式无效。这是一个错字，然后通过复制和粘贴放大。已更正。

【参考方案1】：

要将数据加载到内存代理上，您必须将数据分配给代理，然后调用store.load();参见https://fiddle.sencha.com/#fiddle/8ia

我的灵感来自http://www.sencha.com/forum/showthread.php?267955-Load-data-into-Memory-Proxy-Store

var myStoreNoData = Ext.create('Ext.data.Store', 
    model: 'QueryResultModel',
    autoLoad: false,
    pageSize: itemsPerPage,
    proxy: 
        type: 'pagingmemory'
    
);


function sendQuery() 
    myStoreNoData.proxy.data = myData;
    myStoreNoData.load();

【讨论】：

非常感谢。你让我很开心！

@ted 请单击勾选标记将此答案标记为已接受。这不仅给了我一点声望，而且向其他人表明这已经得到了满意的回答。