PDA

View Full Version : Browser window scroll ??



alexmd
14 Sep 2010, 5:14 AM
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...


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

darthwes
14 Sep 2010, 5:20 AM
autoScroll: true

Condor
14 Sep 2010, 6:02 AM
1. Configure the window with layout:'fit'.
2. Configure the form with autoScroll:true.
3. Configure the fields with anchor:'-20' (optional).

alexmd
14 Sep 2010, 6:21 AM
I have tried it but the result is the same :( I think there is some property which is wrong

Condor
14 Sep 2010, 6:28 AM
Did you make all the changes I suggested?

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

alexmd
14 Sep 2010, 6:42 AM
yes i have made all the changes, i'm trying it with google Chrome ...

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




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

Condor
14 Sep 2010, 6:50 AM
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.

alexmd
14 Sep 2010, 7:47 AM
thanks Condor for your help :)