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 = _param
	this.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();
}

});