Develop Reference

creating optiondialog on button click in titanium appcelerator

i am creating option dialog which contains radio buttons on right .this i saw in kitchensink i tried to create my own in other project but it showing error like applybutton(); undefined on button click ,i know that applybutton(); is function we have to define it but in kitchensink it directly shows how is that.
if i have to define function how could i go further,should i use images? please help me i am new to titanium appcelerator
Ti.UI.setBackgroundColor('white');
var win = Ti.UI.createWindow({
title: 'Click window to test',
backgroundColor: 'white',
exitOnClose: true,
fullscreen: false
});
var opts = {
cancel: 2,
options: ['Confirm', 'Help', 'Cancel'],
selectedIndex: 2,
destructive: 0,
title: 'Delete File?'
};
var dialog = Titanium.UI.createOptionDialog(opts);
dialog.addEventListener('click',function(e)
{
label.text = 'You selected ' + e.index;
if (e.button) {
label.text += ' button';
} else {
label.text += ' option';
}});
var button1 = Titanium.UI.createButton({
title:'Show Dialog 1',
height:40,
width:200,
top:10
});
button1.addEventListener('click', function()
{
dialog.androidView = null;
applyButtons();
dialog.show();
});
win.add(button1);
win.open();

the function applyButtons() was originally defined in the KitchenSink example code, be it at the top of the file or imported in via a commonjs module with a require statement.
If you want to call and use this method, place it at the top as a function expression eg.
var applyButtons = function() {
// Do something
};
You are getting a undefined error on the click eventLister as it can't find reference to this function.
Either remove / delete the call to the function or add it at the top of the code with whatever you want applyButtons to do.

Adding number to label on swtichclick in titanium

I am new to the scene and wonder how i am to go about this.
I have a switch that should add +1 or a "point" to a label when the switch is true.
and When it is false it should withdraw that same "point".
var win = Ti.UI.createWindow({
backgroundColor: 'white'
});
var view = Ti.UI.createView();
var win = Ti.UI.createWindow({
backgroundColor: 'white'
});
var basicSwitch = Ti.UI.createSwitch({
title: "+1"
});
basicSwitch.addEventListener('click',function(e){
});
var label1=Ti.UI.createLabel({
text: ""
});
view.add(basicSwitch);
win.add(view);
win.open();
My code so far,not much i know.

Here you go first of all their are following errors in your code
1)Making window 2 times
2)Creating a label but not adding to parent container
3)Switch has change event listener instead of click one
4)You can set the switch title
and Here goes the correct code
var win = Ti.UI.createWindow({
backgroundColor : 'white'
});
var view = Ti.UI.createView({
width : Ti.UI.FILL,
height : Ti.UI.FILL
});
var basicSwitch = Ti.UI.createSwitch({
top : 30,
value : false,
});
basicSwitch.addEventListener('change', function(e) {
if (e.value = true) {
label1.text = 1;
} else {
}
});
var label1 = Ti.UI.createLabel({
text : ""
});
view.add(label1);
view.add(basicSwitch);
win.add(view);
win.open();
Thanks

Launch titanium picker view when a button is pressed

As I came to know that we cannot use custom image or background/border/text color in pickerview in titanium yet.
So I came up with the idea of showing a button to the user with custom image/font, and when user clicks the button, the picker view rows are shown just as if launched by clicking the picker view. Is it possible?
So My Question: How can launch a picker view when a button is clicked.

You can also try Titanium.UI.OptionDialog, you can change this and in stead of having the event listener in the window you can have it in another custom view which can be used as a button.
Ti.UI.setBackgroundColor('white');
var win = Ti.UI.createWindow({
title: 'Click window to test',
backgroundColor: 'white',
exitOnClose: true,
fullscreen: false
});
var opts = {
cancel: 2,
options: ['Confirm', 'Help', 'Cancel'],
selectedIndex: 2,
destructive: 0,
title: 'Delete File?'
};
win.addEventListener('click', function(e){
var dialog = Ti.UI.createOptionDialog(opts).show();
});
win.open();

Use This:
btn.addEventListener('click', function(){
//Do your picker initialization (Picker code is taken from titanium docs)
var picker = Ti.UI.createPicker({
top:50,
useSpinner: true
});
picker.selectionIndicator = true;
var fruit = [ 'Bananas', 'Strawberries', 'Mangos', 'Grapes' ];
var color = [ 'red', 'green', 'blue', 'orange' ];
var column1 = Ti.UI.createPickerColumn();
for(var i=0, ilen=fruit.length; i<ilen; i++){
var row = Ti.UI.createPickerRow({
title: fruit[i]
});
column1.addRow(row);
}
var column2 = Ti.UI.createPickerColumn();
for(var i=0, ilen=color.length; i<ilen; i++){
var row = Ti.UI.createPickerRow({ title: color[i] });
column2.addRow(row);
}
picker.add([column1,column2]);
win.add(picker);
});

Sencha Touch 2.1: Form Panel Keyboard hides active Textfield on Android

When I tap a textfield at the bottom of the screen, the keyboard appears and hides the active element. On iOS, it works perfect.
I'm able to scroll the form, so the textfield is in the visible area, but that's not nice at all. Am I doing something wrong or is this a known bug as I have the same behaviour in this example from Sencha Touch itself: docs.sencha.com/touch/2-1/touch-build/examples/forms/
If on this form:
I tap in the textfield of "Bio", the keyboard hides the textfield, instead of scrolling the textfield up to have it visible while typing:

This is definitively a known-issue, I've seen this many times on Android. The only thing you can try to do is listen for a focus event on the input field and then scroll to the element. You might have to play around with the right Y-value, which suits your situation best.
{
xtype: 'textareafield',
name: 'bio',
label: 'Bio',
maxRows: 10,
listeners: {
focus: function(comp, e, eopts) {
var ost = comp.element.dom.offsetTop;
this.getParent().getParent().getScrollable().getScroller().scrollTo(0, ost);
}
}
},
This works for me. If you need any help implementing this, let me know!

Less intrusive solution:
on Application launch method add the following lines:
launch: function() {
if (Ext.os.is.Android) { //maybe target more specific android versions.
Ext.Viewport.on('painted', function() {
Ext.Viewport.setHeight(window.innerHeight);
});
}
// ... rest of the launch method here
}
This works just fine on many cases I have been testing on. Both Cordova and Chrome implementations. You just need to take care, in case of Cordova/Phonegap app, that the fullscreen is set to false. (Tested on Cordova 3.5)

The "Ext.Viewport.on('painted'"-solution gave me scrolling problem. The whole page could not be scrolled after orientation change, because viewport height would then be larger than window height.
(Ext.Viewport.getHeight() will not be the same as Ext.Viewport.getWindowHeight() after orientation change.)
Made a work around using overidden input:
Create a file app/overrides/field/Input.js
Ext.define('myApp.overrides.field.Input', {
override: 'Ext.field.Input',
initialize: function() {
var me = this;
// Solves problem that screen keyboard hides current textfield
if (Ext.os.is.Android) {
this.element.on({
scope : this,
tap : 'onTap',
});
}
me.callParent();
},
onResize: function(input) {
var me = input;
//if input is not within window
//defer so that resize is finished before scroll
if(me.element.getY() + me.element.getHeight() > window.innerHeight) {
Ext.Function.defer(function() {
me.element.dom.scrollIntoView(false);
}, 100);
}
},
// Solves problem that screen keyboard hides current textfield in e.g. MyTimeRowForm
//old solution with Viewport.on('painted', gave scroll problem when changeing orientation
onTap: function(e) {
me = this;
window.addEventListener( "resize", function resizeWindow () {
me.onResize(me);
window.removeEventListener( "resize", resizeWindow, true );
}, true );
},
});
And add it to app.js
requires: ['myApp.overrides.field.Input']

You may subscribe on show/hide events of keyboard and compensate input's offset. It's been tested on Android 4.2 & 4.4 (HTC One & Nexus 7).
if (Ext.os.is.Android4 && Ext.os.version.getMinor() >= 2) {
(function() {
var inputEl = null;
var onKeyboardShow = function() {
setTimeout(function() {
if (!inputEl) {
return;
}
var currentClientHeight = window.document.body.clientHeight;
var elRect = inputEl.getBoundingClientRect();
var elOffset = elRect.top + elRect.height;
if (elOffset <= currentClientHeight) {
return;
}
var offset = currentClientHeight - elOffset;
setOffset(offset);
}, 100);
};
var onKeyboardHide = function() {
setOffset(0);
};
var setOffset = function(offset) {
var el = Ext.Viewport.innerElement.dom.childNodes[0];
if (el) {
el.style.setProperty('top', offset + 'px');
}
};
document.addEventListener('deviceready', function() {
document.addEventListener("hidekeyboard", onKeyboardHide, false);
document.addEventListener("showkeyboard", onKeyboardShow, false);
}, false);
Ext.define('Ext.field.Input.override', {
override: 'Ext.field.Input',
onFocus: function(e){
inputEl = e.target;
this.callParent(arguments);
},
onBlur: function(e){
inputEl = null;
this.callParent(arguments);
}
})
})();
}

It worked better for me
{
xtype: 'passwordfield',
name: 'pass',
listeners: {
focus: function (comp, e, eopts) {
var contr = this;
setTimeout(function () {
if (Ext.os.is('Android')) {
var ost = comp.element.dom.offsetTop;
contr.getParent().getParent().getScrollable().getScroller().scrollTo(0, ost, true);
}
}, 400);
}
}
}

Unable to set data to tableview of window in titanium tab

My titanium sample code is as follows,
My Main File,
which creates tabs is as follows ,
globals.tabs = new AppTabGroup(
{
title: 'Waiting',
icon: 'images/KS_nav_ui.png',
window: new ListWindow({
title: 'Waiting',
backgroundColor: '#fff',
navBarHidden: false,
isDone: 0,
activity: {
onCreateOptionsMenu: function(e) {
var menu = e.menu;
var menuItem = menu.add({ title: "Add Customer" });
menuItem.setIcon("images/ic_menu_add.png");
var menuItem1 = menu.add({ title: "Settings" });
menuItem1.setIcon("images/ic_menu_add.png");
menuItem.addEventListener("click", function(e) {
new AddWindow().open();
});
}
}
})
},
{
title: 'Done',
icon: 'images/KS_nav_views.png',
window: new ListWindow({
title: 'Done',
backgroundColor: '#fff',
navBarHidden: false,
isDone: 1
})
}
);
The new AppTabGroup just creates one tab group and adds these two tabs + it sets currentab
So by default , my Waiting tab remains in focus,
The new ListWindow is described as follows,
exports.ListWindow = function(args) {
var AddWindow = require('ui/AddWindow').AddWindow;
var self = Ti.UI.createWindow(args);
var tableview = Ti.UI.createTableView();
setTableHandle(tableview);
var isDone = args.isDone;
Ti.API.info("isDOne chi value: " + isDone);
self.add(tableview);
tableview.addEventListener('click', function(e) {
createConfirmDialog(e.row.id, e.row.title, isDone).show();
});
Ti.App.addEventListener('app:updateTables', function() {
//tableview.setData(getTableData(isDone));
tableview.setData(o9Data);
});
return self;
};
Now by default tableview data (o9Data in above code) ( fetched from httpclient) is always set to second tab,
I changed value of isDone but it's not working
Any help is appreciated
Here is screenshot of second with data ,

Finally found solutions to this ,
since this is common code for all tabs and i used following line,
setTableHandle(tableview);
which just set's tableview variable for setting data to table, this get's overridden by last tab and therefore i was not able to add values to first or all(except last) tab.