Results 1 to 8 of 8

Thread: Resizing and alignment in Ext.Viewport

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

    Default Resizing and alignment in Ext.Viewport

    Hello and good day.

    I have a JSP files that contains a Viewport for displaying information.
    Code:
    Ext.onReady(function()
                    {
                        var diagnosticTextArea;
                        
                        // Handles refreshing diagnostic window
                        var refreshButton = new Ext.Button ({
                                                text: 'Refresh',
                                                id: 'refreshButton',
                                                handler:function()
                                                {
                                                    // Clear the textarea and reload with possibly new data
                                                    diagnosticTextArea.reset();
                                                    
                                                    Ext.Ajax.request({
                                                            url: 'getDiagnostics.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: 'closeButton',
                                                handler:function()
                                                {
                                                    window.close();
                                                }
                        });
                        
                        // Text area for response
                        diagnosticTextArea = new Ext.form.TextArea({
                            id: 'diagTextArea',
                            xtype: 'textarea',
                            readOnly: true,
                            width: 975
                        });
                            
                        // The construction of the window
                         var diagnosticView = new Ext.Viewport({
                            layout: 'border',
                            id: 'diagnosticView',
                            items : [{
                                    region: 'center',
                                    items: diagnosticTextArea 
                                },{
                                    region: 'south',
                                    xtype: 'toolbar',
                                    height: 25,
                                    items: [ refreshButton, closeButton ]
                            }]
                         }); 
                         diagnosticView.doLayout();
    
                         Ext.Ajax.request({
                                url: 'getDiagnostics.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);
                                }
                        });
                    });
    The following are issues I am trying to resolve:

    a) The textarea is centered and it auto-resizes according to the data it receives. However, the textarea does not resize with the window.

    b) Is it possible to move the buttons from left align to a center or right align?

    Any information is greatly appreciated. Thank you in advance.

  2. #2

    Default

    I would also appreciate any help on this.
    Thanks

  3. #3
    Sencha User
    Join Date
    Nov 2010
    Posts
    36

    Default

    Quote Originally Posted by mastachef View Post
    b) Is it possible to move the buttons from left align to a center or right align?
    As an example, this brief extension should get you a right-aligned button:
    Code:
        RightButton: Ext.extend(Ext.Button, {
            initComponent: function() {
                var config = {
                    boxMaxWidth: 100,
                    scale: 'medium',
                    style: 'float:right;margin-left:15px;'
                    };
                Ext.apply(this, Ext.apply(this.initialConfig, config));
                App.RightButton.superclass.initComponent.apply(this, arguments);
                }
            }),
    The only import style parameter is float but setting a left-side margin is important if you want to add other buttons in line.

    To get a center-aligned button, set a style with definite width and height and a margin of '0 auto' as in the following example:
    Code:
        CenterButton: Ext.extend(Ext.Button, {
            initComponent: function() {
                var config = {
                    boxMaxWidth: 100,
                    scale: 'medium',
                    style: 'margin:0 auto;width:60px;height:30px;
                    };
                Ext.apply(this, Ext.apply(this.initialConfig, config));
                App.CenterButton.superclass.initComponent.apply(this, arguments);
                }
            }),

  4. #4
    Sencha User
    Join Date
    Jan 2012
    Location
    United States
    Posts
    1

    Default

    I was also trying to find out how to move the buttons from left align. Thanks for the tip.

  5. #5
    Sencha User
    Join Date
    Mar 2012
    Location
    United States
    Posts
    1

    Default

    Anyone who has found this answer would appreciate giving us this information.

    Thanks

    Abrahamid

  6. #6
    Sencha User
    Join Date
    Apr 2012
    Location
    United States
    Posts
    1

    Default

    I too am looking for this answer. Anyone who knows could you please share with those who need to know.

    Thanks

  7. #7
    Sencha User
    Join Date
    Apr 2012
    Location
    United States
    Posts
    1

    Default

    I am looking to find this answer as well. Looks like nobody knows about this.

  8. #8
    Sencha User
    Join Date
    Jan 2011
    Posts
    549

    Default

    I think people are probably unwilling to help someone who creates multiple accounts to pretend there are multiple people with the same problem...

Posting Permissions

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