Cómo implementar paginación en treegrid y treestore de Extjs 4.1
[javascript] ver copia simple
ProTreeGrid = Ext.extend(Ext.tree.Panel, {
_baseParam: {
proceso : 'Proyecto en pie',
isShow : 'true',
inicio: 1
},
constructor: function(_config ) {
if (_config == null)
_config = {};
Ext. > this.store1 = Ext.create('Ext.data.JsonStore', {
autoLoad : true,
pageSize : basicConstant.LIMIT,
proxy: {
tipo: 'ajax',
URL: "xmgl/pro-info-manage!page.action",
extraParams: this._baseParam,
lector: {
tipo: 'json',
raíz: 'filas',
propiedad total : "totalCount"
}.
},
modelo : 'ProInfo'
}); > this.store = Ext.create('Ext.data.TreeStore', {
modelo : 'ProInfo',
proxy : {
tipo : ' ajax',
url : 'xmgl/pro-info-manage.action'
},
carpetaOrdenar: verdadero,
oyentes: {
'antes de cargar' : {
fn : function(_s, _op, _e) {
this._baseParam .limit = basicConstant.LIMIT
_s.proxy.extraParams = this._baseParam
},
alcance: este
}
}.
}
});
this['selModel'] = Ext.create('Ext.selection.TreeModel', {
p>
modo: 'SINGLE',
oyentes: {
'cambio de selección': {
fn. SelectionChangeHandler,
alcance: este
}
}.
}
}}
p>esto ['columnas'] = [ {
xtipo
: 'treecolumn',
text : 'naturaleza del elemento',
flex : 1,
sortable : true,
dataIndex : 'proClass'
}, {
text : 'nombre del elemento',
flex : 2.5,
dataIndex : 'proName ',
ordenable: verdadero
}, {
texto: 'Estado del proceso',
flex: .75, p>
dataIndex: 'proceso',
ordenable: verdadero
}, {
texto: 'tiempo del proyecto',
xtype: 'columna de fecha',
formato: 'Y-m-d',
dataIndex: 'crTime',
ordenable: verdadero,
flex : .85
}, {
texto : 'proyectoNo',
flex : 1,
dataIndex: 'proNo',
ordenable: verdadero
}, {
texto: 'ProjectUnit'.
flex: 1 ,
dataIndex : 'unidad',
ordenable : verdadero
}, {
texto : 'prioridad',
flex: .6,
dataIndex: 'prioridad', <
ordenable: verdadero
}, {
texto: 'itemType',
flex: .75,
dataIndex: 'proType',
ordenable: verdadero
}, {
texto : 'itemContent',
flex : .6,
dataIndex : 'prioridad', < text : 'itemContent',
flex : 2,
dataIndex : 'proContent',
ordenable : true
}, {
texto : ' número de archivos adjuntos',
flex: .6,
dataIndex: 'fileCount',
ordenable: true
}.]
ProTreeGrid.superclass.constructor.call(this, {
useArrows : true,
height : this._height,
width : esto .
autoScroll : verdadero,
rootVi
sible: falso,
elementos del muelle: [ {
_ treeGrid: esto,
xtype: 'pagingtoolbar',
id: 'PROTREEGRID_PAGEBAR',
tienda: this.store1,
muelle: 'bottom',
displayInfo: true,
oyentes: {
cambio: función(obj, pdata, opciones) {
if(this._treeGrid._baseParam.start==pdata. currentPage)
retorno;
this._treeGrid._baseParam.start==pdata.
this._treeGrid._baseParam.start = pdata.fromRecord
this._treeGrid._baseParam. límite = basicConstant.LIMIT;
this._treeGrid.store.load( {
parámetros: this._treeGrid._baseParam
});
}
}
}], <
viewConfig: {
stripeRows: verdadero,
enableTextSelection : verdadero,
getRowClass : function(record) {
if (record.get( "proClass") == 'Artículo de ingreso') {
return 'srcss';
} else if (record.get("proClass") == 'Artículo de gastos') {
return 'zccss'; p> }
}
}
},
tbar : nueva Ext.toolbar.Toolbar( {
id: 'TBAR_PROTREEGRID',
elementos: [ nuevo ProClassQueryCombo( {
ancho: 140,
labelWidth: 60
}), '-', 'ItemName:', {
xtype : 'textfield',
width : 70
}, 'Visualización general del artículo con sin subelementos:', {
xtype: 'casilla de verificación',
marcado: verdadero,
ancho: 70
}, {
texto : 'consulta',
icono : 'images/icons/search.gif',
controlador : this.onSearch,
alcance: este
},
{
texto: "Restablecer",
icono: 'images/icons/del.gif',
controlador: this.onReset,
alcance: esto
}, {
texto: "Búsqueda avanzada",
icono: 'imágenes/iconos/búsqueda.gif',
controlador: this.onAdvSearch,
alcance: este
}.]
}})
} ) ;
},
selecciónChangeHandler : función() {
},
reLoadData : función() {
this.store.load( {
parámetros: this._baseParam
});
this.store1.load( {
parámetros: this._baseParam
});
},
onSearch: función() {
p> var _param = {};
var _tbar = Ext.getCmp('TBAR_PROTREEGRID');
_param.process = _tbar.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('Proyecto vigente'
_tbar.items.items[2].setValue('');
_tbar.items.items[5].setValue('');
this._baseParam = {
proceso: 'Artículo iluminado',
isShow: 'falso'
}
},
onAdvSearch : function() {
new ProQueryWin( {
_grid : this,
_process : 'Project Lit'
}).show();
}).
});
}.