I'm trying to implement a carousel (or tabs with srcoll) in a similar fashion to the http://zite.com/ application. The main goal is to implement autocentered scrolling of closest to the center item after the scroll end.
Do you have any ideas?
Of course, if you want centered a Ext.Carousel into main Ext.Panel write something like this,
new Ext.Panel({
fullscreen: true,
...
layout: {
type: 'vbox',
align: 'center',
pack: 'center'
},
items: [
new Ext.Carousel({
...
})
]
})
and have fun Carousel centered. I hope this helps. :)
Didn't find any other way than calculating the center manually in the scroll end event and scroll to it.
Related
I want to have a window xtype that contains just an of its own size but when I show my window, it shows up as a tiny square in the middle of the screen (not the actual size of the image). I've tried using this block of code
listeners:{
afterrender: function(me){
me.el.on({
load: function (evt, ele, eOpts){
me.updateLayout();
},
error: function(evt,ele,eOpts){
}
});
}
}
to update the layout of the parent window from within the image xtype, but this makes the window not centered and centering the window during an afterrender event isn't working. Am I missing something simple? I also have the maxWidth and maxHeight configs of the image set to Ext.getBody().getViewSize().width and height respectively.
Sencha had a good reason not to use xtype: 'image' for their own icons etc.
xtype: 'image' only works with fixed width and height, so you can't even preserve aspect ratio, as far as I know.
What you want to do is to have a container and set the background-image of the container.
xtype: 'container',
style: 'background-image: url(\'image.jpg\'); background-repeat:no-repeat; background-position:50% 50%; background-size:contain'
or even just use the window: https://fiddle.sencha.com/#view/editor&fiddle/244n
I need some help with how Kendo Chart tool.
I am trying to plot a line graph with bookings on particular date. I have a booking on a particular day and can see the circular plot. If i hover on it i can see the tool tip which contains the summary of the booking. I want this tooltip to always be visible/open. At the moment it only happens on mouse over.
function createChart() {
$("#chart").kendoChart(data);
var tooltip = $("#chart").kendoTooltip({
width: 120,
position: "top",
visibe: true
}).data("kendoTooltip");
}
I am using Kendo for the first time and am very confused now. Any help will be much appreciated.
You can always show the tooltips or labels without having to hover over them by mouse, by using setting the visible of the series labels to true as follows:
seriesDefaults: {
type: "line",
labels: {
visible: true
}
}
You can check and see a demo example here: http://demos.telerik.com/kendo-ui/line-charts/local-data-binding
New to firefox development and trying my best to figure this out.
Say I want to call a function in tap_browser.js that will modify the DOM when the user clicks on the toolbar widget, how would I do this?
This is the code I have so far
require("toolbarwidget").ToolbarWidget({
toolbarID: "nav-bar", // <-- Place widget on Navigation bar
id: "tap-icon",
label: "Tap",
contentURL: data.url("favicon.png"),
contentScriptFile: [data.url("tap_browser.js")]
});
I'm currently using a library to create the toolbar widget here: https://github.com/Rob--W/toolbarwidget-jplib
I don't know too much SDK but I helped someone with something that does. Check this out:
var my_wid = widgets.Widget({
id: "my-widget",
label: "CLIIIICK",
content: "CLICK ME",
width: 100,
onClick: function()
{
require('sdk/window/utils').getMostRecentBrowserWindow().gBrowser.contentDocument.documentElement.innerHTML = 'hi';
}
});
what this does is it shows a panel with 0 width and height, you can put stuff in there, and when it shows it executes the onShow function to change the html of the current document. its not recommended to use innerHTML, addons arent accepted. Im just showing you a quick and dirty copy paste example. One that is different from the sdk doc page "Modifying the Page Hosted by a Tab"
The web page is simple, and I have a kendo window, which I show right away at document ready, but no matter what I do, the window is not pinned. I would like the window to be fixed on the screen and let content roll underneath it.
I have not used Kendo much, but would like to do so for a couple of projects.
Any insights on what I am missing?
$(document).ready(function( event ) {
var window = $("#add-comment");
window.kendoWindow({
width: "300px",
height: "315px",
position: {
top: 100,
left: 100
},
title: "Add Comment",
modal: true,
pinned: true,
visible: true,
actions: ["Maximize", "Close"],
});
Although pinned is in the documentation here it is not in the latest release of code (v2013.1.514). Hopefully any time soon. Maybe this time they updated the documentation sooner than the code :-)
In the meantime, you can get it by defining a CSS style as this:
.ob-pinned {
position: fixed !important;
}
And adding the following piece of code (compatible with your initialization):
win = $("#add-comment").data("kendoWindow");
if (win.options.pinned) {
win.wrapper.addClass("ob-pinned")
.css("top", win.options.position.top)
.css("left", win.options.position.left);
}
Example here: http://jsfiddle.net/OnaBai/dcPex/
I try to add an image to the background of a panel. the image comes from loaded data.
i tried the following code, which did not work:
var topPanel = new Ext.Panel({
flex:1,
title:'topPanel',
style:'style="background-image: url('+this.jsonData.picURL+');'
});
when I create a list it work great with 'itemTpl'.
I also tried
style:'background-image: url({picURL});'
together with
store: {
fields: ['firstName','lastName', 'picURL'],
data: this.jsondData
}
but then I get the message
[[object Object]] is not a valid
argument for
'Function.prototype.apply'.
any thoughts could help!
thnx
You can append custom style by assigning object to style property of your panel
style: {
backgroundImage: 'url(resources/branding/mobile.gif)',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center'
}
and if you want to cover the whole background use:
backgroundSize: 'cover'