We Keep Coding

Rendering a Kendo Menu from an Ext JS Panel

I'm combining ExtJS and Kendo UI - I realise this I'm off the reservation here ;)
I'm rendering a Kendo Menu onto an Ext JS (4.2.1) generated Ext.form.Panel
Fiddle: http://jsfiddle.net/blackfrancis75/5e6Lgtaj/1/
The problem is that the drop-down items (on hover) get drawn only within the bounds of the Ext JS Panel. Is there a way to have the drop down items show 'in front' of everything (I tried changing some of the classes z-order)?

This is not z-index issue. It is parent overflow: hidden issue. If you have relatve container with overflow: hidden CSS property it will always work like that. Simple solution for kendo menu right now is to set all menu relative parents overflow to visible:
.x-panel,
.x-panel-body {
overflow: visible;
}
Like here:
http://jsfiddle.net/5e6Lgtaj/2/
But you must be beware that if you want to use it as scrollbars in them or actually hide overflow it will be a problem.
Other option would be append menu to body element, but you will face more problem then: like loose styling (cause it is moved from initial container with important classes), javascript functions to keep it in correct position and it will be more problems then it is worth.
This is first step how it could looks like:
http://jsfiddle.net/5e6Lgtaj/3/

Ext JS make paging toolbar smaller

I have a very simple question but I don't seem to find a simple answer. In fact, I haven't found any answer how to make the paging toolbar of a Ext JS grid smaller.
I made a very simple fiddle to investigate how this works, and it looks like at some point ExtJS will dynamically calculate the positions of the elements in the paging toolbar. Specifically the 'left' css attributes are set.
So I would like to know how to tweak the function that calculates these values so I can decrease these values. I could use jQuery/Javascript to do this but that just sounds so wrong so I prefer a clean ExtJS way to do this.
So instead of something like this...
I would like to see this:
For instance, the 'previous page' button in my sample has an inline css style declared (most likely done by the paging toolbar widget) with 41px to left whereas the separator icon has 81px for the same 'left' style. This goes on until the entire width of the toolbar is covered.
So to conclude, what I want is to intercept the calculations and decrease the values of the elements to lower the entire width of the toolbar.
Any suggestions would be welcome.

First set the width of your button.
new Ext.Button({
width: 100, <<== width of the button
text: 'Smaller paging toolbar',
// ...
Then you can move your element to the right with a Toolbar Separator just before your button :
[
{xtype: 'tbseparator', width: 200 },
new Ext.Button({
// ...
Here is your corrected fiddle

Thought I'd post the answer to my own question. There's a config that enables horizontal scrolling when the toolbar gets too small:
Ext.create('Ext.PagingToolbar', {
overflowHandler: 'scroller'
}

Deactivate masonry animation

I've developed a web page using masonry in order to rearrange a set of items of different heights, when user scroll down a "Loading..." message is shown and new items are loaded and layout is recalculated by masonry, so far so good. The problem is that the new items fly from the top left corner of the screen to their new position in the layout and I would like to deactivate that effect, I would prefer to fade in for example better than fly in from the top, or even do not have animation at all, just display the new item in their positions directly.
I am using masonry 3.1.5
I've tried with
$('#container').masonry().masonry( 'transitionDuration', 0 );
$('#container').masonry().masonry( 'isAnimated', false );
What can I do?

the solution that worked for me was:
$("#container").masonry({
transitionDuration: 0
});

Full size image in fancybox?

how to show full sized images in fancybox?
Now, I'm using something like this:
$('.image').fancybox();
But fancybox resize original image to other sizes. For exmple if I have 960 X 350 it resizes it to 600 X 180. But I want original size. How to do this thing?

You have autoDimensions option, which can be set to true.
For inline and ajax views, resizes the view to the element recieves.
Make sure it has dimensions otherwise this will give unexpected
results
http://fancybox.net/api

A newer solution is to include jquery.fancybox-button.css and jquery.fancybox-buttons.js to your project, and then to do something like this:
$(".fancybox").fancybox({
helpers: {
buttons: {}
}
});
This will add a bar of buttons at the top of the viewport. You can click on the resize button to have the viewport expand so that you can see the entire image rather than the viewport-sized version of the image.

Centering text in a touch scroller

I modified a version of the iScroll touch scroller. It was modified based on the carousel demo in the sample file when you download the library.
I need to center the text that is displayed when you scroll through each item and when it hits the end of the list it should correctly cycle back to the first item. This is the default behavior.
I got as far as centering the first text item but it only centers the text in the currently selected item and when another item is selected it breaks the text centering, this also breaks the snap back to first element effect when the list is done. I did this by simply adding a margin
margin:0 250px.
A sample of the modded scroller is here: http://jsfiddle.net/egfx/5TswV/2/show/
buggy code: http://jsfiddle.net/5TswV/3/
And the library is here: https://github.com/cubiq/iscroll/tarball/master
my resolution: 1600x1200
I am looking for a stretchable solution that would fit any container and res.
Thanks.

Here is your problem: Your Li's are smaller than your container, if you find a way to make the li's the same width as the container, everything will be aligned correctly.
http://fiddle.jshell.net/5TswV/5/show/
http://fiddle.jshell.net/5TswV/5/
Using jQuery:
$('#scroller li').width($('#wrapper').width());
$(window).resize(function(){$('#scroller li').width($('#wrapper').width())});