Results 1 to 8 of 8

Thread: Browser window scroll ??

  1. #1
    Ext User
    Join Date
    Jun 2009
    Location
    Barcelona
    Posts
    10

    Default Browser window scroll ??

    Hi,
    I have an Ext.window and when I resize the browser window don't appear the scroll to see all the content of the page (the window) Is there a property which I have set unproperly?? this is the code...
    Code:
     var questionPanel = new Ext.FormPanel({
         id:'questionPanel',
         url: app_link+'/risk/validatextual?'+params[1],
         standardSubmit: true,
         labelWidth: 75, 
         frame:true,
         bodyStyle:'padding:5px 5px 0',
         defaults: {width: 230},
         defaultType: 'textfield',
         items:[
           {
             id:'textarea',
             xtype:'textarea',
             emptyText : 'Esta es la pregunta que tienes que contestar',
             name: 'pregunta',
             msgTarget : 'side',
             fieldLabel: toLocal('g.title.option7.securityquestion'),
             editable  : false
           },
           {
             name: 'respuesta',
             msgTarget : 'side',
             fieldLabel: toLocal('g.title.option7.response'),
             listeners: {
               specialkey: function(field, e){
                
                   if (e.getKey() == e.ENTER) {
                       var form = field.ownerCt.getForm();
                       form.submit();
                   }
               }
           }
    
           }
         ],      
         buttons:[{
             text:'Validate',
             icon : "../images/accept.png",
             cls : "x-btn-text-icon",
             handler:function(){ 
             questionPanel.getForm().submit({
                 method:'POST', 
                 waitTitle:'Conecting', 
                 waitMsg:'Sending data...'
             }); 
         }
         }]
        });
       
    
       
       Ext.Ajax.request({
           url: app_link+'/risk/preguntas',
           success: function(resp) {
           var preguntas = Ext.decode(resp.responseText).results;
           questionPanel.findById('textarea').setValue(preguntas[0].question)
           },
           failure: function(){
             alert ('failure');
           }
        });    
    
       var win = new Ext.Window({
           title:'QuestionPad',
           id:'PreguntaPad',
           iconCls:'iconosafelayer',
           closable:false,
           resizable:false,
           draggable:false,
           plain: true,
           border:false,
           width:380,
           height:170,
           items:[questionPanel]
        });
        
        win.show();
    if you don't understand my question tell me ...

    thx

  2. #2

    Default

    Code:
    autoScroll: true
    Wes

  3. #3
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    1. Configure the window with layout:'fit'.
    2. Configure the form with autoScroll:true.
    3. Configure the fields with anchor:'-20' (optional).

  4. #4
    Ext User
    Join Date
    Jun 2009
    Location
    Barcelona
    Posts
    10

    Default

    I have tried it but the result is the same I think there is some property which is wrong

  5. #5
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    Did you make all the changes I suggested?

    ps. When you added anchor:'-20' then you should remove the defaults:{width: 230}.

  6. #6
    Ext User
    Join Date
    Jun 2009
    Location
    Barcelona
    Posts
    10

    Default

    yes i have made all the changes, i'm trying it with google Chrome ...

    that is all the code (I have also a tooltip)

    Code:
    var questionPanel = new Ext.FormPanel({
    	 id:'questionPanel',
    	 url: app_link+'/risk/validatextual?'+params[1],
    	 standardSubmit: true,
    	 autoScroll:true,
    	 labelWidth: 75, 
         frame:true,
         bodyStyle:'padding:5px 5px 0',
         defaultType: 'textfield',
         items:[
           {
             id:'textarea',
             xtype:'textarea',
             emptyText : 'Esta es la pregunta que tienes que contestar',
             name: 'pregunta',
             msgTarget : 'side',
             fieldLabel: toLocal('g.title.option7.securityquestion'),
             editable  : false,
             anchor:'-20'
            
           },
           {
             name: 'respuesta',
             msgTarget : 'side',
             fieldLabel: toLocal('g.title.option7.response'),
             anchor:'-20',
             listeners: {
               specialkey: function(field, e){
                
                   if (e.getKey() == e.ENTER) {
                       var form = field.ownerCt.getForm();
                       form.submit();
                   }
               }
           }
    
           }
         ],      
         buttons:[{
        	 text:'Validate',
        	 icon : "../images/accept.png",
        	 cls : "x-btn-text-icon",
             handler:function(){ 
    	     questionPanel.getForm().submit({
    	    	 method:'POST', 
    		     waitTitle:'Conecting', 
                 waitMsg:'Sending data...'
             }); 
         }
         }]
        });
       
    
       
       Ext.Ajax.request({
           url: app_link+'/risk/preguntas',
           success: function(resp) {
           var preguntas = Ext.decode(resp.responseText).results;
           questionPanel.findById('textarea').setValue(preguntas[0].question)
           },
           failure: function(){
             alert ('failure');
           }
        });	
    
       var win = new Ext.Window({
    	   title:'QuestionPad',
    	   id:'PreguntaPad',
    	   iconCls:'iconosafelayer',
    	   layout:'fit',
    	   modal: true,
           closable:false,
    	   resizable:false,
    	   draggable:false,
    	   plain: true,
           border:false,
           width:380,
           height:180,
           items:[questionPanel]
          
        });
    	
        win.show();
        
        
        
        Ext.EventManager.onWindowResize( function(newwidth,newheight){
    		win.setPosition((newwidth/2)-190, (newheight/2)-85 );
    		Ext.getCmp('content-anchor-tip').hide();
    		Ext.getCmp('content-anchor-tip').show();
    	}, this, true); 
       
       new Ext.ToolTip({        
    	      title:toLocal('g.risk.message.title'),
    	      id: 'content-anchor-tip',
    	      target: 'PreguntaPad',
    	      anchor: 'left',
    	      html: toLocal('g.risk.message.info'),
    	      width: 315,
    	      autoHide: false,
    	      closable: true,
    	      listeners: {
    	          'render': function(){
    	              this.header.on('click', function(e){
    	                 e.stopEvent();
    	                 Ext.Msg.alert('Link', 'Link to something interesting.');
    	                 Ext.getCmp('content-anchor-tip').hide();
    	             }, this, {delegate:'a'});
    	           }
    	        }
    	    });
    and I use eventmanager to center the window if the user resizes the browser, but I need also the scroll

  7. #7
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    Ah... we are talking about different things here.

    You are resizing the browser so the window is only partially visible and you want to see scrollbars.

    That is going to be difficult, because windows have a position:absolute style which are not included in size calculations for the browser.

    You could render a single div to the body with a fixed size, so the browser will show scrollbars for that div instead of the window.

  8. #8
    Ext User
    Join Date
    Jun 2009
    Location
    Barcelona
    Posts
    10

    Default

    thanks Condor for your help

Similar Threads

  1. Browser Scroll
    By arunkumargm1987 in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 11 Jul 2010, 9:41 PM
  2. Say browser to scroll to a specific Ext.Component?
    By maho2nd in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 14 Jan 2010, 4:26 AM
  3. Browser Window Scroll Event
    By cybertaz in forum Ext: Q&A
    Replies: 3
    Last Post: 29 Oct 2009, 4:16 AM
  4. [CLOSED][3.??] Ext.Window Maximize and Browser Window Scroll
    By GoneIn20Seconds in forum Ext 3.x: Bugs
    Replies: 11
    Last Post: 25 Jun 2009, 7:31 AM
  5. Enable browser scroll bar for border layout
    By Rajarajeswari MS in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 17 Jun 2008, 10:15 PM

Posting Permissions

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