PDA

View Full Version : How to set focus on the html element?



robert6000
26 Nov 2007, 12:29 AM
Hi,

When the window is showing I can see the focus on the element but it disappeared. This is my code.



function commentIssue(issue_id, issue_type_id, type, project_id, can_add_timesheet, date, week, year)
{
var conn = new Ext.data.Connection();
conn.request(
{
url: 'index.php',
method: 'post',
params: {'item':'comment',
'action':'view_comment',
'issue_id':issue_id,
'issue_type_id':issue_type_id,
'type':type,
'template_type':'ajx'
},
success: function(responseObject)
{
var comment_issue_window = createWindow(responseObject.responseText, 'Comment', 525, 300);
comment_issue_window.show();
$('issue_description').focus();
},
failure: function()
{
showError('Unable to show comment window at this time. Try again.');
$('ajax_loading').hide();
}
});
}


returned_markup


<table class="tb_invisible">
<tr>
<td class="edit_item_last" style="width:200px;">
Comment
</td>
<td class="edit_value_last">
<textarea class="edit_textarea" id="issue_description" rows="10" cols="75"></textarea>
</td>
</tr>
</table>



function createWindow(returned_markup, window_title, window_width, window_height)
{
simple_window = new Ext.Window({
title: window_title,
html: returned_markup,
layout:'fit',
width: window_width,
height: window_height,
closable: true,
closeAction:'hide',
minimizable: true,
border: false,
plain: true,
modal: true,
bodyStyle:'padding:15px 5px 0px 5px',
autoScroll:true
});

simple_window.on('minimize', function(){
simple_window.toggleCollapse();
});

return simple_window;
}


I know that I should used ext form but I try to rebuild my application and first I want to create ext window with the content and I don't know how I can set focus on the html element?

Thansk a lot for the help.

hendricd
26 Nov 2007, 5:50 AM
You need to wait for an appropriately timed event (when the markup has been rendered to the window's body):



simple_window.on(
{'minimize': function(){
simple_window.toggleCollapse();
},
show: function(){
// $('issue_description').focus(); or
Ext.get('issue_description').focus();

}
});

robert6000
26 Nov 2007, 12:17 PM
Thanks, a lot hendricd

it's almost works. When I set alert in show function it's ok without it the focus isn't set.



simple_window.on(
{'minimize': function(){
simple_window.toggleCollapse();
},
show: function(){
alert('OK');
Ext.get('issue_description').focus();
}
});


Maybe You have another solution this problem ??

Best,
Robert

tryanDLS
26 Nov 2007, 12:25 PM
You need to delay the focus call to give the rendering a chance to finish. Try


show: function(){
Ext.get('issue_description').focus.defer(100);
}


EDIT: if the above causes an error b/c of scope try it this way


show: function(){
var f = Ext.get('issue_description');
f.focus.defer(100, f);
}

hendricd
26 Nov 2007, 12:39 PM
Seeing as this is a textarea, have you tried it on IE? (FF has cursor issues sometimes on inputs)

robert6000
26 Nov 2007, 12:39 PM
tryanDLS thank YOU a lot the second example works

Best,
Robert