"each" method in extjs data store

Question

So, I got a data store in my code that I'm loading in a function. In that store I want to use the each method to append each record to the body of a panel in a certain format.

What I'm trying to figure out is how to use this "each" method. Has anyone ever had to use it before? I'm relatively new to functions and programming in general so I'm trying to figure out what the "fn" and "scope" are relative to my own code.

Any help would be awesome if anyone has used this method in the ExtJS framework before.

Answer 1

It sounds like you want an Ext.DataView.

DataView use Template or XTemplate to create a rendering of data in a store.

So you instantiate a configured dataview, including a reference to your store, and the template to use, and add that DataView to your panel.

Answer 2

Use Dataview for your case. Add the store and the XTemplate to your dataview and add this dataview as an item to your panel. It will be something like this:

this.store = new Ext.data.JsonStore({
            url : 'myproxy.php',
            baseParams : {
                action : 'get_basket_files'
            },
            root : 'rows',
            id : 'filename',
            fields : ['filename', 'filepath', 'filesize', 'fileclass']
        });

this.filesTemplate = new Ext.XTemplate(
        '<div class="files_container"><tpl for=".">',
        '<div id="{filename}" class="basket-fileblock"><div class="{fileclass}"></div>',
'<div class="filetext">{filename}</div></div> ','</tpl></div>');

this.filesTemplate.compile();

this.filesDataView = new Ext.DataView({
            itemSelector : 'div.basket-fileblock',    //Required
            style : 'overflow:auto',
            multiSelect : true,
            store : this.store,
            tpl : this.filesTemplate
        });

var panel = new Ext.Panel({
            layout : 'fit',
            items : [this.filesDataView]
        });

Here XTemplate is the HTML template of each of the items. Have a look at the ExtJS documentation which provides a number of examples for XTemplate.

And for an example, ExtJS each function can be used this way:

Suppose an array of items is myItems. So,

Ext.each(myItems, function(eachItem){
     //Do whatever you want to do with eachItem
}, this);