Results 1 to 2 of 2

Thread: Question about TutorialApp and Responsive Layouts

  1. #1
    Sencha Premium Member
    Join Date
    Jun 2014

    Default Question about TutorialApp and Responsive Layouts

    I just downloaded the trial version of ExtJS 6 and went through the tutorial login app. First, I'll have to say that this is the best tutorial app you guys have put together so far. I've been using Ext since version 3 and I found this tutorial to be very well organized, relevant to the real world, and easy to follow.

    That said, I have questions about the attempt at a "responsive" layout for this application. Maybe it's not supposed to be completely responsive in which case I just have to accept it as it is. But it does not layout correctly once you shrink it down smaller than an average tablet size. I ran it on my phone and basically could not do anything after I logged in because the sidebar, which moved to the top of the application was cutoff and could not be accessed other than a partial view of the "Home" button. When I orient my phone to landscape, the sidebar moves back to the left, but again, it is not responsive to scrolling so basically everything below the third item in the sidebar is not accessible.

    When I build Web sites, they are either responsive or they're not. There's no such thing as a Web site that is "kind of" responsive for "some" devices (or least there shouldn't be in my opinion). So am I missing something here? I'm trying to gather ammunition for presenting this purchase decision to my boss. I thought that ExtJS 6 provided the ability to write once for any device but maybe I'm mistaken on that, or perhaps I'm just expecting to much from the sample app.

    Like I said, I just downloaded the trial so I'm definitely going to spend a lot more time with it in the next 30 days. I would like to hear from anybody who has been using it for awhile and how their experience has been in terms of creating apps with responsive layouts.

  2. #2
    Sencha - Support Team
    Join Date
    Mar 2015



    This is just an example of how a responsive website would work, so this is the only responsive config there:

        responsiveConfig: {
            tall: {
                headerPosition: 'top'
            wide: {
                headerPosition: 'left'
        defaults: {
            bodyPadding: 20,
            tabConfig: {
                plugins: 'responsive',
                responsiveConfig: {
                    wide: {
                        iconAlign: 'left',
                        textAlign: 'left'
                    tall: {
                        iconAlign: 'top',
                        textAlign: 'center',
                        width: 120
    Meaning that, for a wide view you have the main panel header on the left with each tab icon also on the left and for a tall view, the header will be placed at the top and each tab icon also at the top.

    If you check the docs for responsive config you will see that:
    • tall - True if width < height regardless of device type.
    • wide - True if width > height regardless of device type.
    But you have other options that you can add and you are also able to specify different config sets for resolution by pixel, for example:

     responsiveConfig: {
         'desktop || width > 800': {
             region: 'west'
         '!(desktop || width > 800)': {
             region: 'north'

    Guilherme Lopes
    Sencha Support

Similar Threads

  1. responsive confg question
    By worthlutz in forum Ext 5: Q&A
    Replies: 5
    Last Post: 27 Sep 2016, 8:22 AM
  2. Replies: 3
    Last Post: 13 Nov 2014, 3:45 PM
  3. question about layouts
    By raj_plays in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 13 Dec 2010, 11:53 AM
  4. question about layouts inside tab
    By piston in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 5 Oct 2008, 5:50 AM
  5. Basic question on Layouts
    By SilverTab in forum Ext 1.x: Help & Discussion
    Replies: 6
    Last Post: 6 Apr 2007, 12:33 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