Results 1 to 6 of 6

Thread: Fluid Layout

  1. #1
    Sencha User
    Join Date
    Sep 2013
    Location
    Chennai, India
    Posts
    6
    Vote Rating
    0
      0  

    Default Fluid Layout

    Orientation change in Touch applications is a real design problem, particularly with enterprise apps in tabs.
    * App designed for portrait mode will be left with empty space on page, when moved to landscape
    * On the other side App designed for landscape mode, with components placed from left to right in hbox, will not wrap in portrait mode.


    Fluid layout is designed to take care of these issues. Flexbox layout is extended to build the Fluid layout along with some CSS changes. This is tested fine in webkit, it may need CSS tweaking for others.



    Ext.define('Ext.ux.layout.Fluid', {
    extend: 'Ext.layout.FlexBox',
    alias: 'layout.fluid',
    setContainer: function(container) {
    this.callSuper(arguments);
    container.innerElement.replaceCls('x-horizontal','x-horizontal-fluid');
    // the new css style x-horizontal-fluid is defined in the CSS
    }
    });



    Usage

    {
    layout: {
    type: 'fluid' //use 'fluid' in place of 'hbox'
    },
    items: [ ...fields...]
    });

    CSS
    .x-horizontal-fluid{
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
    }
    .x-layout-box.x-horizontal-fluid {
    -webkit-box-orient: horizontal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important
    }
    .x-layout-box.x-horizontal-fluid > .x-layout-box-item.x-flexed {
    min-width: 0 !important
    }
    .x-webkit .x-layout-box.x-horizontal-fluid > .x-layout-box-item.x-flexed {
    width: 0 !important
    }


    Caveats:
    If there are multiple rows in a page each inside a fluid layout then the page will wrap fine in portrait mode. But any hbox layout is placed in between these fluid layout rows and that is wide enough then the fluid layout rows below the hbox layout may not warp. So, for the page to behave like fluid there should not any blocking hbox layout, and all rows has to use fluid layout.
    * Not tested in all device types

  2. #2
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    10,396
    Vote Rating
    264
      0  

    Default

    Thanks for sharing your work with the community. Any chance you can post a demo of your fluid layout?

  3. #3
    Sencha User
    Join Date
    Sep 2013
    Location
    Chennai, India
    Posts
    6
    Vote Rating
    0
      0  

    Default

    Gary, I have captured screen video from android tab and windows.

    Each row is inside the fluid layout, so the components wraps within each row.


  4. #4
    Sencha User
    Join Date
    Sep 2013
    Location
    Chennai, India
    Posts
    6
    Vote Rating
    0
      0  

    Default

    Video from desktop.
    Resizing the chrome (app mode) window's width wraps the components in fluid layout.



  5. #5
    Sencha User
    Join Date
    Sep 2013
    Location
    Chennai, India
    Posts
    6
    Vote Rating
    0
      0  

    Default

    Sample application:

    PHP Code:
    Ext.Loader.setPath({
        
    'Ext.ux''./ux'
    });
    Ext.application({
        
    name'Fluid-Layout-Demo',
        
    requires:[
            
    'Ext.field.Text','Ext.ux.layout.Fluid'
        
    ],
        
    launch: function() {
            
    Ext.create('Ext.form.Panel', {
                
    fullscreentrue,
                
    items: [
                    {
                        
    layout:{
                            
    type:'fluid'
                        
    },
                        
    items: [
                            {
                                
    layout: {
                                    
    type'vbox'
                                
    },
                                
    items: [
                                    {
                                        
    xtype'label',
                                        
    cls'form_field_label',
                                        
    html'Label 1:'
                                    
    } ,
                                    {
                                        
    xtype'textfield',
                                        
    value'One',
                                        
    style'border-color: white;  border-style: solid;'
                                    
    },
                                    {
                                        
    xtype:'spacer'
                                    
    }
                                ]
                            },
                            {
                                
    layout: {
                                    
    type'vbox'
                                
    },
                                
    items: [
                                    {
                                        
    xtype'label',
                                        
    cls'form_field_label',
                                        
    html'Label 2:'
                                    
    } ,
                                    {
                                        
    xtype'textfield',
                                        
    value'Two',
                                        
    style'border-color: white; border-style: solid;'
                                    
    },
                                    {
                                        
    xtype:'spacer'
                                    
    }
                                ]
                            },
                            {
                                
    layout: {
                                    
    type'vbox'
                                
    },
                                
    items: [
                                    {
                                        
    xtype'label',
                                        
    cls'form_field_label',
                                        
    html'Label 3:'
                                    
    } ,
                                    {
                                        
    xtype'textfield',
                                        
    value'Three',
                                        
    style'border-color: white;  border-style: solid;'
                                    
    },
                                    {
                                        
    xtype:'spacer'
                                    
    }
                                ]
                            },
                            {
                                
    layout: {
                                    
    type'vbox'
                                
    },
                                
    items: [
                                    {
                                        
    xtype'label',
                                        
    cls'form_field_label',
                                        
    html'Label 4:'
                                    
    } ,
                                    {
                                        
    xtype'textfield',
                                        
    value'Four',
                                        
    style'border-color: white;  border-style: solid;'
                                    
    },
                                    {
                                        
    xtype:'spacer'
                                    
    }
                                ]
                            }
                        ]
                    }
                ]
            });
        }
    }); 

  6. #6
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    10,396
    Vote Rating
    264
      0  

    Default

    Awesome, thanks. I added your sample application to this Fiddle:
    https://fiddle.sencha.com/#fiddle/1glg

Similar Threads

  1. Replies: 2
    Last Post: 21 Jul 2012, 6:11 AM
  2. Replies: 4
    Last Post: 15 Jul 2012, 3:43 AM
  3. Fluid Carousel height?
    By mikegulline in forum Sencha Touch 2.x: Q&A
    Replies: 3
    Last Post: 19 Jan 2012, 1:42 PM
  4. Extjs4 with Fluid Design
    By renganathan in forum Ext: Q&A
    Replies: 1
    Last Post: 8 Dec 2011, 4:18 AM
  5. FormPanel with fluid layout for fields
    By durlabh in forum Community Discussion
    Replies: 8
    Last Post: 29 Apr 2010, 2:57 PM

Posting Permissions

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