如何解决ExtJS 4.1组合框pageSize的bug

How can solve ExtJS 4.1 Combobox pageSize bug?

本文关键字:组合 pageSize bug ExtJS 何解决 解决      更新时间:2023-09-26

我们有一个ExtJS v4.1组合框,我们已经将它绑定到一个存储,并设置其pageSize配置如下:

var myStore = Ext.create('Ext.data.Store', {
    model: 'User',
    remoteFilter: true,
    remotePaging: true,
    autoLoad: true
    proxy: {
        type: 'ajax',
        url: '/users.json',
        reader: {
            type: 'json',
            root: 'users'
        }
    },
    pageSize: 50,                  //   <= store pageSize
});
Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose',
    store: myStore,
    queryMode: 'remote',
    displayField: 'Name',
    valueField: 'Id',
    pageSize: 20                   //   <= combobo pageSize
});

正如文档中所说,组合框的pageSize属性应该用于过滤发送到服务器的ajax查询,当queryMode='remote'。但是我们看到的是相反的,它只被用来在组合框的底部显示分页工具栏(文档的第一条注释是这样说的)。

但是在这个特定的情况下,我们真正需要的是重写存储的pageSize属性,并使combobox的pageSize属性用于过滤ajax请求。

我们如何在组合框中实现/扩展这样的功能?我们如何在combobox中覆盖商店的pageSize属性?

pageSize在comboBox实际上是一个真/假值,尽管文档。

在javascript中,如果它是0,分页工具栏是关闭的,否则是打开的。

这是一个共享存储,还是它只是为组合框?

如果是共享的,那么您将需要保存存储的页面大小,必要时更改它的组合,然后再设置它:

            {
                xtype: 'combobox',
                width: 350,
                store: new MyStore(),
                fieldLabel: 'Label',
                pageSize: 2,
                listeners:{
                    beforequery:function(queryEvent){
                        var combo = queryEvent.combo;
                        var store = combo.getStore();
                        var oldPageSize = store.pageSize;
                        store.on('load', function(){
                            this.pageSize = oldPageSize;
                        });
                        store.pageSize = combo.pageSize;
                    }
                }
            }

另一种方法是,在实例化时向存储中添加参数/config。我是这样做的

store: new Ext.create('MyStore',{pageSize:20}),
pageSize: true