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'
Related
I am not able to find a way to change the Ace-Editor that is built into the AllouUI widget. The example below is what I would like to achieve with the theme attribute.
YUI().use(
'aui-ace-autocomplete-base',
function(Y) {
var editor = new Y.AceEditor(
{
boundingBox: '#myEditor',
height: '200',
mode: 'python',
value: 'print("Hello there!!!")',
width: '700',
theme: 'chaos'
}
).render();
Sadly, there in the code there are no predefined ways I saw to change the theme.
Is there a way change the theme to ace editor for alloyui's widget?
Not sure if Y.AceEditor component exposes the required api, but you can try to get the real ace editor object, which allows to change the theme dynamically
document.getElementById('#myEditor').env.editor.setTheme("ace/theme/chtome")
You should be able to call AceEditor.getEditor().setTheme():
editor.getEditor().setTheme('ace/theme/twilight');
In my controller, I populate a TableView with rows dynamically by building up an array of TableViewRow and populating it with a View & Image.
Here's the code that creates the View & ImageView and a click event on the view:
// Create product image view
var productImageView = Titanium.UI.createView({
borderRadius: 5,
left: 10,
top: 10,
bottom: 10,
width: 130,
backgroundColor: '#FFFFFF',
productName: Name,
imageUrl: ThumbnailUrl,
});
productImageView.add(Titanium.UI.createImageView({
backgroundColor: '#FFFFFF',
defaultImage: 'image-missing',
image: ThumbnailUrl
}));
productImageView.addEventListener('click', function(e) {
if (e.source.productName && e.source.imageUrl) {
Alloy.createController('view_product_image', { ProductName: e.source.productName, ImageUrl: e.source.imageUrl }).getView().open({
modalTransitionStyle: Ti.UI.iPhone.MODAL_TRANSITION_STYLE_COVER_VERTICAL,
modalStyle: Ti.UI.iPhone.MODAL_PRESENTATION_FORMSHEET
});
} else {
console.log('data not set');
}
});
When this code runs, within the table row, I can see the image. When I click it, nothing happens. I tried attaching the click event on the ImageView directly also but still nothing happens.
Any ideas why the click event is not getting fired? Should I be subscribing to a different event instead?
You are not receiving click event because your event source is imageview and it has no productName and imageUrl property.
To receive click event of view, you need to set touchEnabled property to false of your image view.
productImageView.add(Titanium.UI.createImageView({
backgroundColor: '#FFFFFF',
defaultImage: 'image-missing',
image: ThumbnailUrl,
touchEnabled :false
}));
however I think instead of adding a listener to each view you can add a common Listener to tableView and handle the event based on e.source.productName property as suggested by others.
I tried your code and it works for me on iOS and Android.
Maybe, can you show the TableView creation?
However, although your solution is correct, it is preferable and more efficient to add a event listener at your TableView not inside a TableViewRow due the number of listeners that will be created, then to reduce the scope of your click event only to the image, You check if the e.source has the productName and imageURL properties (e.g), otherwise you can infer that the click was outside the image.
Try like this:
$.tableView.addEventListener('click', function(e) {
if (e.source.productName && e.source.imageUrl)
console.log('hit')
});
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"
I want to change the cursor to 'Pointer' when it hover to Bar of the JQPlot.
I have tried to change in the CSS. But it didn't work. Please help me.
You need - as you tried - to modify it using CSS.
You maybe have not applying CSS change on the right element, you need to apply it to .jqplot-event-canvas :
$('#chart1').on('jqplotDataHighlight', function () {
$('.jqplot-event-canvas').css( 'cursor', 'pointer' );
});
Please see a working example here
Edit Fiddle and code updated according to sdespont's comment.
PS As written by Lukas Jelinek, you can redefine default pointer when you unhighlight your data :
$('#chart1').on('jqplotDataUnhighlight', function() {
$('.jqplot-event-canvas').css('cursor', 'auto');
});
As wrote AnthonyLeGovic, bind it using:
$('#chart1').on('jqplotDataHighlight', function () {
$('.jqplot-event-canvas').css( 'cursor', 'pointer' );
});
but don't forget to unbind it too to set the normal cursor when you move out:
$('#chart1').on('jqplotDataUnhighlight', function() {
$('.jqplot-event-canvas').css('cursor', 'auto');
});
Thanks for your answer.
Same thing we can do by this way also :
cursor: {
style: 'pointer',
show: true,
showTooltip: false
}
But i want the Cursor:"Pointer" should be displayed when it is on the bar not on the whole chart area.
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.