1. #1
    Sencha User
    Join Date
    Jul 2013
    Posts
    1
    Vote Rating
    0
    erictung is on a distinguished road

      0  

    Default Unanswered: Load data into Memory Proxy Store

    Unanswered: Load data into Memory Proxy Store


    Hi, I have developed a screen where I have successfully implemented a grid using memory paging and the UX filtering control code plugins.

    What I would like to do is load the data into the store using an external method, something along the lines of:
    Code:
    var dataStore = Ext.create('Ext.data.Store', {
        id:        "Company.store.SomeList",
        model:    'Company.model.SomeList',
        //data:    rawdata, // commented this out so that I can load data into the "dataStore" later
        remoteSort: true,
        remoteFilter: true,
        pageSize: iDefaultPageSize,
        proxy: { type: "memory", enablePaging: true },
        sorters: [
            { property: "Name", direction: "ASC" }
        ],
        requires: [ "Company.model.SomeList" ]
    });
    
    var remoteStore = Ext.create('Ext.data.Store', {
        id:        "Company.store.SomeList-remote",
        model:    'Company.model.SomeList',
        autoLoad: true,
        proxy: {
            type: "ajax",
            url: "/Data"
        },
        requires: [ "Company.model.SomeList" ],
        listeners:{
            load: function(self, records, successful)
            {
                dataStore.loadRawData(self.proxy.reader.rawData);
            }
        }
    });
    However, when i do the above the grid completely ignores the sorting/paging settings set on the store.

    Could some one point out where I'm getting off track?

    Thanks! - Eric

  2. #2
    Sencha User
    Join Date
    Jun 2013
    Location
    New York
    Posts
    10
    Vote Rating
    -15
    Harlowsmith is infamous around these parts Harlowsmith is infamous around these parts

      -1  

    Default


    Since the time of joining this forum, I have been experiencing great time here as I am getting great information on the latest technologies. This memory proxy store is really awesome to get the right details.
    .

  3. #3
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,800
    Answers
    359
    Vote Rating
    167
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    May be hard to say without seeing your fields to see if your model has a field called 'Name'.
    But, to show it can work here's an inclusive example:

    Code:
    Ext.define('KitchenSink.model.Company', {
        extend: 'Ext.data.Model',
        fields: [{
            name: "company"
        }, {
            name: "price",
            type: "float"
        }, {
            name: "change",
            type: "float"
        }, {
            name: "pctChange",
            type: "float"
        }, {
            name: "lastChange",
            type: "date",
            dateFormat: "n/j h:ia"
        }, {
            name: "rating",
            type: "int",
            convert: function (c, a) {
                var b = a.get("pctChange");
                if (b < 0) {
                    return 2
                }
                if (b < 1) {
                    return 1
                }
                return 0
            }
        }]
    });
    
    
    var data = [
        ["3m Co", 71.72, 0.02, 0.03, "9/1 12:00am"],
        ["Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am"],
        ["Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am"],
        ["American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am"],
        ["American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am"],
        ["AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am"],
        ["Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am"],
        ["Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am"],
        ["Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am"],
        ["E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am"],
        ["Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am"],
        ["General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am"],
        ["General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am"],
        ["Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am"],
        ["Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am"],
        ["Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am"],
        ["International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am"],
        ["Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am"],
        ["JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am"],
        ["McDonald's Corporation", 36.76, 0.86, 2.4, "9/1 12:00am"],
        ["Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am"],
        ["Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am"],
        ["Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am"],
        ["The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am"],
        ["The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am"],
        ["The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am"],
        ["United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am"],
        ["Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am"],
        ["Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am"]
    ];
    
    
    
    
    
    
    Ext.define('KitchenSink.view.grid.SlidingPager', {
        extend: 'Ext.grid.Panel',
        
        requires: [
            'Ext.data.*',
            'Ext.grid.*',
            'Ext.util.*',
            'Ext.toolbar.Paging',
            'KitchenSink.model.Company'
        ],
        xtype: 'sliding-pager',
        
        
        stripeRows: true,
        height: 320,
        width: 600,
        frame: true,
        title: 'Sliding Pager',
        
        initComponent: function(){
            this.width = 650;
            var store = new Ext.data.Store({
                model: KitchenSink.model.Company,
                //remoteSort: true,
                pageSize: 10,
                proxy: {
                    type: 'memory',
                    enablePaging: true,
                    data: data,
                    reader: {
                        type: 'array'
                    }
                },
                sorters: [
                    { property: "company", direction: "ASC" }
                ]
            });
            
            Ext.apply(this, {
                store: store,
                columns: [{ 
                    text: 'Company',
                    sortable: true,
                    dataIndex: 'company',
                    flex: 1
                },{
                    text: 'Price',
                    sortable: true,
                    renderer: Ext.util.Format.usMoney,
                    dataIndex: 'price',
                    width: 75
                },{
                    text: 'Change',
                    sortable: true,
                    renderer: this.changeRenderer,
                    dataIndex: 'change',
                    width: 80
                },{
                    text: '% Change',
                    sortable: true,
                    renderer: this.pctChangeRenderer,
                    dataIndex: 'pctChange',
                    width: 100
                },{
                    text: 'Last Updated',
                    sortable: true,
                    dataIndex: 'lastChange',
                    width: 115,
                    renderer: Ext.util.Format.dateRenderer('m/d/Y')
                }],
                bbar: {
                    xtype: 'pagingtoolbar',
                    pageSize: 10,
                    store: store,
                    displayInfo: true,
                }
            });
            this.callParent();
        },
        
        afterRender: function(){
            this.callParent(arguments);
            this.getStore().load();
        },
        
        changeRenderer: function(val) {
            if (val > 0) {
                return '<span style="color:green;">' + val + '</span>';
            } else if(val < 0) {
                return '<span style="color:red;">' + val + '</span>';
            }
            return val;
        },
        
        pctChangeRenderer: function(val){
            if (val > 0) {
                return '<span style="color:green;">' + val + '%</span>';
            } else if(val < 0) {
                return '<span style="color:red;">' + val + '%</span>';
            }
            return val;
        }
    });
    
    
    
    
    Ext.widget('sliding-pager', {
        renderTo: document.body
    });
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

    C
    heck out all of the 2013 SenchaCon presentations here:
    http://www.sencha.com/blog/senchacon...now-available/

Thread Participants: 2

Tags for this Thread