I have to add progress indicator with % of complete in different ajax request using Sencha touch 2.x, for example if I've 2 Ajax request progress indicator will show 50% complete on each request after successful server response.
Here is another way to solve it without progressIndicator:
FIDDLE
Ext.application({
name : 'Fiddle',
launch : function() {
var progressIndicator = Ext.create('Ext.Panel', {
html: '<table style="height:30px; width:100%">'+
'<tr>'+
'<td id="start" style="background-color:green;width:1%"></td>'+
'<td id="end"></td>'+
'</tr></table>',
centered : true,
modal : true,
hideOnMaskTap : true,
width : '50%',
height : '80',
});
var progress = 1;
//progressIndicator.updateBar();
Ext.Viewport.add(progressIndicator);
progressIndicator.show();
var intervalProgress=setInterval(function(){
//console.log(progress);
progress+=1;
document.getElementById("start").style.width = (progress) +'%';
//progressIndicator.setProgress(progress);
//progressIndicator.updateBar();
if(progress >= 100){
clearInterval(intervalProgress)
}
},100)
}
});
Related
I found your Fotorama gallery script v4.6.4 and it is exactly what I was looking for.
I do have a couple of questions:
How can I move the Caption down so that it is not overlaying the bottom of an image?
I would like it to be completely separate i.e.
Main Image
Caption
Thumbs
Here is an image that shows how the caption is currently obscuring the lower part of the main image, seems worse the smaller the viewport:
Caption Overlaying Image
Currently the caption shows the image title & a download link for the displayed image.
I would like the link to point to the Flickr image page instead of the ability to download it.
My JS script is currently:
<script type="text/javascript">
$(function() {
var AddPhotosToCarousel = function(data) {
var imgs = [];
$.each(data.photoset.photo, function(index, photo) {
// TODO: use flickr.photos.getSizes
caption = photo['title'] +
' <small>(Download)</small>'
imgs.unshift({img: photo['url_m'],
thumb: photo['url_s'],
caption: caption});
});
$('.fotorama').fotorama({
data: imgs,
width: '100%',
maxwidth: '960',
maxheight: '100%',
ratio: '4/3',
nav: 'thumbs',
autoplay: 8000,
keyboard: 'true',
arrows: 'true',
transition: 'crossfade'
});
};
$.getJSON('https://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=[API KEY]&photoset_id=[PHOTOSET ID]&format=json&extras=url_s,url_m,url_o&jsoncallback=?', AddPhotosToCarousel);
});
</script>
this forms a URL in the format:
https://farm2.staticflickr.com/1566/[IMAGE ID][SECRET]_o.jpg
but I would like it to form a URL in format:
https://www.flickr.com/photos/[USER]/[PHOTO ID]/in/dateposted-public/
Any help would be appreciated.
Kind regards..,
OK, I found this page:
Jquery JSON Flickr API Returning Photos in a Set
& altered my script to:
<script type="text/javascript">
$(function() {
var AddPhotosToCarousel = function(data) {
var imgs = [];
$.each(data.photoset.photo, function(index, photo) {
var a_href = "http://www.flickr.com/photos/" + data.photoset.owner + "/" + photo.id + "/";
// TODO: use flickr.photos.getSizes
caption = photo['title'] +
' (Open)'
imgs.unshift({img: photo['url_m'],
thumb: photo['url_s'],
caption: caption});
});
$('.fotorama').fotorama({
data: imgs,
width: '100%',
maxwidth: '960',
maxheight: '100%',
ratio: '4/3',
nav: 'thumbs',
autoplay: 8000,
keyboard: 'true',
arrows: 'true',
transition: 'crossfade',
click: 'false'
});
};
$.getJSON('https://api.flickr.com/services/rest/?format=json&method=flickr.photosets.getPhotos&photoset_id=72157664523293315&api_key=449126625d797cace5a6d5a90532b741&extras=url_s,url_m&jsoncallback=?', AddPhotosToCarousel);
});
</script>
While this does build the direct image link, clicking on this link only advances the slideshow instead of opening the link.
You can see that I also included the click: 'false' option but this has not stopped the issue.
How do I stop the slideshow advancing when clicking the link?
Regards..,
Right, got question 2 sorted, seemed to be an issue with Chrome caching the page.
Script is now:
<script type="text/javascript">
$(function() {
var AddPhotosToCarousel = function(data) {
var imgs = [];
$.each(data.photoset.photo, function(index, photo) {
var a_href = "http://www.flickr.com/photos/1cm69/" + photo.id + "/";
// TODO: use flickr.photos.getSizes
caption = ' <small><a href="' + a_href + '" target=_blank>' + photo['title'] + '</a></small>'
imgs.unshift({img: photo['url_m'],
thumb: photo['url_s'],
caption: caption});
});
$('.fotorama').fotorama({
data: imgs,
width: '100%',
maxwidth: '960',
maxheight: '100%',
ratio: '4/3',
nav: 'thumbs',
autoplay: 8000,
keyboard: 'true',
arrows: 'true',
transition: 'crossfade'
});
};
$.getJSON('https://api.flickr.com/services/rest/?format=json&method=flickr.photosets.getPhotos&photoset_id=72157664523293315&api_key=449126625d797cace5a6d5a90532b741&extras=url_s,url_m&jsoncallback=?', AddPhotosToCarousel);
});
</script>
& working.
So only one question left, that of the Caption overlaying the bottom of the image.
Regards..,
Does anyone have any experience using KendoUI's window with AngularJS?
I'm currently using Angular-Kendo but I'm not entirely sure hot to cleanly use the window. Or if there is any other solutions for presenting a modal dialog and filling it with a form loaded via a partial I'm open to that as well.
My current code looks something like this:
HTML:
<div kendo-window id="addWindow" ng-hidden></div>
JS:
$scope.addSection = function() {
$("#addWindow").data("kendoWindow").open();
return false;
};
But I hate this, and it feels wrong for how I'm doing everything else. Any thoughts on a better way?
Check out this blog post:
http://www.kendoui.com/blogs/teamblog/posts/13-06-24/announcing-angular-kendo-ui.aspx?utm_content=bufferbbe83&utm_source=buffer&utm_medium=twitter&utm_campaign=Buffer
They rewrote Angular-Kendo and have an example of a clean way to use a window.
#anise thanks for ur information
finally i also resolve the issue.
Controller
$scope.window;
$scope.OpenWindow= function() // custom function on click
{
$scope.DlgOptions = {
width: 550,
height: 400,
visible: false,
actions: [
"Maximize",
"Close"
]
};
$scope.window.setOptions($scope.DlgOptions);
$scope.window.center(); // open dailog in center of screen
$scope.window.open();
};
View
<div kendo-window="window" k-visible="false" k-modal="true"> </div>
Check out this library
https://github.com/kjartanvalur/angular-kendo-window
var windowInstance = $kWindow.open({
options:{
modal: true,
title: "Window title",
width: 400,
},
templateUrl: 'modal1.html',
controller: 'modalController',
resolve: {
parameter1: function () {
return "Test...";
}
}
});
windowInstance.result.then(function (result) {
// Here you can get result from the window
});
I'm trying to retrieve images from database to data view using ExtJS 4. Now I need to pass parameters dynamically. Mostly here..........
Ext.define('${pkgName}.v02x003001.SV02X00300102' , {
extend : 'Ext.view.View',
alias : 'widget.sv02x00300102',
id : 'images-view',
autoScroll : true,
trackOver : true,
multiSelect : true,
height : 310,
overItemCls : 'x-item-over',
itemSelector : 'div.thumb-wrap',
emptyText : 'No images to display',
prepareData : function(data) {
Ext.apply(data, {
shortName : Ext.util.Format.ellipsis(data.name, 15),
sizeString: Ext.util.Format.fileSize(data.size),
dateString: Ext.util.Format.date(data.lastmod, "m/d/Y g:i a")
});
return data;
},
initComponent: function() {
var me = this;
var value= Ext.getCmp('member-sv02x00300104').getValue();
me.store = 'S02X003001',
me.tpl = [
'<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<div class="thumb"><img src="${createLink(mapping:'img', params:[member: **value** , width:100, height:100])}" title="{name}"></div>',
'<span class="x-editable">{shortName}</span></div>',
'</tpl>',
'<div class="x-clear"></div>'
];
me.callParent(arguments);
}
});
So my question is how do I set value into params ( for member field )
createLink is a grails component that is processes server side, before your JS code is run.
You can't pass JS variables to a Java component because Java will always be processed first on the server and then the resulting HTML and JS will be sent to the client for processing. Client will know nothing about your server side code blocks.
I suggest you rewrite createLink piece in HTML and substitute in JS variables like you do with name and short name.
How to use button instead of text as a link in a grid pannel using extjs
the following code implies a link to a different page and i need that "Fill" link to be as button... please help me anyone
var text = 'Fill'
if(value != undefined && value !='') {
text = Ext.Date.format(value,'Y-m-d');
}
return '<span class="grid_link">'+text+'</span>';
Try to use renderTo component attribute
return '<span class="grid_link"><div id="btn"/></span>';
...
Ext.create('Ext.Button', {
text: 'Click me',
renderTo: 'btn',
handler: function() {
alert('You clicked the button!')
}
});
I am new to extjs....
I am trying to add icons to the title bar of a window.
I am not able to figure out the error in my code
i tried using tools config for the window
Here is my code:
**Ext.ns('DEV');
DEV.ChartWindow = Ext.extend(Ext.ux.DEV.SampleDesktopWidget, {
width:740,
height:480,
iconCls: 'icon-grid',
shim:false,
animCollapse:false,
constrainHeader:true,
layout: 'fit',
initComponent : function() {
this.items = [
new Ext.Panel({
border:true,
html : '<iframe src="" width="100%" height="100%" ></iframe>'
})
];
DEV.ChartWindow.superclass.initComponent.apply(this, arguments);
},
getConfig : function() {
var x = DEV.ChartWindow.superclass.getConfig.apply(this, arguments);
x.xtype = 'DEV Sample Window';
return x;
},
tools: [{
id:'help',
type:'help',
handler: function(){},
qtip:'Help tool'
}]
});
Ext.reg('DEV Sample Window', DEV.ChartWindow);**
SampleDesktopWidget is an extension of Window
Can somebody help me with this
Thanks in advance
I believe title is part of the header. I dont think you can do this with initialConfig programmatically but you can either override part of component lifecycle or hook in with an event. E.g. add this to config. You might (probably) be able to hook in at any early stage after init maybe, but thats an experiment for you.
listeners: {
render: {
fn: function() {
this.header.insert(0,{
xtype: 'panel',
html: '<img src="/img/titleIcon1.gif"/>'
});
}
}
}
However for this particular scenario I would use iconCls
iconCls: 'myCssStyle'
Then include a CSS file with:
.myCssStyle {
padding-left: 25px;
background: url('/ima/titleIcon.gif') no-repeat;
}
This is a good example that might help, using extjs 3.2.1.
Adding tools dynamically