PDA

View Full Version : Horizontal scroll bar in TextArea



mastachef
22 Nov 2011, 6:15 AM
I am currently using a TextArea in a Viewport to display diagnostic information. The string that is returned in the response has the format of a grid. However, when I set the TextArea to display this information, the string does a word wrap instead of presenting a horizontal scroll bar.There is enough information that would warrant a scroll bar.



Ext.onReady(function(){

var diagnosticTextArea, buttonPanel;

// Handles refreshing diagnostic window
var refreshButton = new Ext.Button ({
text: 'Refresh',
id: 'refreshDiagnosticsButton',
handler:function()
{
// Clear the textarea and reload with possibly new data
diagnosticTextArea.reset();

Ext.Ajax.request({
url: 'getJC4ISRDiagnostics.htm' ,
scope: this,
params: {
diagnosticType: diagType,
id: deviceId
},
success: function(resp, req)
{
var responseTxt = Ext.util.JSON.decode(resp.responseText);
var diagText = responseTxt.msg;
diagnosticTextArea.setValue(diagText);
}
});
}
});

// Close the window
var closeButton = new Ext.Button ({
text: 'Close',
id: 'closeDiagnosticsButton',
handler:function()
{
window.close();
}
});

// Text area for response
diagnosticTextArea = new Ext.form.TextArea({
layout: 'fit',
id: 'diagTextArea',
inputType: 'text',
cls: 'x-form-field-readonly',
readOnly: true,
width: 950,
height: 325
});

// The construction of the window
var diagnosticView = new Ext.Viewport({
layout: 'border',
id: 'diagnosticView',
items : [{
region: 'center',
xtype: 'panel',
items: diagnosticTextArea
},{
region: 'south',
xtype: 'toolbar',
items: [ refreshButton, closeButton ]
}]
});
diagnosticView.doLayout();

Ext.Ajax.request({
url: 'getJC4ISRDiagnostics.htm' ,
scope: this,
params: {
diagnosticType: diagType,
id: deviceId
},
success: function(resp, req)
{
var responseTxt = Ext.util.JSON.decode(resp.responseText);
var diagText = responseTxt.msg;
diagnosticTextArea.setValue(diagText);
}
});
});


What I would like to do is have a horizontal scroll bar appear in the text area. Any suggestions or help would be greatly appreciated.

darthwes
22 Nov 2011, 7:16 AM
Take layout: 'fit' off the textarea. At best you meant to put layout: 'fit' onto your panel that houses your textarea.

Put the textarea in a form and put the form in your panel? Realistically you don't need a panel, either, you can just put a form on the viewport...

You need a form layout...