Results 1 to 3 of 3

Thread: ExtJs Grid Search

  1. #1

    Default ExtJs Grid Search

    Hi,

    I've recently been tasked with building a new system using extJs, and have come to the conclusion I will be using grids a lot.

    What I want to do is have a grid displaying a list of clients with pagination, the ability to search them all at and links in a action column for 'Edit' & 'Delete'

    So far I have the clients with pagination fine and the searching returning everything as I want, there is just a few problems. When I run the search the grid loads the data find but when I go to the next page it's resetting the search to all the clients.

    Also when I'm calling .remove it is doing it locally but not using the destroy proxy I've set up, is there any reason for this?

    I'll attach my app.js below:

    Code:
    Ext.onReady(function(){
    	var itemsPerPage = 10;
    	
    
       var itemsPerPage = 10;
       Ext.define('User', {
    	    extend: 'Ext.data.Model',
            autoSync: true,
    	    fields: ['id', 'FirstName', 'Surname', 'DOB', 'Status', 'Postcode'],
    	    proxy: {
    	        type: 'ajax',
    	        url : 'data.php',
    	        //Can customize URL strings here if need to
                api: {
                    read: 'site/read',
                    create: 'data.php',
                    update: 'data.php',
                    destroy: 'site/destroy'
                },
    	        reader: {
    	            type: 'json',
    	            root: 'rows',
                    totalProperty: 'results'
    	        },
                writer: {
                    type: 'json',
                    writeAllFields: false,
                    root: 'data'
                }
            },
    	    simpleSortMode: true
    	});
    	
    	var userStore = Ext.create('Ext.data.Store', {
    	    	pageSize: itemsPerPage,
    			autoLoad: true,
    		    model: 'User'
    		});
    	
    	var User = Ext.ModelMgr.getModel('User');
    	
    	var simple = Ext.create('Ext.form.Panel', {
            frame:true,
            title: 'Search Form',
            bodyStyle:'padding:5px 5px 0',
            width: 800,
            renderTo: 'search',
            //set to false for no Ajax 
            //standardSubmit: true,
            defaultType: 'textfield',
            waitMsgTarget: 'extJs',
            items: [{
    	        xtype: 'fieldcontainer',
    	        labelAlign: 'left',
    	        defaultType: 'textfield',
    	        // Arrange fields horizontally
    	        layout: 'hbox',
    	        defaults: {
                    margin: '0 20 0 0',
                    width: 220
    	        },
    	        fieldDefaults: {
    	            msgTarget: 'left',
    	            labelAlign: 'top'
    	        },
    	        items: [{
    	            fieldLabel: 'Surname',
    	            name: 'Surname'
    	        },
    	        {
    	            fieldLabel: 'Post Code',
    	            name: 'Postcode'
    	        },
    	        {
    	            fieldLabel: 'Date of Birth',
    	            name: 'DOB'
    	        }]
    	    },
    	    {
                xtype: 'fieldcontainer',
    	        labelAlign: 'left',
    	        defaultType: 'textfield',
    	        // Arrange fields horizontally
    	        layout: 'hbox',
    	        defaults: {
                    margin: '0 20 0 0',
                    width: 220
    	        },
    	        fieldDefaults: {
    	            msgTarget: 'left',
    	            labelAlign: 'top'
    	        },
    	        items: [{
    	            fieldLabel: 'Status',
    	            name: 'Status'
    	        },
    	        {
    	            fieldLabel: 'Admin Status',
    	            name: 'AdminStatus'
    	        }]
    	    }],
            buttons: [{
                text: 'Search',
                handler: function(){
                	var form = this.up('form').getForm();
                	if (form.isValid()) {
                    userStore.load({
    				    scope   : this,
    				    url: 'site/search',
    				    params: Ext.apply({start: 0, limit: itemsPerPage},form.getValues()),
    				    callback: function(records, operation, success) {
    				        //the operation object contains all of the details of the load operation
    				    }
    				});
                   }
                }
            },{
                text: 'Clear'
            }]
        });
    	
    	var grid = Ext.create('Ext.grid.Panel', {
    	    renderTo: "extJs",
    	    store: userStore,
    	    width: 950,
    	    height: 340,
    	    title: 'Client Grid',
    	    dockedItems: [{
    	        xtype: 'pagingtoolbar',
    	        store: userStore,   // same store GridPanel is using
    	        dock: 'bottom',
    	        displayInfo: true
    	    }],
    	    columns: [
    	        {
    	            text: 'Code',
    	            fixed: true,
    	            width: 100,
    	            hideable: false,
    	            dataIndex: 'id'
    	        },
    	        {
    	            text: 'Surname',
    	            fixed: true,
    	            dataIndex: 'Surname',
    	            flex: 1
    	        },
    	        {
    	            text: 'First Name',
    	            fixed: true,
    	            dataIndex: 'FirstName',
    	            flex: 1
    	        },
    	        {
    	            text: 'Post Code',
    	            fixed: true,
    	            dataIndex: 'Postcode',
    	            flex: 1
    	        },
    	        {
    	            text: 'Status',
    	            fixed: true,
    	            dataIndex: '	Status',
    	            flex: 1
    	        },
    	        {
    	            text: 'Date of Birth',
    	            fixed: true,
    	            dataIndex: 'DOB',
    	            flex: 1
    	        },
    	        {
    	            xtype:'actioncolumn', 
    	            width:50,
    	            items: [{
    	                icon: siteurl+'assets/images/extedit.png',  
    	                tooltip: 'Edit',
    	                handler: function(grid, rowIndex, colIndex) {
    	                    var rec = grid.getStore().getAt(rowIndex);
    	                    userStore.remove(rec);
    	                }
    	            },{
    	                icon: siteurl+'assets/images/extdelete.png',
    	                tooltip: 'Delete',
    	                handler: function(grid, rowIndex, colIndex) {
    	                    var rec = grid.getStore().getAt(rowIndex);
    	                    userStore.remove(rec);
    			                }                
    			            }]
                }
    			        
    			    ],
    			    
    			});
     
            }); //end onReady
    Thanks for any help

  2. #2

    Default Facing the same problem

    I am also facing the same problem with search form but going to next page it is displaying all the records. I tried to override the moveNext() function of Ext.PagingToolbar but it is also not working. so if you found the solution for this please guide me, how can i solve this.
    Thank you in advance

  3. #3
    Sencha User mounir1's Avatar
    Join Date
    Jan 2018
    Location
    Turkey Antalya
    Posts
    10

    Default

    this is old thread, but I am having similar issue , any one had it worked out ? .

Posting Permissions

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