PDA

View Full Version : Client Side Grid Paging with local data



sencha99999
20 Mar 2012, 1:39 AM
Hi,
Is there any way to achieve grid paging with local data using ExtJS4 .Without specifying proxy for the store.

Thanks,
Shravan

mitchellsimoens
20 Mar 2012, 8:54 AM
To do local paging, you would have to use the PagingMemoryProxy or something like it.

sencha99999
20 Mar 2012, 8:56 PM
But when we specify "pagingmemoryproxy" we need to specify static data while creating object for the pagingmemoryproxy.But in my requirement I need to add records dynamically to the store. can we add dynamic records to the pagingmemoryproxy?

mitchellsimoens
21 Mar 2012, 4:34 AM
Yes, you can add records to a store with pagingmemoryproxy.

Jimmey2013
13 May 2013, 6:44 AM
I want to achive the client sorting on all pages (not just by page) .
Could you share any example or code how to do it.


Ext.Loader.setConfig({enabled: true});Ext.Loader.setPath('Ext.ux', './ext/ux/');Ext.require(['Ext.data.*','Ext.grid.*','Ext.util.*','Ext.ux.data.PagingMemoryProxy','Ext.toolbar.Paging','Ext.ux.SlidingPager'
]);
var gridStore;
var rowSelection="";
var pgcount;
var pagelbl;
var displaylbl;
var totalRec;
var page;
var pageToShow=1;
var limit=30;
var count;
var dataGridPanel;
var page = new Ext.form.TextField({name: 'page',width: 30,value :'1',enableKeyEvents :false
});
var first =new Ext.Button({id:'first',icon:'images/page-first.gif',cls:"x-btn-text-icon"});
var prev =new Ext.Button({id:'prev',icon:'images/page-prev.gif',cls:"x-btn-text-icon"});
var next =new Ext.Button({id:'next',icon:'images/page-next.gif',cls:"x-btn-text-icon"});
var last =new Ext.Button({id:'last',icon:'images/page-last.gif',cls:"x-btn-text-icon"});var sortType1=Ext.data.SortTypes.none;Ext.data.Types.FLOATORSTRING = {convert :function(data) { if(isFloat(data)==true){sortType1=Ext.data.SortTypes.asFloat;data = parseFloat(String(data).replace(Ext.data.Types.stripRe, ''), 10); }else if(isInteger(data)==true){sortType1=Ext.data.SortTypes.asInt;if(data.indexOf(0)!=0&&data){data = parseInt(String(data)); } }return data;},sortType:sortType1,type: 'floatOrString'
};
function isFloat(f) { return !isNaN(f) && !isInteger(f);}
function isInteger(f) {if(!isNaN(f)){return !isNaN(f) && Math.round(f) == f;}else{return false;}}Ext.onReady(function() {//alert(eval(extrowData));
//Set up a model to use in our Store
Ext.define('GridModal', {extend: 'Ext.data.Model',fields: getFields()});gridStore = Ext.create('Ext.data.Store', {model: 'GridModal',proxy: {type: 'pagingmemory',data: eval(extrowData),reader: {type: 'array'
}}});// alert(eval(extrowData));
//create checkbox model
var selectionModel = Ext.create('Ext.selection.CheckboxModel',{listeners: {selectionchange: function(sm, selections) {rowSelection=selections; }}});pagelbl = new Ext.form.Label({id:'pageName',text:'Page No'
});pgcount = new Ext.form.Label({id:'lblcount',text:'of '+opener.noofpages});displaylbl = new Ext.form.Label({id:'dsplylbl',text:'Displaying data 1-30 of '+ opener.totalRecCount});var emptylabel = new Ext.form.Label({id:'emptylbl',text: '',width:130});var totalRec = new Ext.form.Label({id:'emptylbltotal',text: 'Total records: '+opener.totalRecCount});var emptylabel1 = new Ext.form.Label({id:'emptylbl1',text: '',width:155});var pageid = Ext.id(page,'page');count=gridStore.count();var pageValue=page.getValue(); var noofpages =parseFloat(count/limit);noofpages=Math.ceil(noofpages);var end;first.on('click',function(){selectionModel.deselectAll(true);pageToShow=1;getPageData(pageToShow);}); prev.on('click',function(){selectionModel.deselectAll(true);pageToShow=parseInt(page.getValue())-1;getPageData(pageToShow);});next.on('click',function(){selectionModel.deselectAll(true);pageToShow=parseInt(page.getValue())+1;getPageData(pageToShow);});last.on('click',function(){selectionModel.deselectAll(true);pageToShow=opener.noofpages;getPageData(pageToShow);});// create the Grid
dataGridPanel = Ext.create('Ext.grid.Panel', {store: gridStore,selModel:selectionModel,// selModel:'GridModal',
stateful: true,stateId: 'stateGrid',loadMask: true,layout:'fit',columnLines : true/*, listeners: {cellclick: function (view, cell, cellIndex, record, row, rowIndex, e) {
var linkClicked = (e.target.tagName == 'A');var clickedDataIndex =view.panel.headerCt.getHeaderAtIndex(cellIndex).dataIndex;
if (linkClicked && clickedDataIndex == '...') {alert(record.get('id'));}}window.open("mailto:mikem@aanastasio.com");}}*/,columns:getColumns() ,// height: Ext.getBody().getHeight(),
// width: Ext.getBody().getWidth(),
renderTo: Ext.getBody(),title:opener.dataGridName, viewConfig: {stripeRows: true,forceFit : true
},buttonAlign:'center',frame:true,resizable: {handles: 's' },dockedItems:[{xtype: 'toolbar',dock: 'top',layout: {pack: 'left'
},items: [{minWidth: 80,text: 'Zoom',itemId:'zoom',listeners: {click: function(){if(rowSelection!=""){if(opener.extgridName=="viewData"){ var layerId = window.opener.getlayerIdByName("primary_dataset",window.opener.lyrNmToView);window.opener.document.getElementById(layerId).checked=true;window.opener.updateLayerVisibility("primary_dataset",layerId);}window.opener.zoomToSelection(rowSelection);window.blur();window.opener.focus();} else{Ext.Msg.alert('Information ', 'Please select rows to zoomin.');}}}},{minWidth: 80,text: 'Export',itemId:'export',listeners: {click: function(){if(rowSelection!=""){if(opener.extgridName=="viewData")window.opener.exportViewData("export",rowSelection);else if(opener.extgridName=="searchAttribute")window.opener.gridData2Export("searchAttribute","export",rowSelection);else
window.opener.exportSelectionData("export",rowSelection);window.blur();window.opener.focus();}else{Ext.Msg.alert('Information ', 'Please select rows to export.');}}}},{minWidth:80,text:'Export All',itemId:'exportall',listeners: {click: function(){if(opener.extgridName=="viewData")window.opener.exportViewData("exportAll",rowSelection);else if(opener.extgridName=="searchAttribute")window.opener.gridData2Export("searchAttribute","exportAll",rowSelection);else
window.opener.exportSelectionData("exportAll",rowSelection);}}}]},{xtype: 'toolbar',dock: 'bottom',id: 'toolbar-bottom',hidden:true,layout: {pack: 'left'
},items: [[first,prev,pagelbl,page,pgcount,next,last,emptylabel,totalRec,emptylabel1,displaylbl]]},{ xtype: 'pagingtoolbar',id:"toolbar-bottom1",pageSize: 30,dock: 'bottom',store: gridStore,hidden:true,displayInfo: true }]});if(opener.extgridName=="viewData"){Ext.getCmp('toolbar-bottom1').hidden=true;Ext.getCmp('toolbar-bottom').hidden=false;}else{Ext.getCmp('toolbar-bottom1').hidden=false;}// alert( dataGridPanel.getWidth())
dataGridPanel.setHeight(Ext.getBody().getHeight()+10);dataGridPanel.setWidth(Ext.getBody().getWidth()+20);dataGridPanel.doLayout();gridStore.load();});
function getColumns(){var colNames = opener.gridFiledNames;var colNiceNames = opener.gridAliaNames;var newCols = "[";for(var i=0; i<colNames.length; i++){var newString=colNames[i].split(' ').join('');if(colNames[i]=="OBJECTID"){newCols += "{text: '"+ colNiceNames[i].replace(/__/g,' ') + "',autoWidth:true,sortable: true,hidden:true, dataIndex: '" + newString.split('.').join('') + "'}"; }else{if(colNiceNames[i].length<=4){newCols += "{text: '"+ colNiceNames[i].replace(/__/g,' ') + "',autoWidth:true,sortable: true, width:60,dataIndex: '" + newString.split('.').join('') + "'}"; }else if (colNiceNames[i].length<=6){newCols += "{text: '"+ colNiceNames[i].replace(/__/g,' ') + "',autoWidth:true,sortable: true, width:80,dataIndex: '" + newString.split('.').join('') + "'}"; }else if (colNiceNames[i].length<=8){newCols += "{text: '"+ colNiceNames[i].replace(/__/g,' ') + "',autoWidth:true,sortable: true, width:100,dataIndex: '" + newString.split('.').join('') + "'}"; }else if (colNiceNames[i].length<=10){if(colNiceNames[i]=="State Abbr"){newCols += "{text: '"+ colNiceNames[i].replace(/__/g,' ') + "',autoWidth:true,sortable: true, width:80,dataIndex: '" + newString.split('.').join('') + "'}"; }else
newCols += "{text: '"+ colNiceNames[i].replace(/__/g,' ') + "',autoWidth:true,sortable: true, width:120,dataIndex: '" + newString.split('.').join('') + "'}"; }else if (colNiceNames[i].length<=15){newCols += "{text: '"+ colNiceNames[i].replace(/__/g,' ') + "',autoWidth:true,sortable: true, width:150,dataIndex: '" + newString.split('.').join('') + "'}"; }else{//alert("inside else");
newCols += "{text: '"+ colNiceNames[i].replace(/__/g,' ') + "',autoWidth:true,sortable: true, width:170,dataIndex: '" + newString.split('.').join('') + "'}"; }}if(i!=(colNames.length-1)){newCols += ",";}}newCols += "]";var cols = eval("("+newCols+")");return cols; }
//custom renderer for Hyperlinks
function hyperlink(val){if(typeof val!="undefined"){//alert("inside hyperlink"+val)
if(val.indexOf("http://")>=0){return "<a href='"+val+"' TARGET='_blank'>" + val + '</a>';}}
return val;}
function getFields(){var types = Ext.data.Types; var colNames = opener.gridFiledNames; var colTypes=opener.gridFieldTypes;var fields = "[";for(var i=0; i<colNames.length; i++){var newcolNames=colNames[i].split(' ').join('');if(colNames[i].toUpperCase().indexOf('TRACK')!=-1){fields += "{name:'"+newcolNames.split('.').join('')+"',type:String}"; }else{fields += "{name:'"+newcolNames.split('.').join('')+"',type:types.FLOATORSTRING}"; }if(i!=(colNames.length-1)){fields += ",";}}fields += "]";var fieldsData = eval("("+fields+")");return fieldsData;}
function setNavigations(pageToShow,noofpages){if (noofpages==1){first.disable();prev.disable();next.disable();last.disable();}else
{if (pageToShow==1){first.disable();prev.disable();next.enable();last.enable();}else if (pageToShow == noofpages){first.enable();prev.enable();next.disable();last.disable();}else if ((pageToShow>1) && (pageToShow != noofpages)){first.enable();prev.enable();next.enable();last.enable();} }}//end of setNavigations function
?
function getPageData(pageToShow){ page.setValue(pageToShow);setNavigations(pageToShow,opener.noofpages);var start = ((pageToShow-1)*limit)+1;var end = (pageToShow*limit);gridStore.removeAll();gridStore.save();opener.updatePageData(pageToShow);if (end>opener.totalRecCount) end=opener.totalRecCount;displaylbl.getEl().update('Displaying data '+start +'-'+end+ ' of '+ opener.totalRecCount);pgcount.getEl().update(' of '+opener.noofpages); }
function dataReload(extrowData){dataGridPanel.getStore().add(eval(extrowData));dataGridPanel.setHeight(Ext.getBody().getHeight());dataGridPanel.setWidth(Ext.getBody().getWidth()); }