Results 1 to 5 of 5

Thread: Client Side Grid Paging with local data

  1. #1

    Exclamation Client Side Grid Paging with local data

    Hi,
    Is there any way to achieve grid paging with local data using ExtJS4 .Without specifying proxy for the store.

    Thanks,
    Shravan

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,448
    Answers
    3997

    Default

    To do local paging, you would have to use the PagingMemoryProxy or something like it.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3

    Default

    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?

  4. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,448
    Answers
    3997

    Default

    Yes, you can add records to a store with pagingmemoryproxy.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  5. #5
    Sencha User
    Join Date
    May 2013
    Location
    United States
    Posts
    13

    Default Sort all pages in paging Grid Ext js

    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.
    Code:
     
    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); }elseif(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{returnfalse;}}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);elseif(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);elseif(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('') + "'}"; }elseif (colNiceNames[i].length<=6){newCols += "{text: '"+ colNiceNames[i].replace(/__/g,' ') + "',autoWidth:true,sortable: true, width:80,dataIndex: '" + newString.split('.').join('') + "'}"; }elseif (colNiceNames[i].length<=8){newCols += "{text: '"+ colNiceNames[i].replace(/__/g,' ') + "',autoWidth:true,sortable: true, width:100,dataIndex: '" + newString.split('.').join('') + "'}"; }elseif (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('') + "'}"; }elseif (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();}elseif (pageToShow == noofpages){first.enable();prev.enable();next.disable();last.disable();}elseif ((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());
    }

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •