"Create Grid View" in AEM

gistfile1.js

CQ.Ext.onLoad(function() {
        var config = {
            "xtype": "sandiskCustomDataviewlens",
            "style": "overflow:visible;",
            "renderButtonTo": "lens-mosaic-button-wrapper-<%= time %>",
            "proxyConfig": {
                "url": "/bin/wcm/contentfinder/view.json/content/dam"
            },
            "storeConfig": {
                "baseParams": {
                    "mimeType": "image"
                }
            },
            "items": {
                "cls": "lens-dataview mosaic",
                "tpl":'<tpl for=".">' +
                        '<div class="col-md-3 sd-item">' +
                            '<div class="item" title="{[values.title]}">' +
                                '<div class="sd-thumbnail"' +
                                    ' style="background-image:url(\'{[CQ.HTTP.externalize(values.path,true)]}.thumb.100.140{[values.ck ? "." + values.ck : ""]}.png\');"' +
                                    ' ondblclick="CQ.search.Util.resultDblClick(event, \'{[CQ.shared.XSS.getXSSValue(values.id)]}\',\'{[CQ.shared.XSS.getXSSValue(values.path)]}\');"' +
                                    ' qtip="{[CQ.shared.XSS.getXSSValue(values.shortPath)]}<br/>' +
                                    '{[CQ.shared.XSS.getXSSValue(values.name)]}">' + 
                                '</div>' +
                                '<div class="sd-item-details">' +
                                    '<h3>{[CQ.shared.XSS.getXSSValue(values.shortTitle)]}</h3>' +
    								'<!-- <h4>Language: {[values.meta["dc:language"] ? values.meta["dc:language"] : ""]}</h4> -->' +
    								'<h4 class="publishDateContainerMosaic" >Published:{[values.lastModified? values.lastModified.format("<%= xssAPI.encodeForJSString(dateFormat) %>") : ""]}</h4>' +
    								'<h5>{[values.imageDimensions? values.imageDimensions : ""]}</h5>' +
    		                        '<div class="sd-item-actions">' +
    			                         '<a href="#" onclick="javascript:Sandisk_moreInfo(\'{[CQ.shared.XSS.getXSSValue(values.path)]}\');"><i class="icon-details" title="More info"></i></a>' +
    			        				 '<a href="#" onclick="javascript:Sandisk_drmcheck_download(\'{[values.path]}\');"><i class="icon-download" title="Download Asset and all Renditions"></i></a>' +
    			        				 '<a href="#" onclick="javascript:Sandisk_addRendition(\'{[values.path]}\');"><i class="icon-add-new" title="Add Renditions to Download Cart"></i></a>' +
    		                        '</div>' +
                                '</div>' + 
                            '</div>' +
                        '</div>' +
                    '</tpl>',
                "itemSelector": ".item"
            },
            "listeners": {
                "afterlayout": function() {
                    // workaround to set overflow visible
                    var el = this.body || this.el;
                    if(el && !CQ.Ext.isIE){
                        el.setOverflow('visible');
                    }
                    //    triggerFormatDateMosaic();
                }
            }
        };
        var lens = CQ.Util.build(config);
        CQ.search.Util.addLens(lens, "mosaic");