Extjs 4網格排序後自定義函數調用

Question

我有一個Extjs 4網格與排序能力。我想在每次用戶按下排序按鈕後調用一個custum函數。 （我的網格使用分頁，它利用服務器端排序）我認爲我必須在我的自定義函數中使用store.loadPage(1)（糾正我，如果我' m wrong）

我應該在哪裏放置自定義函數？

這是我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); 
}); 

Answer 1

或者你可以使用這個：

grid.on('sortchange', function() { 
    grid.getStore().loadPage(1); 
}); 

Answer 2

忘記一切我寫道： Server Side sorting in an ExtJS GridPanel

你應該把你的自定義功能在電網事件：sortchange。

我只是重新讀你的問題 - 我以爲你有無限的分頁。
如果你的排序完成了服務器端，那麼是的，你需要調用loadPage（1）。
您還需要發送排序參數。

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

我希望這會有所幫助。

Answer 3

我只是把loadPage（1）在sortchange事件，但它使兩次服務器請求（電網提出的第一個具有自動排序參數），怎麼可能它只有一次？

Answer 4

我想出一個解決方案，我定格在商店"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); 
    } 
}); 

而且它完美的作品如此遠

Answer 5

請求發送到服務器後，sortchange事件觸發。爲解決方案看看這裏 http://www.sencha.com/forum/showthread.php?145779-Reset-page-for-paginator-on-sort-change