Results 1 to 2 of 2

Thread: Horizontal scroll bar in TextArea

  1. #1
    Sencha Premium Member
    Join Date
    Nov 2008
    Posts
    28

    Default Horizontal scroll bar in TextArea

    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.

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

  2. #2

    Default

    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...
    Wes

Posting Permissions

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