1

我有一个Extjs 4具有排序功能的网格。每次用户按下排序按钮后，我想调用一个 custum 函数。

在我的自定义函数中，我想导航到我的网格的第一页（我的网格使用分页并且它利用服务器端排序）我认为我必须store.loadPage(1)在我的自定义函数中使用（如果我错了，请纠正我）

我应该把我的自定义函数放在哪里？

这是我的Ext.OnReady()功能：

Ext.onReady(function() {
Ext.tip.QuickTipManager.init();

var url = {
    local:  'grid-filter.json',  // static data file
    remote: 'grid-filter.php'
};
var paging = true;
var encode = false;
var local = false;
Ext.define('UserDirectoryDataModel', {
    extend : 'Ext.data.Model',
    fields : [ 'uname', 'fname', 'lname', 'postcode', 'mail', {
        name : 'pass'
    }, 'hasAccess', 'isActive', 'lastVisit' , 'deleteUser'],
    idProperty : 'uname'
});

var itemsPerPage = 20;   

var store = Ext.create('Ext.data.Store', {
    pageSize : itemsPerPage,
    autoLoad: false,
    local: false,
    autoDestroy: true,
    model : 'UserDirectoryDataModel',
    autoSync : true,
    sortOnLoad : true,
    remoteSort:true,
    sorters : {
        property : 'uname',
        direction : 'ASC'
    },
    listeners: {
        beforeload: function(){
            store.loadPage(1);
        }
    },

    proxy : {
        type : 'ajax',
        url: (local ? url.local : url.remote),
        api : {
            read : 'read.php',
            update : 'update.php'

        },
        reader : {
            type : 'json',
            root : 'users',
            successProperty : 'success',
            totalProperty : 'totalCount'
        },
        writer : {
            type : 'json',
            writeAllFields : true,
            encode : false,
            root : 'users'
        },
        afterRequest : function(request, success) {
            if (request.action == 'update') {
                if (success) {
                    Ext.MessageBox.alert('alert',
                            'data updated!');

                }
            }

        }
    }
});

store.load({
    params:{
        start:0,
        limit: itemsPerPage
    }
});


 var filters = {
    ftype: 'filters',
    encode: encode, // json encode the filter query
    local: local,   // defaults to false (remote filtering)
    filters: [
        {
        }
    ]
};
var createColumns = function (finish, start) {

    var columns = [ {
        text : "username",
        dataIndex : 'uname',
        width : 150,
        filterable: true,
        align : 'right'
    }, {
        text : "name",
        dataIndex : 'fname',
        width : 150,
        align : 'right',
        hidden : false,
        sortable : true,
        filterable: true,
        editor : {
            xtype : 'textfield',
            allowBlank : false
        }
    }, {
        text : "last name",
        dataIndex : 'lname',
        width : 150,
        align : 'right',
        sortable : true,
        filterable: true,
        editor : {
            xtype : 'textfield',
            allowBlank : false
        }
    }, {
        text : "PostalCode",
        dataIndex : 'postcode',
        width : 110,
        align : 'right',
        sortable : true,
        filterable: true,
        editor : {
            xtype : 'textfield',
            allowBlank : false
        }
    }, {
        text : "email",
        dataIndex : 'mail',
        width : 200,
        align : 'right',
        sortable : true,
        filterable: true,
        editor : {
            xtype : 'textfield',
            allowBlank : false
        }
    }, {
        text : "password",
        width : 150,
        align : 'right',
        sortable : false,
        filterable: true,
        hidden : true,
        dataIndex : 'pass',
        editor : {
            xtype : 'textfield',
            inputType : 'password',
            allowBlank : true
        }
    }, {
        text : "access to system",
        dataIndex : 'hasAccess',
        renderer:function(value){
            if(value[0]=="1"){
                return "<a href=\"?action=access&type=revoke&cn="+value.substring(1,value.length)+"\">has</a>";
            }else{
                return "<a href=\"?action=access&type=grant&cn="+value.substring(1,value.length)+"\">doens't have</a>";
            }
        },
        width : 100,
        align : 'center',
        sortable : false,
        filterable: false
    }, {
        text : "active",
        dataIndex : 'isActive',
        renderer:function(value){
            if(value==null)
                return;
            if(value[0]=="1"){
                return "<a href=\"?action=activation&type=grant&cn="+value.substring(1,value.length)+"\">no</a>";
            }else if(value[0]=="0"){
                return "<a href=\"?action=activation&type=revoke&cn="+value.substring(1,value.length)+"\">yes</a>";
            }else if(value[0]=="2"){
                return "Not in portal!";
            }
        },
        width : 100,
        align : 'center',
        sortable : false,
        filterable: false
    }, {
        text : "last visit",
        dataIndex : 'lastVisit',
        width : 120,
        hidden : true,
        align : 'right',
        sortable : true,
        filterable: true
    }, {
        text : " ",
        dataIndex : 'uname',
        renderer:function(value){
            return "<a href=\"?action=delete&type=deleteUser&cn="+value+"\">delete</a>";
        },
        width : 120,
        hidden : true,
        align : 'right'
    } ];

    return columns.slice(start || 0, finish);
};

var pluginExpanded = true;
var grid = Ext.create('Ext.grid.Panel', {
    border: false,
    width : 1200,
    height : 620,
    title : '',
    store: store,
    disableSelection : false,
    seltype : 'rowmodel',
    loadMask : true,
    viewConfig : {
        id : 'gv',
        trackOver : false,
        stripeRows : false,
        plugins : [ {
            ptype : 'preview',
            bodyField : 'excerpt',
            expanded : true,
            pluginId : 'preview'
        } ]
    },
    columns: createColumns(),

    features: [filters],
     dockedItems: [Ext.create('Ext.toolbar.Paging', {
        dock: 'bottom',
        store: store
    })],
    plugins : [ Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToEdit : 2
    }) ],
    renderTo : 'userdatagrid'
});
grid.child('pagingtoolbar').add([
           {
        text: 'show filters',
        handler: function () {
            var data = Ext.encode(grid.filters.getFilterData());
            Ext.Msg.alert('show filters',data);
        } 
    },{
        text: 'delete filters',
        handler: function () {
            grid.filters.clearFilters();
        } 
    }
]);

store.loadPage(1);
});
4

5 回答 5

3

或者你可以使用这个：

grid.on('sortchange', function() {
    grid.getStore().loadPage(1);
});
于 2012-09-09T12:20:23.320 回答
0

请求发送到服务器后触发 sortchange 事件。对于解决方案看这里 http://www.sencha.com/forum/showthread.php?145779-Reset-page-for-paginator-on-sort-change

于 2013-09-30T20:24:44.603 回答
0

忘记我写的一切： ExtJS GridPanel 中的服务器端排序

您应该将自定义函数放在网格事件中：sortchange。

我刚刚重新阅读了您的问题-我以为您有无限分页。
如果您的排序是在服务器端完成的，那么是的，您需要调用 loadPage(1)。
您还需要发送排序参数。

listeners: {
            sortchange: function(){
                var grid = Ext.ComponentQuery.query('my-grid-alias')[0];
                grid.getStore().loadPage(1);
            }
        }

我希望这有帮助。

于 2012-09-09T12:04:32.063 回答
0

我想出了一个解决方案，我"remoteSort:false"在商店里设置了

"sortchange: {fn:function(){
    var time = (new Date()).getTime()/1000;
    // after {remoteSort:false} is set, sortchange event will be fired twice when column header is clicked, so I had to set a parameter for time record
    if('undefined' == typeof(this.last_sort_time) || this.last_sort_time+1 < time){
        this.getStore().loadPage(1);
        this.last_sort_time = time;
    }
}, scope:this}"

在网格中。但它不能正常工作，因为接收到的数据在显示之前由网格重新排序

最后，我这样解决问题：

Ext.override(Ext.grid.column.Column, {
    doSort:function(){
        var ds = this.up('tablepanel').store;
        ds.currentPage = 1;
        this.callParent(arguments);
    }
});

到目前为止它运行良好

于 2013-03-26T02:38:58.190 回答
0

我只是在 sortchange 事件中放了一个 loadPage(1)，但它发出了两次服务器请求（网格自动使用排序参数制作了第一个），怎么可能只有一次？

于 2013-03-26T02:22:16.690 回答