在我的Gridpanel上只显示10行

时间:2017-04-08 20:03:01

标签: extjs extjs5

我正在使用Ext.js构建我的第一个平台,我正在试图弄清楚如何为Gridpanel指定行数限制。我想只显示商店的最后10个值

目前,我正在接收商店中的所有值,并且我正在使用此值填充网格,

我可以用这个:

gridStore.remove(gridStore.getAt(i))

但我无法从商店中删除数据,因为我正在使用此商店在地图上加载一些折线,所以我必须隐藏行而不是从商店中删除数据。

我的商店:

Ext.define('ES.store.Timeline', {
    extend: 'Ext.data.Store',
    alias: 'store.timeline',
    storeId: 'timeline',
    fields: [
        'vid', 'time', 'lat', 'lng', 'address', 'dir', 'vel', 'hidden'
    ],
    pageSize: 500,
    autoSync:true,
    sorters: [
            {
                property: 'time',
                direction: 'DESC'
            }
        ],
    data: {
        query: []},

    proxy: {
        type: 'sessionstorage',
        id: 'sessionTimeline',
        reader: {
            type: 'json',
            rootProperty: 'query'
        }
    },
    filters: [{ property: 'hidden', value: false }]
});

我的网格

Ext.define('ES.view.Layout.Menu.Menu', {

    extend: 'Ext.grid.Panel',
    alias: 'widget.timelineBar',
    controller: 'menu',
    viewModel: 'menu',
    pageSiz: '10',
    id: 'timelineBar',
    autoScroll: true,
    title: 'Timeline',
    store: {
        type: 'timeline'
    },

    columns: {
        border: false,
        defaults: {
            hoverCls: ''
        },

        items: [{ ...
        }]
    }
});

谢谢

3 个答案:

答案 0 :(得分:2)

pageSize是商店的属性,而不是网格(您的代码中有错字 - pageSiz)。

我认为您可以将memory proxyenablePaging一起使用,而不是使用sessionstorage代理。您也可能需要Ext.toolbar.Paging

选中fiddle

答案 1 :(得分:1)

您还可以使用连锁商店,以确保不更改主商店。

在页面的ViewModel中,您可以使用如下代码:

initConfig: function(instanceConfig) {
    var me = this,
        config = {
            stores: {
                MainStore: {
                    storeId: 'MainStore',
                    model: ...,
                    proxy: {
                        ...
                    })
                },
                LastUsed: {
                    autoDestroy: true,
                    source: 'MainStore',
                    // paging doesn't work on chained store
                    filters: [
                        function(record) {
                            let store = me.getStore('LastUsed'),
                                recordIndex = store.getRange().indexOf(record),
                                lastUsedCount = 10;

                            if((recordIndex+1) > lastUsedCount) {
                                return false
                            }
                            return true;
                        }
                    ]
                }
            }
        };
    if (instanceConfig) {
        me.getConfigurator().merge(me, config, instanceConfig);
    }
    return me.callParent([config]);
}

答案 2 :(得分:0)

使用store.if的 pageSize 属性,如果只显示10条记录。

但是如果你想要显示最后10条记录,那么你必须通过过滤器。

typedef struct nodo {
  int v;
  struct nodo *left, *right;
} Nodo;

Nodo **path(Nodo *a, int v, int *p) {
  (*p)++;
  Nodo **r = NULL;
  if (a == NULL) {
    return NULL;
  }
  if (a->v == v) {
    r = (Nodo**)malloc((*p)*sizeof(Nodo*));
    r[(*p)-1] = a;
    return r;
  }

  else if (a->v < v) {
    Nodo **r = path(a->right, v, p);
    r[(*p)-1] = a;
    return r;
  }
  else if (a->v > v) {
    Nodo **r = path(a->left, v, p);
    r[(*p)-1] = a;
    return r;
  }
  return r;
}
相关问题