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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."