Results 1 to 6 of 6

Thread: Responsive config issue

  1. #1
    Sencha User
    Join Date
    Apr 2015
    Posts
    2

    Default Responsive config issue

    I have an Ext-container component and three buttons on it. I am trying to use responsive config for the three button items. I am using screen width as rule. So, when the width is less than 600, the layout changes only when I reload the page. Can someone help in understanding if I am doing anything wrong here.

    responsiveConfig: {
    'width > 600': {
    layout : {
    type:"hbox"
    }
    },
    'width <= 600': {
    layout : {
    type:"vbox"
    }
    }
    },

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    Changing layouts at runtime is not currently supported. There is a feature request for it here:
    http://www.sencha.com/forum/showthread.php?294082

  3. #3
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Hillsborough, NC
    Posts
    429
    Answers
    3

    Default

    Quote Originally Posted by kkn View Post
    I have an Ext-container component and three buttons on it. I am trying to use responsive config for the three button items. I am using screen width as rule. So, when the width is less than 600, the layout changes only when I reload the page. Can someone help in understanding if I am doing anything wrong here.

    Code:
    responsiveConfig: {                      
            'width > 600': {                  
               layout : {                                     
                 type:"hbox"                                         
               }
             },
             'width <= 600': {                        
               layout : {                                     
                 type:"vbox"
               }
             }
    },
    This can be done using a "box" layout. See the docs for this layout. "hbox" and "vbox" are subclasses of the "box" layout class.

    In your panel use:
    Code:
    layout: {
        type: 'box',
        pack: 'start
    },
    responsiveConfig: {
          'width > 600': {
               layout: {
                     vertical: false
               },
           }
          'width <= 600': {
               layout: {
                     vertical: true
               }
          }
    }
    Last edited by worthlutz; 4 Apr 2015 at 4:45 AM. Reason: add information & correct errors

  4. #4
    Sencha Premium Member CSchmitz81's Avatar
    Join Date
    Nov 2012
    Location
    Saint Louis
    Posts
    118
    Answers
    6

    Default

    Quote Originally Posted by worthlutz View Post
    This can be done using a "box" layout. See the docs for this layout. "hbox" and "vbox" are subclasses of the "box" layout class.

    In your panel use:
    Code:
    layout: {
        type: 'box',
        pack: 'start
    },
    responsiveConfig: {
          'width > 600': {
               layout: {
                     vertical: false
               },
           }
          'width <= 600': {
               layout: {
                     vertical: true
               }
          }
    }
    I tried this in a fiddle and I was not able to get it to work:


    Is there something wrong in my config?

  5. #5
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Hillsborough, NC
    Posts
    429
    Answers
    3

    Default

    Here is an updated fiddle which works:


  6. #6
    Sencha Premium Member CSchmitz81's Avatar
    Join Date
    Nov 2012
    Location
    Saint Louis
    Posts
    118
    Answers
    6

    Default Absolutly

    Fantastic!!!

    Thank you a ton!

Similar Threads

  1. Responsive Config & Retina Display
    By worthlutz in forum Ext 5: Q&A
    Replies: 2
    Last Post: 20 Mar 2015, 12:36 PM
  2. responsive config attempt breaks Architect Design View
    By worthlutz in forum Sencha Architect 3.x: Q&A
    Replies: 0
    Last Post: 13 Feb 2015, 4:28 AM
  3. Set columnWidth in responsive config
    By jineeshmg in forum Ext 5: Q&A
    Replies: 1
    Last Post: 4 Dec 2014, 12:10 PM
  4. [FIXED] Responsive Config issue with viewport in ASP.NET
    By Max01001111 in forum Ext 5: Bugs
    Replies: 1
    Last Post: 7 Jul 2014, 4:07 AM

Tags for this Thread

Posting Permissions

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