显示网格中的行数 - Extjs

所以我试图显示从网格返回的行数（记录）。下面的代码：（？或存储）显示网格中的行数 - Extjs

Ext.define('AM.view.user.List' ,{ 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.userlist', 
    title: '<center>Data Management</center>', 
    store: 'Users', 
    dockedItems: [{ 
     xtype: 'toolbar', 
     dock: 'bottom', 

    items: [ 
     { xtype: 'tbtext', text: 'Number of Records\:' + ***code that will return number of records*** }, 
     { xtype: 'tbfill' }, 
     { text: 'Print' }, 
     { text: 'Export' } 
    ] 
}], 
...

我不知道如何使用getCount将（）方法从该网格返回的行数。有任何想法吗？

继承人：我的商店：

Ext.define('AM.store.Users', { 
    extend: 'Ext.data.Store', 
    model: 'AM.model.User', 
    fields: ['field1', 'field2', 'field3'], 
    data: [ 
     {field1: 'Data 1', field2: 'Data 2', field3: 'Data 3'}, 
     {field1: 'Data 1', field2: 'Data 2', field3: 'Data 3'}, 
     {field1: 'Data 1', field2: 'Data 2', field3: 'Data 3'} 

    ]

}）;

来源

2013-07-25 Clay Banks

是否有任何下面为你工作的答案？这仍然没有解决？ – Reimius

假设您的商店被加载之前网格渲染，这将可能工作：

Ext.data.StoreManager.lookup("Users").getCount();

如果存储动态加载，您将需要一个事件附加到商店的负载事件来更新您的网格，如果上面的代码不起作用，我可以帮助你。

来源

2013-07-25 18:03:59 Reimius

我会在哪里放置该代码？它告诉我，当我试图实现它时，它是不确定的。 –

我们可以看到您用来创建商店的代码吗？ – Reimius

它现在更新 –

您将无法动态执行此操作，它会自行更新，因此您必须在加载商店时使用占位符并更新面板。

{ xtype: 'tbtext', itemId: 'numRecords' }

然后：

listeners: { 
    render: function(store) { 
     store.on('load', function(records) { 
      var count = records.length; //or store.getTotalCount(), if that's what you want 
      grid.down('#numRecords').setText('Number of Records: ' + count); 
     });  
    } 
}

来源

2013-07-25 18:05:32 kevhender

我会如何将它融入我的代码？ –

你可以把它放在网格的渲染监听器中。看到我编辑的答案。 – kevhender

@kevhender我不禁感到自己有点“偷”了你答案的肉，我很抱歉。但在我看来，OP显然是一个完整的代码示例，所以我希望我已经为你节省了大量的编辑，而这反过来又会拯救我的业力...... – rixo

因为它已经说过，你必须等待商店使用getCount之前加载。除了在这种情况下，你真的会使用像你的例子那样的内存商店，但我怀疑你想要显示该用例的动态记录数...

所以，你必须听为商店的load事件，然后更新您的文本项目。每当商店被加载，重新加载等时，加载事件都会被触发，如果您的网格被分页或允许过滤等等，这可能会多次出现。这意味着我们的记录数量将与实际内容保持同步的商店。好。

现在，如何安装该监听器？进行这种处理的一个非常常见的地方在于组件的initComponent方法。

这是代码。请参阅覆盖initComponent的速成课程的注释（有关该主题的讲座，请参阅another answer）。

Ext.define('AM.view.user.List' ,{ 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.userlist', 
    title: '<center>ECRIS-MetaData Management</center>', 
    store: 'Users', 
    dockedItems: [{ 
     xtype: 'toolbar', 
     dock: 'bottom', 

     items: [ 
      // Give an itemId to this component to make it easy to 
      // reference later. 
      { xtype: 'tbtext', text: 'Loading...', itemId: 'recordNumberItem' }, 
      { xtype: 'tbfill' }, 
      { text: 'Print' }, 
      { text: 'Export' } 
     ] 
    }], 

    initComponent: function() { 
     // We're overriding an existing method, so that's very important to call 
     // the parent method, or the component will break in awful sufferings 
     this.callParent(arguments); 

     // I'm putting the code *after* callParent, so that the store is available 

     var store = this.getStore(), 
      // Using ComponentQuery to retrieve the text item 
      textItem = this.down('#recordNumberItem'); 

     // Using `mon` instead of `on` for better memory management (the listener 
     // will be removed from the store automatically when the component is 
     // destroyed). 
     this.mon(store, 'load', function() { 

      // We're left with the easy part... 
      textItem.setText("Number of records: " + store.getCount()); 
     }); 
    } 

    // ... 

});

来源

2013-07-25 22:27:43 rixo

你可以尝试添加分页工具栏和使用属性displayInfo & displayMsg。试试这个代码：

bbar : { xtype : 'pagingtoolbar', displayInfo: true, store:'your store', displayMsg : 'Total rows {2}'// defaultvalue = 'Displaying {0} - {1} of {2}' }

来源

2014-02-05 16:57:08 abdelali

显示网格中的行数 - Extjs

回答

相关问题