Results 1 to 7 of 7

Thread: Sencha for mobile devices is great, but what about the desktop? aka responsive design

  1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    2

    Default Sencha for mobile devices is great, but what about the desktop? aka responsive design

    My learning curve for Sencha itself remains steep. Which is good and mostly pleasant so far. Where things get hairy though is developing/designing a single page and the included widgets that respond to a variety of user screen sizes.

    I keep thinking that Sencha can somehow transform a menu for a mobile device into something different when a desktop user comes along. I see mobile users wanting one set of "things" and developers accomodating that mobile mindset, but then along comes a desktop user with a bigger screen and a different set of expectations.

    Does Sencha have some magic for this? Would love to see what the wizards at Sencha do in this world of responsive web design and using media queries to adjust what a user sees. Don't know that there is anything different that can be done with the Sencha toolkit as much as I want there to be

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    Sencha Touch is aimed towards mobile devices. If you want to support a desktop then I would recommend using Ext JS. If you want to still use Sencha Touch then it's all about the layout and UI you want maybe even setting up a profile just for large screens.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha Premium Member
    Join Date
    Nov 2010
    Posts
    2

    Default

    Jeff's question is a good one, and may be worth another look. We're looking at a similar scenario, mixing Responsive Design (here's a great article on that - http://www.alistapart.com/articles/r...ve-web-design/) and Software Product Line Architecture (basically broad re-use). So, what this means is we'd like to be able to build ONE set of code that can span multiple platforms AND devices. For example, we might have a simple login form that, on the backend, uses the same functionality whether on a mobile or desktop device/browser. We'd like to write this form in a way that it's UI is RESPONSIVE to the device/browser. So, maybe it recognizes that up front and loads the appropriate libraries, Ext JS or Touch, along with the appropriate CSS to make it adapt to differences in screen size and resolution.

    Maybe this is worth a bit of investigation and creating an example that could be used by others interested in re-usable components and responsive design.

  4. #4
    Sencha Premium Member
    Join Date
    Feb 2009
    Posts
    3

    Default Nice Dodge!

    Great question Jeff. Terrible forum response.

    Responsive design does not pertain to desktop and mobile separately. The question is... How do you develop one app to serve both desktop and mobile within one code base?

  5. #5
    Ext JS Premium Member
    Join Date
    Aug 2010
    Posts
    24

    Default

    I agree with in2Chicago and Pers. Requiring two separate code bases, one for desktop browsers and one for mobile is not right. It would great if Sencha scaled up their Sencha Touch support (which I believe has some responsiveness) onto Desktop platforms.

  6. #6
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    My question is why couldn't you use Sencha Touch on a desktop with a touch screen?
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  7. #7
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    454
    Answers
    19

    Default

    I've built a sencha app that works great on all screen sizes...the header is a panel set using percentage widths and is 20% height at the top, so the logo and the background in the header adjusts accordingly. I basically just use percentages with everything and it seems to work great. The app adapts nicely to desktop browsers with Chrome, Safari and Firefox and also works well on iPad and to some extent iPhone (although one if the screens I'm using with lots of info is a bit cluttered).The main layout works using a container that is set to v-box, with a header panel at the top set to flex 0.2 and below is a tabpanel set to flex 0.8

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
  •