PDA

View Full Version : problems integrating extjs with jquery isotope in firefox



geniodella
28 Jul 2014, 7:41 PM
Hi,
lately i wanted to have some effects when loading a grid full of images and textual content
so i created a panel and put some html content inside with isotope and mustache,
now in chrome everything is fine and the css transform animation runs correctly,
but in firefox it renders the panel without any animations most of the times
and sometime it gets run correctly , here is the code :


function isotopeSetting() {


/* Centered Masonry Columns */
$.Isotope.prototype._getCenteredMasonryColumns = function() {
this.width = this.element.width();


var parentWidth = this.element.parent().width();


// i.e. options.masonry && options.masonry.columnWidth
var colW = this.options.masonry && this.options.masonry.columnWidth
||
// or use the size of the first item
this.$filteredAtoms.outerWidth(true) ||
// if there's no items, use size of container
parentWidth;


var cols = Math.floor(parentWidth / colW);
cols = Math.max(cols, 1);


// i.e. this.masonry.cols = ....
this.masonry.cols = cols;
// i.e. this.masonry.columnWidth = ...
this.masonry.columnWidth = colW;
};


$.Isotope.prototype._masonryReset = function() {
// layout-specific props
this.masonry = {};
// FIXME shouldn't have to call this again
this._getCenteredMasonryColumns();
var i = this.masonry.cols;
this.masonry.colYs = [];
while (i--) {
this.masonry.colYs.push(0);
}
};


$.Isotope.prototype._masonryResizeChanged = function() {
var prevColCount = this.masonry.cols;
// get updated colCount
this._getCenteredMasonryColumns();
return (this.masonry.cols !== prevColCount);
};


$.Isotope.prototype._masonryGetContainerSize = function() {
var unusedCols = 0, i = this.masonry.cols;
// count unused columns
while (--i) {
if (this.masonry.colYs[i] !== 0) {
break;
}
unusedCols++;
}


return {
height : Math.max.apply(Math, this.masonry.colYs),
// fit container to columns that have been used;
width : (this.masonry.cols - unusedCols)
* this.masonry.columnWidth
};
};


}
Ext.define('Pandora.view.MostSoldProducts', {
extend: 'Ext.panel.Panel',
alias: 'widget.mostSoldProducts',
id: 'mostSoldProducts',
title: '',
width : 831,
height: 945,




listeners: {
afterrender: function(){
me = this.body;
var mem = this;
var html;





$.ajax({
type : 'GET',
url : 'https://localhost:8443/24777/ShowItems.action' ,


data : {
'subCategoryId' : 1,
'start' : 0,
'limit' : 16
//
},


success : function(data) {
isotopeSetting();
var template ='<div id="userList" data-animation="pulse">' +
'{{#prodDetails}}' +
'<div class="element">' +
'<img height="100" width="100" src="/EcommerceRoot/24544/images/{{imagePath}}"><br>' +
'<span class="userField">{{name}}</span>' +
'</div>' +
'{{/prodDetails}}' +
'</div>';
html = Mustache.to_html(template, data);

var el ;
var isData =false;
mem.html = html;

if (mem.rendered) {
el = mem.isContainer ? mem.layout.getRenderTarget() : mem.getTargetEl();
if (isData) {
mem.tpl[mem.tplWriteMode](el, htmlOrData || {});
} else {
el.update(mem.html, "", "");
}

}

$("#userList").isotope({



// options
itemSelector : '.element',
animationEngine: 'css',

masonry : {
columnWidth : 100,
columnHeight : 100
},
animationOptions : {
duration : 7500,
easing : 'linear',
queue : false
}


});


$('#content').isotope('reloadItems');


}


});




// console.log('prova : ' + this.body.dom);

}

}

});

Gary Schlosberg
1 Aug 2014, 3:52 PM
Perhaps this is an issue between isotope and Firefox:
https://support.mozilla.org/en-US/questions/955022
https://github.com/metafizzy/isotope/issues/417

In which version of Firefox are you seeing this issue?

geniodella
1 Aug 2014, 4:09 PM
Well the problem is a little bit complex,
the example outside extjs app is working correctly in every browser,
but when i plug it inside an extjs panel, this is what happens,
firefox version is 31 .
In chrome it is working well but i see that the components are all rendered
in the page when i make the update call of extjs , and once again when i
make the call of isotope.
So i guessed that the problem was that the update call did the rendering
of the panel.
When i double click fast the button that renders the panel it looks like the animation
are excetuded correctly