1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    174
    Answers
    10
    Vote Rating
    1
    netemp is on a distinguished road

      0  

    Default Unanswered: How to achieve a fluid layout behavior with form inside a window

    Unanswered: How to achieve a fluid layout behavior with form inside a window


    We have a case as following:

    1. There is a Form inside a Window.

    2. If Window Width is increased, then Form Width and its Fields Width should also increase.

    3. If Window Width is decreased, then Form Width and its Fields Width should get reduced but only upto a limit.

    4. If the Window Width is reduced beyond a limit, then there should appear a scrollbar at the Form.

    For this, we gave flex to fields and minWidth to the Form, assuming that flex will take care of increase of width and minWidth to form would lead to a scroll if the window width is reduced further.

    But this does not work as per the following test case:


    Code:
    <html>
        <head>
            <title>FORTH PORTS</title>
            <link rel='stylesheet' href='resources/extjs/resources/css/ext-all.css' />
            <script type='text/javascript' src='resources/extjs/ext-all-dev.js'></script>
            <script type='text/javascript'>
                function getForm(){
                    var form    =    {
                        xtype:'form',
                        region:'north',
                        height:100,
                        autoScroll:true,
                        minWidth:300,//Giving minWidth to form here
                        title: 'Simple Form',
                        items: [
                        {
                            xtype:'container',
                            layout:'hbox',
                            items:[
                                {
                                    xtype:'textfield',
                                    fieldLabel: 'First',
                                    name: 'first',
                                    allowBlank: false,
                                    width:100,
                                    labelWidth:50,
                                    flex:1
                                },{
                                    xtype:'textfield',
                                    fieldLabel: 'Last',
                                    name: 'last',
                                    allowBlank: false,
                                    width:100,
                                    labelWidth:50,
                                    flex:1
                                }
                            ]
                        }]
                    };
                    return form;
                }
                function getWin(){
                    var win    =    Ext.create('Ext.window.Window',{
                        title:'Test Window',
                        height:400,
                        width:600,
                        layout:'border',
                        items:[
                            getForm(),
                            {
                                region:'center',
                                title:'Center Region',
                                html:'Center Region Content'
                            }
                        ]
                    });
                    return win;
                }
                Ext.onReady(function(){
                    var win    =    getWin();
                    win.show();
                });        
            </script>
        </head>
        <body>
        </body>
    </html>

    Could someone guide that what is wrong with the case above?

    And how can the conditions of fluid behavior mentioned at the top be achieved?

    Thanks for any help in advance.

    PS: ExtJs version used is 4.1

    width_increase.jpgwidth_reduced.jpg

  2. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Answers
    124
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi netemp,

    You need also give minWidth and autoScroll config to the container see-

    Code:
    function getForm(){ 
                   var form    =    { 
                       xtype:'form', 
                       region:'north',
                        height:100, 
                       autoScroll:true,
                        minWidth:300,//Giving minWidth to form here
                        title: 'Simple Form', 
                       items: [ 
                       { 
                           xtype:'container', 
                          autoScroll:true,
                           minWidth:300,//Giving minWidth to form here 
                           layout:'hbox',
                            items:[ 
                               { 
                                   xtype:'textfield', 
                                   fieldLabel: 'First', 
                                   name: 'first', 
                                   allowBlank: false,
                                    width:100, 
                                   labelWidth:50, 
                                   flex:1 
                               },{ 
                                   xtype:'textfield',
                                    fieldLabel: 'Last', 
                                   name: 'last', 
                                   allowBlank: false, 
                                   width:100, 
                                   labelWidth:50, 
                                   flex:1   
                             }  
                          ] 
                       }] 
                   }; 
                   return form;
                }
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  3. #3
    Sencha User
    Join Date
    Feb 2011
    Posts
    174
    Answers
    10
    Vote Rating
    1
    netemp is on a distinguished road

      0  

    Default


    Thanks for the post Sword-It.

    Quote Originally Posted by sword-it View Post
    Hi netemp,

    You need also give minWidth and autoScroll config to the container see-
    We updated the code as per your suggestion. But the result is still the same. The scrollbar does not appear still as shown in the attached screenshot.

    Any other workaround?

    Thanks for the time.

    width_reduced2.jpg

  4. #4
    Sencha User
    Join Date
    Feb 2011
    Posts
    174
    Answers
    10
    Vote Rating
    1
    netemp is on a distinguished road

      0  

    Default


    No takers for this? Is this not currently feasible?

    Any help anyone?

  5. #5
    Sencha Premium Member
    Join Date
    Dec 2011
    Posts
    41
    Answers
    1
    Vote Rating
    9
    jcdang will become famous soon enough

      0  

Thread Participants: 2

Tags for this Thread