Results 1 to 3 of 3

Thread: Load A Grid

  1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    43
    Answers
    1

    Default Answered: Load A Grid

    I am still learning Ext JS 4 coming from 3.4 I have a button which has a controller and a controller action. When my button is clicked it fires off an AJAX request. I get my response back and now I need to load it into a grid. How do I do this? I have my grid in a separate class. I feel like I should be fire an event from my button that will my grid will listen for, but I am not sure how to go about setting this up in Ext JS 4. I am using Sencha Architect 2.2.3. Do I need to assign a controller to my grid to do this, or just a basic function? Any help is appreciated. I feel like this is simple, but it is not clicking for me.

  2. Well I got it working and figured I would post the answer in case anyone else runs into this issue. You have to use loadRawData() instead of loadData() if you implement it the way I did. Just a tweak between 3.4 and 4, the learning curve is killing me. :-) LoadData does not use the reader specified with the store. The documentation says 'Using this method is great if the data is in the correct format already.' Does anyone know what the correct format is? Can the object being loaded not have field values that do not match store field values? O well, my problem is solved.

  3. #2
    Sencha User
    Join Date
    Dec 2011
    Posts
    43
    Answers
    1

    Default

    Well, I believe I am getting farther but my grid is not loading and I am not sure why. I only expect my name column to load since the other columns are not mapped to the results correctly. I have specified the name colimn to look for FIRST_NAME. Does any one see why this does not work. I do not get any js errors, my grid just stays empty.

    extJs4.png

    controller for button makes ajax call, tries to load store from the success function
    Code:
            Ext.Ajax.request({
                url: 'http://localhost:8080/DuplicatePartyManagement/servlet/searchParties',
                method: 'POST',
                timeout: 360000,
                headers: { 'Content-Type': 'application/json' }, 
                jsonData: {
                    firstName : firstName,
                    lastName : lastName
                },
                success: function(response, opts) {
                    var obj = Ext.decode(response.responseText);
                    var grid = Ext.ComponentQuery.query('#partySearchResultsGrid')[0];
                    grid.store.loadData(obj);
                },
                failure: function(response, opts) {
                    var obj = Ext.decode(response.responseText);
                    Ext.MessageBox.alert('ERROR', 'An Error Occurred, possibly due to a timeout'); 
                }
            });
        },
    store
    Code:
    Ext.define('DPM.store.PartySearchResults', {
        extend: 'Ext.data.Store',
    
    
        requires: [
            'DPM.model.PartySearchResult'
        ],
    
    
        constructor: function(cfg) {
            var me = this;
            cfg = cfg || {};
            me.callParent([Ext.apply({
                model: 'DPM.model.PartySearchResult',
                storeId: 'partySearchResults',
                proxy: {
                    type: 'memory',
                    reader: {
                        type: 'json',
                        root: 'PartySearchResult'
                    }
                }
            }, cfg)]);
        }
    });
    Code:
    Ext.define('DPM.view.PartySearchResultsGrid', {
        extend: 'Ext.grid.Panel',
        alias: 'widget.partysearchresultsgrid',
    
    
        itemId: 'partySearchResultsGrid',
        title: 'Party Search Reults',
        store: 'PartySearchResults',
    
    
        initComponent: function() {
            var me = this;
    
    
            Ext.applyIf(me, {
                columns: [
                    {
                        xtype: 'gridcolumn',
                        text: 'Password'
                    },
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'FIRST_NAME',
                        text: 'Name'
                    },
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'address',
                        text: 'Address'
                    },
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'city',
                        text: 'City'
                    },
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'state',
                        text: 'State'
                    },
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'zipCode',
                        text: 'ZipCode'
                    },
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'dateOfBirth',
                        text: 'DateOfBirth'
                    },
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'duplicate',
                        text: 'Duplicate'
                    }
                ]
            });
    
    
            me.callParent(arguments);
        }
    
    
    });
    model
    Code:
    Ext.define('DPM.model.PartySearchResult', {
        extend: 'Ext.data.Model',
    
    
        fields: [
            {
                name: 'FIRST_NAME'
            },
            {
                name: 'address'
            },
            {
                name: 'city'
            },
            {
                name: 'state'
            },
            {
                name: 'zipCode'
            },
            {
                name: 'dateOfBirth'
            },
            {
                name: 'duplicate'
            }
        ]
    });

  4. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    43
    Answers
    1

    Default

    Well I got it working and figured I would post the answer in case anyone else runs into this issue. You have to use loadRawData() instead of loadData() if you implement it the way I did. Just a tweak between 3.4 and 4, the learning curve is killing me. :-) LoadData does not use the reader specified with the store. The documentation says 'Using this method is great if the data is in the correct format already.' Does anyone know what the correct format is? Can the object being loaded not have field values that do not match store field values? O well, my problem is solved.

Posting Permissions

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