Table View + Search Bar
Hi Team,
I am new on Titanium, i need create the following app:
I have the table view section on file test1.js, when the user make click on the button add1, the application open a new window (customer.js), this window has a list of values and the option of search.
When the user select a value in the list of values (on customer.js), i need get the value selected on file test1.js.
Any suggestions?
I have the following code:
test1.js
function openWindow(url, anim, title)
{
var win= Titanium.UI.createWindow({
title: title,
url: url,
fullscreen: false
});
if (Titanium.UI.currentTab != null)
{
Titanium.UI.currentTab.open(win,{animated:anim});
}
else
{
win.open({animated:anim});
}
}
Titanium.UI.setBackgroundColor('#fff');
var win = Titanium.UI.currentWindow;
var data =[];
var section = Titanium.UI.createTableViewSection();
data.push(section);
// ROW 1 - Customer
var row1 = Titanium.UI.createTableViewRow();
row1.height = 52;
var item1 = Titanium.UI.createLabel({
color:'#000',
text:'Customer',
font:{fontSize:16, fontWeight:'bold'},
top:4,
left:10,
height:25,
width:100
});
row1.add(item1);
var cost1 = Titanium.UI.createLabel({
color:'#999',
font:{fontSize:13,fontWeight:'normal', fontFamily:'Arial'},
top:26,
left:10,
height:20,
width:150
});
row1.add(cost1);
var add1 = Titanium.UI.createButton({
backgroundImage:'addDefault.png',
height:27,
width:27,
top:15,
right:10
});
row1.add(add1);
section.add(row1);
var tableview = Titanium.UI.createTableView({
data:data,
style:Titanium.UI.iPhone.TableViewStyle.GROUPED
});
add1.addEventListener('click', function()
{
openWindow('customer.js',true,'Customer');
});
win.add(tableview);
customer.js
var win = Titanium.UI.currentWindow;
// create table view data object
var data = [];
data[0] = Ti.UI.createTableViewRow({title:'John AppleSeed', id:'100'});
data[1] = Ti.UI.createTableViewRow({title:'John', id:'101'});
data[2] = Ti.UI.createTableViewRow({title:'Mark', id:'102'});
data[3] = Ti.UI.createTableViewRow({title:'Paul', id:'103'});
var search = Titanium.UI.createSearchBar({
showCancel:false,
hintText:'Search Customer'
});
search.addEventListener('change', function(e)
{
e.value // search string as user types
});
search.addEventListener('return', function(e)
{
search.blur();
});
search.addEventListener('cancel', function(e)
{
search.blur();
});
// create table view
var tableview = Titanium.UI.createTableView({
data:data,
search:search
});
//Titanium.App.Properties.setInt('row','');
// create table view event listener
tableview.addEventListener('click', function(e)
{
// event data
var index = e.index;
var section = e.section;
var row = e.row;
var rowdata = e.rowData;
var prop = rowdata.id;
win.close();
});
// add table view to the window
win.add(tableview);
2 Answers
-
Look at the KitchenSink Example custom_properties.js
in a nutshell though
Assign a custom property on win since it is the current windw
win.SELECTED_DATA_ID = rowdata.id;
-
You could add a custom Event in window1 that receives an object, and in window2 you will fire that event passing the selected value as an argument. So the receiving of the value will happen on the event handler.
Or
You could pass a reference of the field you want to fill from window1 to window2, and after making a selection in window2, just set that field's value and close window2.
Hope this helps.