Extjs Store

extjs

http://www.sqlwang.com/?p=343
http://aboutfrontend.com/extjs/ext-store/
http://training.figleaf.com/tutorials/senchacomplete/chapter3/lesson3/4.cfm
http://edspencer.net/2011/02/02/proxies-extjs-4/
http://irscomp.blogspot.com/2012/01/how-to-post-data-in-json-format-in.html
http://moduscreate.com/expert-ext-js-reading-and-writing-structured-data/
http://www.javaxt.com/Tutorials/Javascript/ExtJS_4
http://existdissolve.com/2013/05/extjs-4-2-walkthrough-part-4-steppin-in-some-crud/
http://www.mysamplecode.com/2012/03/extjs-ajax-json-request-response.html
http://joekuan.wordpress.com/2010/12/06/posting-json-data-from-ext-js-to-php/

When should we use a ArrayStore? When should we use a JsonStore? What is the difference between ArrayStore and JsonStore?

Use JsonStore when we have an array of JSON objects. Use the ArrayStore when we have an array of arrays. Basically, in both cases, we have an array. With JsonStore, we have an array of JSON objects. With ArrayStore, we have an array that itself contains other arrays (in other words, we have a two-dimensional array).

<script type='text/javascript'>
    var store = new Ext.data.JsonStore({
        url: '/srm/ot_search.jsp',
        root: 'data',
        idProperty: 'id',
        fields: ['id', 'value']
    });
    /*
    var auto_search = new Ext.form.ComboBox({
        store: store,
        displayField: 'value',
        typeAhead: true,
        mode: 'remote',
        triggerAction: 'all',
        emptyText: 'Type to activate search',
        selectOnFocus: true,
        hideTrigger: true,
        width: 250,
        renderTo: 'OTDETAIL',
    });
    */
</script>

Sample stores:

var emailDomainsStore = new Ext.data.Store(
        {
            reader: new Ext.data.JsonReader(
                    {}, 
                    [
                     {name:'DOMAIN_NAME', mapping:'DOMAIN_NAME'},
                     {name:'STATUS', mapping:'STATUS'},
                     {name:'ROWNUM', mapping:'ROWNUM'},
                     {name:'ENTITIES_EMAIL_DOMAINS_ID', mapping:'ENTITIES_EMAIL_DOMAINS_ID'}
                    ]
            )
        }
);
emailDomainsStore.loadData(json.USER_SETTINGS.ENTITIES_EMAIL_DOMAINS);
Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: ['id', 'name', 'email']
});

var store = Ext.create('Ext.data.Store', {
    model: 'User',
    proxy: {
        type: 'ajax',
        url : 'users.json',
        reader: {
            type: 'json'
        }
    }
});
store: new Ext.data.SimpleStore(
    {
        fields:['DisplayField','ValueField','shortField'],
        data:[
            ['Please Select...', '', 'Please Select...'],
            [
                'Yes ...', 
                'Y', 
                '...'
            ],
            [
                'No.', 
                'N',
                '...'
            ]
        ]
    })

How can we change the default AJAX timeout?

var store = Ext.create('Ext.data.Store', {
    model: 'Question',
    id: 'questionStore',
    storeId: 'questionStore',
    pageSize: 100,
    proxy: {
        afterRequest: function() {
            hideWaitScreen();
        },
        type: 'ajax',
        timeout: 300000,
        url : qPrecisionBaseURL,
        api: {
            read: qPrecisionBaseURL + '&vAction=GetJSON&apCategory=' + apCategoryID,
            update: qPrecisionBaseURL + '&vAction=save&apCategory=' + apCategoryID
        },
        reader: {
            type: 'json',
            root: 'data',
            method: 'POST',
            timeout: 300000
        },
        writer: {
            type: 'json',
            root: 'data',
            allowSingle: false,
            method: 'POST',
            timeout: 300000
        }
    },
    autoLoad: true,
});
Ext.override(Ext.data.Connection, {
    timeout:45000
}

Connection class is base of all ajax requests so the above code will extend time for any kind of ajax request. When using an Ajax Proxy, rather than just an Ajax Request, you will need to do:

Ext.override(Ext.data.proxy.Ajax, { timeout:60000 });

If you are using ExtJS 4.x there is no need to do an override, Ext.Ajax is singleton so the only thing you have to do is:

Ext.Ajax.timeout = 45000;

See http://www.sencha.com/forum/showthread.php?145379-AJAX-global-default-timeout

How can we pass some extra parameters to the server?

store.on('beforeload', function(st, operation, options) {
    var params = {};
    params.setting = Ext.getCmp('settingCombo').getValue();
    params.measureSet = Ext.getCmp('measureSetsCombo').getValue();
    params.version = Ext.getCmp('versionCombo').getValue();

    st.getProxy().extraParams = params;
});

How can we loop over all the records in a data store?

yourGrid.getStore().each(function(rec){
    var rowData = rec.data;
    for (var i=0; i<rowData.length; i++) {
        console.log(rowData[i]); //or you could do something else here
    };
});
record.get('fieldName');

How can we loop over the store and check if the record is selected?

store.each(function(rec){
    console.log(rec.getId(), selModel.isSelected(rec));
});
Ext.define('MyJsonStore', {
    extend: 'Ext.data.Store',
    model: 'YourModel',
    proxy: {
        type: 'ajax',
        url: '/someurl',
        reader: {
            successProperty: 'success', // if success property
            type: 'json',
            root: 'results', // if root

            // THIS IS THE FUNCTION YOU NEED TO MANIPULATE THE DATA
            getData: function(data){
                Ext.each(data.results, function(rec) {
                    var access = rec.access;
                });

                return data;
            }
        },
        writer: {
            type: 'json'
        }
    }
});

// The user model definition
Ext.define('user', {
   extend: 'Ext.data.Model',
   fields: [ 'name', 'surname', 'book' ]
});

// The store instance
var userstore = Ext.create('Ext.data.Store', {
   model: 'user',
   proxy: {
        type: 'memory',
        reader: {
            type: 'xml',
            record: 'user',
            root: 'users'
        }
    }
});

// data sample to test the approach
mydata =
    [
        ['Juan', 'Alonso', [ { bname: 'El loco' }, { bname: 'El cuerdo' } ]],
        ['Susana', 'Cabrera', [ { bname: 'Adios a las palomas' }]]
    ];

// load the store with the sample data 
userstore.loadData(mydata, false);  

// display the first book for the first record
var firstRecord = userstore.getAt(0);
var firstBook = firstRecord.get('book')[0]; 

var newproxy = new Ext4.data.proxy.Rest({
                            url : request,
                            headers : {
                                },
                            reader :  {
                                type : 'json',
                                root : 'user.book'
                            }
                        });
                     // Typical Store collecting the Proxy, Reader and Writer together.
                     var newstore = Ext4.create('Ext4.data.Store', {
                         id : 'book',
                         fields: ['bname'],
                         restful : true, // <-- This Store is RESTful
                         autoLoad : true,
                         proxy : newproxy
                     });
                    var book;
                    newstore.load();
                    newstore.each(function(rec) {
                        book= rec.get('bname');
                    });

Ext.define('MyApp.store.Ratings, {
    extend: 'Ext.data.Store',
    fields: [
        {name: 'label'},
        {name: 'value', type: 'int'}
    ],
    data: [
        {label: 'Great', value: 5},
        {label: 'Above Average', value: 4},
        {label: 'Average', value: 3},
        {label: 'Below Average', value: 2},
        {label: 'Poor', value: 1},
    ]
});

How can we get the selected records?

If you have a grid, you can get the selected records:

var grid = Ext.getCmp('sortGrid');
var selModel = grid.getSelectionModel();
var records = selModel.getSelection();

How can we remove records from a store?

var records = selModel.getSelection();
sortStore.remove(records);
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License