Results 1 to 6 of 6

Thread: How to set focus on the html element?

  1. #1

    Question How to set focus on the html element?

    Hi,

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

    PHP Code:
    function commentIssue(issue_idissue_type_idtypeproject_idcan_add_timesheetdateweekyear)
    {
        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'525300);
                
    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
    HTML Code:
                <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>
    PHP Code:
    function createWindow(returned_markupwindow_titlewindow_widthwindow_height)
    {
        
    simple_window = new Ext.Window({
            
    titlewindow_title,
            
    htmlreturned_markup,
            
    layout:'fit',
            
    widthwindow_width,
            
    heightwindow_height,
            
    closabletrue,
            
    closeAction:'hide',
            
    minimizabletrue,
            
    borderfalse,
            
    plaintrue,
            
    modaltrue,
            
    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.

  2. #2
    Sencha User hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,966

    Default

    You need to wait for an appropriately timed event (when the markup has been rendered to the window's body):

    Code:
    simple_window.on(
        {'minimize': function(){ 
            simple_window.toggleCollapse(); 
        },
         show: function(){
           // $('issue_description').focus();  or
            Ext.get('issue_description').focus();
    
        }
       }); 
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  3. #3

    Default

    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.

    Code:
    	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

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854

    Default

    You need to delay the focus call to give the rendering a chance to finish. Try
    Code:
         show: function(){
            Ext.get('issue_description').focus.defer(100);
        }
    EDIT: if the above causes an error b/c of scope try it this way
    Code:
         show: function(){
           var f = Ext.get('issue_description');
           f.focus.defer(100, f);
        }

  5. #5
    Sencha User hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,966

    Default

    Seeing as this is a textarea, have you tried it on IE? (FF has cursor issues sometimes on inputs)
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  6. #6

    Default

    tryanDLS thank YOU a lot the second example works

    Best,
    Robert

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •