Focus on textfield in a table

Hi, I am getting the text values from my table with this way:

for (var i = 0; i <2 ; i++ ){
 
            var section = tableView.data[0];
            var rows = section.rows;
            var thirdRow = rows[i];
            var children = thirdRow.children;
            var txt = children[1];
 
            if(i==0){
                 email = txt;
                }
            else
                {
                    password=txt;
                }
 
        }

Then I get the values with email.value and password.value. I want to focus(and show the keyboard) on email textfield when the window is open. i tried email.focus() but its not working

Try to use textfield.focus() function inside the open listener the window, containing that table. For more help use this link.

Hi Michael

The answer to your question may depend heavily on how you created the fields in the first place. Have you embedded the text fields into the rows leaving the variables in-accessible externally?

Can you provide the creation routine - even if you simplify it, so I can help.

Hi Michael

I have the answer for you and I also got a bit carried away with features that might be useful - sorry!

The problem you have (as you might have guessed) is scope, as the variable references used to create the fields are held in a function - outside the scope of normal access.

I have created three helper functions and example code how to use them.

Helper 1 is addRowText, you use this to add the row, label and text field in one go - it returns the row object, child views and event handlers for that row instance.

Example usage;

var row = addRowText({
    hintText: 'Enter Password',
    id: 'password',
    passwordMask: true,
    title: 'Password',
    value: ''
});

You can see from this that you have a lot of control - and hopefully you will see how to extend it.

Helper 2 is setFocus, you use this once the table is created and added to a window.

Example usage;

setFocus({
    id: 'email',
    table: tbl
});

Helper 3 is getValues, you use this to get an object of all fields within the table with their field ids and values.

Example usage;

var values = getValues({
    table: tbl
});
Ti.API.info('values', JSON.stringify(values));

Additionally I have created an event you can listen for called changed, this returns the id and value for whichever field is being changed and the time. You can use this do process things as typed, rather than waiting until the end.

This is the full code - only assumption is there is a window called win1 and it is already opened.

function addRowText(obj) {
    var row = Ti.UI.createTableViewRow({
        backgroundColor: '#fff',
        height: 50,
        id: (obj.id || undefined)
    });
    var lbl = Ti.UI.createLabel({
        height: Ti.UI.SIZE,
        left: 10,
        text: (obj.title || 'Unknown'),
        width: Ti.UI.SIZE
    });
    row.add(lbl);
    var txt = Ti.UI.createTextField({
        height: Ti.UI.FILL,
        hintText: (obj.hintText || ''),
        passwordMask: (obj.passwordMask || false),
        right: 10,
        value: (obj.value || ''),
        width: 180
    });
    row.add(txt);
    row.setFocus = function () {
        txt.focus();
    };
    row.getValue = function () {
        return txt.getValue();
    };
    txt.addEventListener('change', function (e) {
        row.fireEvent('changed', {
            id: row.id,
            value: e.value
        });
        return false;
    });
    return row;
}
function setFocus(obj) {
    var data = obj.table.getData()[0].rows;
    var intRow = 0, intRows = data.length, id = '';
    for (intRow = 0; intRow < intRows; intRow = intRow + 1) {
        id = data[intRow].id;
        if (obj.id === id) {
            data[intRow].setFocus();
        }
    }
}
function getValues(obj) {
    var data = obj.table.getData()[0].rows;
    var intRow = 0, intRows = data.length, id = '';
    var ret = {};
    for (intRow = 0; intRow < intRows; intRow = intRow + 1) {
        id = data[intRow].id;
        ret[data[intRow].id] = data[intRow].getValue();
    }
    return ret;
}
 
var data = [];
 
data.push(addRowText({
    id: 'email',
    hintText: 'Enter Email',
    title: 'Email',
    value: ''
}));
data.push(addRowText({
    hintText: 'Enter Password',
    id: 'password',
    passwordMask: true,
    title: 'Password',
    value: ''
}));
 
var tbl = Ti.UI.createTableView({
    data: data,
    style: Ti.UI.iPhone.TableViewStyle.GROUPED
});
win1.add(tbl);
tbl.addEventListener('changed', function (e) {
    Ti.API.info(e.id, e.value);
});
 
var btnFocus = Ti.UI.createButton({
    title: 'Focus'
});
win1.setLeftNavButton(btnFocus);
btnFocus.addEventListener('click', function (e) {
    setFocus({
        id: 'email',
        table: tbl
    });
});
var btnValues = Ti.UI.createButton({
    title: 'Values'
});
win1.setRightNavButton(btnValues);
btnValues.addEventListener('click', function (e) {
    var values = getValues({
        table: tbl
    });
    Ti.API.info('values', JSON.stringify(values));
});

Let me know what you think. I have fully tested this on iOS but should work on Android as well.

Remember this can be extended - just follow the example structure to make it your own.