Extjs treeGrid分页实例

Extjs treeGrid分页实例，项目中用到，拿出来跟大家分享一下，主要是通过两个store实现。

ProTreeGrid = Ext.extend(Ext.tree.Panel, {_baseParam : {process : '项目立项',isShow : 'true',start : 1},constructor : function(_config) {if (_config == null)_config = {};Ext.apply(this, _config);this.store1 = Ext.create('Ext.data.JsonStore', {autoLoad : true,pageSize : basicConstant.LIMIT,proxy : {type : 'ajax',url : "xmgl/pro-info-manage!page.action",extraParams : this._baseParam,reader : {type : 'json',root : 'rows',totalProperty : "totalCount"}},model : 'ProInfo'});this.store = Ext.create('Ext.data.TreeStore', {model : 'ProInfo',proxy : {type : 'ajax',url : 'xmgl/pro-info-manage.action'},folderSort : true,listeners : {'beforeload' : {fn : function(_s, _op, _e) { this._baseParam.limit = basicConstant.LIMIT;_s.proxy.extraParams = this._baseParam;},scope : this}}});this['selModel'] = Ext.create('Ext.selection.TreeModel', {mode : 'SINGLE',listeners : {'selectionchange' : {fn : this.selectionChangeHandler,scope : this}}});this['columns'] = [ {xtype : 'treecolumn',text : '项目性质',flex : 1,sortable : true,dataIndex : 'proClass'}, {text : '项目名称',flex : 2.5,dataIndex : 'proName',sortable : true}, {text : '流程状态',flex : .75,dataIndex : 'process',sortable : true}, {text : '项目时间',xtype : 'datecolumn',format : 'Y-m-d',dataIndex : 'crTime',sortable : true,flex : .85}, {text : '项目编号',flex : 1,dataIndex : 'proNo',sortable : true}, {text : '项目单位',flex : 1,dataIndex : 'unit',sortable : true}, {text : '优先级',flex : .6,dataIndex : 'priority',sortable : true}, {text : '项目类型',flex : .75,dataIndex : 'proType',sortable : true}, {text : '项目内容',flex : 2,dataIndex : 'proContent',sortable : true}, {text : '附件数',flex : .6,dataIndex : 'fileCount',sortable : true} ]ProTreeGrid.superclass.constructor.call(this, {useArrows : true,height : this._height,width : this._width,autoScroll : true,rootVisible : false,dockedItems : [ {_treeGrid : this,xtype : 'pagingtoolbar',id : 'PROTREEGRID_PAGEBAR',store : this.store1,dock : 'bottom',displayInfo : true,listeners : {change : function(obj, pdata, options) {if(this._treeGrid._baseParam.start==pdata.currentPage)return;this._treeGrid._baseParam.start = pdata.fromRecord;this._treeGrid._baseParam.limit = basicConstant.LIMIT;this._treeGrid.store.load( {params : this._treeGrid._baseParam});}}} ],viewConfig : {stripeRows : true,enableTextSelection : true,getRowClass : function(record) {if (record.get("proClass") == '收入项目') {return 'srcss';} else if (record.get("proClass") == '支出项目') {return 'zccss';}}},tbar : new Ext.toolbar.Toolbar( {id : 'TBAR_PROTREEGRID',items : [ new ProClassQueryCombo( {width : 140,labelWidth : 60}), '-', '项目名称：', {xtype : 'textfield',width : 70}, '无分项总体项目显示：', {xtype : 'checkbox',checked : true,width : 70}, {text : "查询",icon : 'images/icons/search.gif',handler : this.onSearch,scope : this}, {text : "重置",icon : 'images/icons/del.gif',handler : this.onReset,scope : this}, {text : "高级查询",icon : 'images/icons/search.gif',handler : this.onAdvSearch,scope : this} ]})});},selectionChangeHandler : function() {},reLoadData : function() {this.store.load( {params : this._baseParam});this.store1.load( {params : this._baseParam});},onSearch : function() {var _param = {};var _tbar = Ext.getCmp('TBAR_PROTREEGRID');_param.process = _tbar.items.items[0].value;_param.proClass = _tbar.items.items[2].value;_param.proName = _tbar.items.items[5].value;_param.isShow = _tbar.items.items[7].value;// this.store1.load(1);this._baseParam = _paramthis.reLoadData();},onReset : function() {var _tbar = Ext.getCmp('TBAR_PROTREEGRID');_tbar.items.items[0].setValue('项目立项');_tbar.items.items[2].setValue('');_tbar.items.items[5].setValue('');this._baseParam = {process : '项目立项',isShow : 'false'};},onAdvSearch : function() {new ProQueryWin( {_grid : this,_process : '项目立项'}).show();}});