In this post, I will be sharing my knowledge on implementing pinterest layout on Sencha-Touch 2.

Know How To:
All I did was, mapped the piece of code, that generates pinterest style in jquery. I just ported the jquery methods to corresponding SenchaTouch/Javascript methods. Excellent tutorial on how to create pinterest layout

Snippet

This is the function that does the magic, snippet at app/controller/PinterestController.js near line 89.


generatePinterest : function() {  
                /**  
                 *This is the function that does the Pinterest Magic!!!   
                 */  
                var colCount = 0;  
                var colWidth = 140;  
                var margin = 10;  
                var spaceLeft = 0;  
                var windowWidth = 0;  
                var blocks = [];  
                // windowWidth = $(window).width();  
                var windowWidth = (window.innerWidth > 0) ? window.innerWidth  
                     : screen.width;  
                console.log(windowWidth)  
                blocks = [];  
                // Calculate the margin so the blocks are evenly spaced  
                // within the window  
                colCount = Math.floor(windowWidth  
                     / (colWidth + margin * 2));  
                console.log(colCount)  
                spaceLeft = (windowWidth - ((colWidth * colCount) + (margin * (colCount - 1)))) / 2;  
                console.log(spaceLeft);  
                for ( var i = 0; i < colCount; i++) {  
                  blocks.push(margin);  
                }  
                Ext.select('.block').elements.forEach(function(element,  
                     i) {  
                  // var min = Array.min(blocks);  
                  // console.log(Array.min)  
                  var min = Math.min.apply(Math, blocks)  
                  console.log("min:", min)  
                  var index = blocks.indexOf(min);  
                  // var index = $.inArray(min, blocks);  
                  // console.log(this)  
                  // var index=blocks  
                  var leftPos = margin  
                       + (index * (colWidth + margin));  
                  console.log(leftPos)  
                  element.style.left = (leftPos) + 'px';  
                  element.style.top = min + 'px';  
                  console.log("outerheight:", element.offsetHeight)  
                  blocks[index] = min  
                       + Ext.get(element).getSize().height  
                       + margin;  
                })  
             }  


At the instance of adding the pinterest layout to the viewport, resize listener checks for the screen height/width and invokes the generatePinterest fn, which preserves the layout.


                generateView : function(showMain) {  
                console.log('i')  
                // console.log(showMain)  
                Ext.getCmp('cardLayout').destroy();  
                Ext.Viewport.add({  
                  // xclass : PinterestStyle.view.Communitypt,  
                  xclass : showMain,  
                  showAnimation : {  
                     type : 'pop',  
                     duration : 1000,  
                     direction : 'up'  
                  },  
                  listeners : {  
                     resize : function() {  
                       console.log(this)  
                       this.generatePinterest();  
                       //resize() listener for viewport width/heigth and the layout is preserved  
                     },  
                     scope : this  
                  }  
                })  
                this.generatePinterest();  
                //call on page invocation  
             }  


The Project is hosted at github: SenchaTouch2-Pinterest