carousel doesnt work after adding items - sencha-touch

The home page on my app has a swipable carousel
`{
xtype : 'carousel',
id:'myCar',
autoDestroy:false,
styleHtmlContent:true,
padding:'0 0 0 0',
height:100
}`
I have a painted listener function on my view which add items to my carousel dynamically.
`var store = Ext.getStore("inspirationStore");
var car = Ext.getCmp('myCar');
var items = car.getItems();
//destroy all items within this container before populating
if (items.length > 1){
for (var j = 0; j < items.length; j++){
items[j].destroy();
}
}
for (var i = 0; i < store.getCount(); i++){
var item = Ext.create('Ext.Panel',{
html:'<p class = "inspirationMessage"><b>'+ store.getAt(i).data.message + '</b></p>' + '<p class = "authorName"><b>' + store.getAt(i).raw.Author__r.Name + '</b></p>',
cls:'carouselPanel'
});
car.add(item);
}`
The carousel works fine the first time ,But when I go To another page then come back to my home page my carousel doesnt swipe. I could see that items are added but the carousel is not working the way it should. Any suggestions?

use setItems( Array/Object items ) which
Sets the value of items.
docs

Instead of adding items in loop try this:
var items = [];
for (var i = 0; i < store.getCount(); i++){
var item = Ext.create('Ext.Panel',{
html:'<p class = "inspirationMessage"><b>'+
store.getAt(i).data.message + '</b></p>' +
'<p class = "authorName"><b>' +
store.getAt(i).raw.Author__r.Name + '</b></p>',
cls:'carouselPanel'
});
items.push(item);
}
car.add(items);

Related

Titanium TableView data row adding custom background

i get data from my wordpress categories in titanium mobile app, i have 5 categories how to set background this 5 row ?
This My Categories JS
$.init = function() {
var rows = [];
getCategories(function(_data) {
for (var x = 0; x < _data.length; x++) {
rows.push(Alloy.createController('category-item', {
data : _data[x]
}).getView());
}
$.categories_table.setData(rows);
APP.Loading.hide();
});
This category-item
$.c_title.text = args.data.name ;
$.c_counts.text = args.data.count ;
$.row.Item = args.data;
Assuming $.row is the Ti.UI.TableViewRow object, you'd do:
$.row.backgroundImage = args.data.variableHoldingImagePath;

Appcelerator Titanium JS: Table Alphabetical Index not working

I'm trying to get my head around using a the TableView index property to create native right hand alphabetical navigation - similar to that in the Apple iOS Contacts app - shown in the picture below:
I created a really simple example, with a set of rows, with row headers, but it doesn't work - whenever I tap on an index item, it just jumps to the top of the TableView again.
Here is my example code:
// Create the first TableViewSection
var section1 = Ti.UI.createTableViewSection({
headerTitle:'A'
});
// use a loop to add some rows
for (var i=0; i < 20; i++) {
section1.add(Ti.UI.createTableViewRow({
title:'Row '+i
}));
}
// do it all again...
var section2 = Ti.UI.createTableViewSection({
headerTitle: 'B'
});
for (var i=4; i < 10; i++) {
section2.add(Ti.UI.createTableViewRow({
title:'Row '+i
}));
}
// Now, here's our table, and we're setting the data to hold the sections
var tv = Ti.UI.createTableView({
data:[section1,section2]
});
// Create a table view index
var index = [
{ title: "A", index: 0 },
{ title: "B", index: 1 }
];
// Set the index on the table view
tv.setIndex(index);
$.index.open();
$.index.add(tv);
Here is an example for you dear
var win = Ti.UI.createWindow();
var table = Ti.UI.createTableView({});
var contacts = ["Adam", "Andrew", "Boris", "Claus", "Debby", 'Saba', 'Sana', 'Wahhab', 'Zohaib', 'Zzaid', 'Zzxad'];
var curheader = 'A';
var sectionArr = [];
var index = [];
for (var i = 0, lastL, l, currSection, ilen = contacts.length; i < ilen; i++) {
l = contacts[i].substr(0, 1);
if (lastL != l) {
index.push({
title : l,
index : i
});
currSection = Ti.UI.createTableViewSection({
headerTitle : l
});
sectionArr.push(currSection);
}
currSection.add(Ti.UI.createTableViewRow({
title : contacts[i],
}));
lastL = l;
}
table.setData(sectionArr);
table.index = index;
win.add(table);
win.open();
Thanks

needed thumbnail tiles scroller/slideshow/slider

I'm looking for a thumbnail tiles scroller/slideshow/slider
Here is the example http://safari.to/clients
Really appreciate if anyone could help :) Thanks
When you see something on any website, its easy to inspect and see how they are doing it.
The website mentioned by you is doing it using their own script instead of a plug in
See the following code from http://safari.to/assets/js/script.js. You will also need to see how they are styling the sliders by inspecting their CSS code
// Agencies slide
var clients = Math.floor(Math.random() * 2) + 1; // nth-child indices start at 1
if ( clients == 1){
$('.agencies.clients').hide();
}
else
{
$('.brands.clients').hide();
}
$('.agencies menu a').bind({
click: function()
{
if(sliding) return false;
var pointer = $(this);
var width = $('.agencies .scroller li').length * 137;
var current = parseInt($('.agencies .scroller').css('left'));
var distance = 0;
if(pointer.is('.right-pointer'))
{
if(current == -1920) distance = current - 137;
else distance = current - 960;
if((width + current) < 960)
distance = current;
}
else
{
distance = current + 1097;
if(distance > 0)
distance = 0;
}
sliding = true;
$('.scroller').animate({
left: distance + 'px'
}, 300,
function()
{
sliding = false;
});
}
});

Dojo : Clear all textboxes of a div

How can I clear all the text boxes of a div from client side, in which the parent not contains any from tags.?
Thanks
If you put a classname on the divs:
var nodes = dojo.query(".className");
for(var x = 0; x < nodes.length; x++)
{
nodes[x].value = "";
// nodes[x].innerHMTL = "";
}
Or you may get the nodes with somethign like this:
var nodes = dojo.query("div>input[type='text']");
(I did not test :-/)
Adding on unludo's answer (and if using dojo 1.7):
require(["dojo/query"], function(query){
query("div > input[type='text']").forEach(function(node){
node.value = "";
});
});
if dojo < 1.7
dojo.query("div > input[type='text']").forEach(function(node){
node.value = "";
});

Adding Columns Dynamically to SlickGrid with AJAX. Columns don't show up

Using SlickGrid to display some pretty elaborate grids. The Example I am showing here isn't my code but basically an example given by the SlickGrid people duplicating my issue. My Grids need to have columns added dynamically with the column names being fed through an AJAX feed. Creating the column object in JS is not a problem and even adding them using the .push is seems to work fine as I can see them in the firebug console. The new columns never seem to rendner. I get a a bunch of tiny empty cells at the end of the grid but they never populate.
The script below can be replaced with the script in the "example1-simple.html" viewed here.
<script src="../lib/jquery.jsonp-1.1.0.min.js"></script>
<script>
var grid;
var data = [];
var columns = [
{id:"title", name:"Title", field:"title"},
{id:"duration", name:"Duration", field:"duration"},
{id:"%", name:"% Complete", field:"percentComplete"},
{id:"start", name:"Start", field:"start"},
{id:"finish", name:"Finish", field:"finish"},
{id:"effort-driven", name:"Effort Driven", field:"effortDriven"}
];
var dynamicColumns = [];
var options = {
enableCellNavigation: true,
enableColumnReorder: false
};
$(function() {
data = [];
BuildExtraColumnsAJAX();
for (var i = 0; i < 2000; i++) {
data[i] = {
title: "Task " + i,
duration: "5 days",
percentComplete: Math.round(Math.random() * 100),
start: "01/01/2009",
finish: "01/05/2009",
effortDriven: (i % 5 == 0)
};
for (var x = 0; x < 20; x++) {
var columnName = "dynamicColumn" + x;
data[i][columnName] = x;
}
}
//alert("Go Pack Go");
grid = new Slick.Grid("#myGrid", data, dynamicColumns, options);
$("#myGrid").show();
})
function BuildExtraColumnsAJAX(){
//dynamicColumns = [];
for (var x = 0; x < columns.length; x++){
dynamicColumns.push(columns[x]);
}
var url = "http://services.digg.com/search/stories? query=apple&callback=C&offset=0&count=20&appkey=http://slickgrid.googlecode.com&type=javascript";
$.jsonp({
url: url,
callbackParameter: "callback",
cache: true, // Digg doesn't accept the autogenerated cachebuster param
success: onSuccess,
error: function(){
alert("BOOM Goes my world");
}
});
}
function onSuccess(resp) {
for (var i = 0; i < resp.stories.length; i++) {
dynamicColumns.push( {
id: "dynamicColumn" + i,
name: "Dynamic Column" + i,
field: "dynamicColumn" + i
});
}
}
function BuildExtraColumns(){
dynamicColumns = [];
for (var x = 0; x < columns.length; x++){
dynamicColumns.push(columns[x]);
}
for (var i = 0; i < 20; i++) {
dynamicColumns.push( {
id: "dynamicColumn" + i,
name: "Dynamic Column" + i,
field: "dynamicColumn" + i
});
}
}
If I put the line grid = new Slick.Grid("#myGrid", data, dynamicColumns, options); in the firebug console and run it the grid than renders fine. It is almost like the script is still executing lines of code even though its not done creating the dynamicColumns.
The Digg AJAX call is just to similute an AJAX call, I of course would be using my own.
The grid is getting initialized before the AJAX call to get the additional columns completes.
Either wait until the columns have loaded to initialize the grid, or update the grid after the additional columns have loaded:
grid.setColumns(dynamicColumns);