Hybrid View

  1. #1
    Sencha Premium Member
    Join Date
    Oct 2012
    Location
    New Delhi, INDIA
    Posts
    60
    Vote Rating
    1
    pnhegde is on a distinguished road

      0  

    Default Unanswered: Sending JSON request - EXTJS4 MVC Infinite grid with remote filtering.

    Unanswered: Sending JSON request - EXTJS4 MVC Infinite grid with remote filtering.


    Hello Forum members,

    I have been exploring ExtJS4 MVC and trying to implement a infinite grid with remote filtering. I went through couple of examples (first example and second example). I couldn't find searching component in the first example. Second example is great but I'm not able to understand it completely(I'm a beginner) as it's too advanced and it's non MVC. I couldn't figure out where to implement those overridden functions,which you can see in the 2nd example, in MVC architecture.

    Here is what exactly I'm trying to do. I have a grid with fields like country,category etc. I have comboboxes in the toolbar using which one can select category name, country name etc. Whenever I click on filter button on the toolbar, after selecting values in combobox I have to send a query to the remote server. All my queries should go in JSON format (including page size and limit variables). I'm not able to figure out how to send everything in JSON format after button click. Right now my code looks like this.

    Store.
    Code:
    Ext.define('MyProject.store.User', {
        extend: 'Ext.data.Store',
        model: 'MyProject.model.User',
        buffered: true,
        remoteSort: true,
        pageSize: 200,
        proxy: {
            type: 'jsonp',
            api: {
                read: 'https://myserver.com/newServer.php?do=getUser'
            },
            simpleSortMode: true,
            reader: {
                root: 'data',
                successProperty: 'success'
            }
        }
    });
    Controller:

    Code:
    Ext.define('MyProject.controller.Users', {
        extend: 'Ext.app.Controller',
        stores: ['User'],
        models: ['User'],
        views: ['user.UserGrid'],
    
    
        init: function() {
            store = this.getUserStore();
            store.load();
            store.prefetch({
                start: 0,
                limit: 200,
                callback: function() {
                    store.guaranteeRange(0, 99);
                }
            });
            this.control({
                'usergrid #filterButton': {
                    click: this.sendFilter
                }
            });
        },
        sendFilter: function(button) {
                     //How to send query strings in JSON format here?      
        }
    });
    UserGrid.js - View
    Code:
    Ext.define('MyProject.view.user.UserGrid', {
        extend: 'Ext.grid.Panel',
        alias: 'widget.usergrid',
        id: 'userGrid',
        loadMask: true,
        verticalScrollerType: 'paginggridscroller',
        invalidateScrollerOnRefresh: false,
    
    
        initComponent: function() {
            this.store = 'User';
            this.tbar = [{
                xtype: 'box',
                html: '<b>Filters</b>'
            }, '-',
            {
                xtype: 'combobox',
                name: 'categoryFilter',
                store: ['Mobile', 'Tablet', 'Desktop'],
                
            }, {
                xtype: 'combobox',
                name: 'countryFilter',
                store: ['India', 'USA', 'UK', 'Japan']
            }, {
                xtype: 'button',
                name: 'filterbutton',
                id: 'filterButton'
            },
        ];
            this.columns = [{
                text: " Domain ",
                flex: 2,
                dataIndex: 'domain',
                sortable: true,
            }, {
                text: " Category ",
                flex: 2,
                dataIndex: 'category',
                sortable: true
            }, {
                text: " country",
                flex: 2,
                dataIndex: 'country',
                sortable: true
            }];
            this.viewConfig = {
                forceFit: true,
                trackOver: false,
                singleSelect: true
            };
            this.features = {
                ftype: 'filters',
                updateBuffer: 1000 
           },
    
    
            this.callParent(arguments);
        },
    });
    This code works , but it's sending the page size and limit variables as GET. I want everything to be in JSON. How do I do that? Any help would be much appreciated.
    Thanks a lot.

  2. #2
    Ext JS Premium Member
    Join Date
    Nov 2009
    Location
    St Louis,MO
    Posts
    267
    Answers
    20
    Vote Rating
    18
    James Goddard will become famous soon enough James Goddard will become famous soon enough

      0  

    Default


    Override buildRequest on your proxy:

    Code:
    buildRequest: function (operation) {
       var me = this,
          request = me.callParent (operation);
    
       request.jsonData = request.params;
       delete request.params;
       return request;
    }

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar