2

そこで、グリッドから返された行 (レコード) の数を表示しようとしています。コードは次のとおりです。

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'}

    ]

});

4

4 に答える 4

3

ページング ツールバーを追加して、プロパティ displayInfo および displayMsg を使用することができます。このコードを試してください:

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

于 2014-02-05T16:57:08.590 に答える
1

すでに述べたように、使用する前にストアがロードされるまで待つ必要がありますgetCount。あなたの例のようなメモリストアを実際に使用する場合を除きますが、そのユースケースでは動的なレコード数を表示したくないと思います...

そのため、ストアのイベントをリッスンし、loadテキスト アイテムを更新する必要があります。ロード イベントは、ストアがロード、リロードなどされるたびに発生します。これは、グリッドがページングされているか、フィルタリングが許可されている場合などに複数回発生する可能性があります。つまり、レコードの数が実際のコンテンツと同期されていることを意味します。店の。良い。

では、そのリスナーをインストールする方法は? この種の処理を配置する非常に一般的な場所の 1 つinitComponentは、コンポーネントのメソッドです。

これがコードです。オーバーライドの短期集中コースのコメントを参照してくださいinitComponent(トピックに関する講義については、別の回答を参照してください)。

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-25T22:27:43.303 に答える