PDA

View Full Version : Ext JS and Sencha Touch!



mcamer
15 Jul 2010, 1:57 PM
Hey Guys, so I'm trying to build an application that would run on both Desktop Browsers and Mobile Browsers, and since I'm in love with Sencha and Ext JS, not only in love but the syntax is very similar and there are bunch of stuff that can be used cross both frameworks such as the Stores,Ajax requests...etc., I decided to build the app with both frameworks based on the environment the page is loaded in.

I tried to load both the Ext Js and Sencha Toch JS files into the same page "I knew it wasn't going to work but I had to try it :P" and it didn't work ... So the question would be, is there anyway I can alternate between both frameworks? Like for example load the Ext JS if it's in a desktop browser and load the Sencha Touch if it's on a mobie browser?
Or if there are any recommendation on how to approach this that would be geat.

Thanks,
Amer

aw1zard2
15 Jul 2010, 2:43 PM
This is very easy to do. Just run several checks when the device first contacts your website then save information on whether it's a mobile/ tablet or desktop.

We have a check JavaScript that gets loaded from the index.html. It saves the data in hidden input fields and does a regular JS submit to the back-end so each session is setup with the resolution, viewable size and etc. From there our web layout engine sends the correct layouts depending upon the device. All stores go to 1 php file that handles the data CRUD functions. Why build 2 back-end systems when only the front-end layouts will change. Of course we limit what can be displayed on the mobile devices for now since there really isn't any room for grids, etc. But we allowed quick data views to "public" data any "private" data is only available to the desktop web app.

It just depends on your needs but is very easy to handle on the back end system.

mcamer
15 Jul 2010, 3:37 PM
Thanks aw1zard2 for the quick reply!

Actually I will be having 1 back-end, as you said no point to double the work in the back end since the differences are on the front-end. The reason why I wanted both Ext JS and Sencha Touch, is that I need some data grid views for the desktop users, and the fancy HTML5 stuff for the iPhone/Android users. Both users will be looking at the same data, and same business logic except in different views. So is there a way that I can leverage both in the same implementation? I really don't think implementing 2 front-ends would be a wise thing to do since the maintenance would be a pain in the neck.

Regards,
Amer

jeroenvduffelen
16 Jul 2010, 2:31 AM
I was just discussing this internally here with some people. We are going to build our stuff desktop and mobile as well... how to abstract and make sure we've got only one base for the logic and another for display...

mcamer
16 Jul 2010, 4:46 AM
It seems like it's similar to my case jeroenvduffelen, do you need the Ext JS components that are not supported by Sencha Touch for your desktop application? Such as the GridPanel?

aw1zard2
16 Jul 2010, 7:57 AM
How can you implement 2 different JS libraries and not have 2 front-ends?

You design each screen to fit the device anyways and we have one go to system that knows which design goes where hence your doing 2 front ends. ;)

Only time Sencha Touch and Ext JS will be closer will be when Ext JS 4 comes out. Then the stores, etc. will be closer in syntax.

So for right now we are stuck doing 2 different designs one for mobile/html5 and one for desktops.

:)

jeroenvduffelen
16 Jul 2010, 3:20 PM
yep, will be a matter of waiting until ext js 4 arrives i guess...

aw1zard2
17 Jul 2010, 8:07 PM
yep, will be a matter of waiting until ext js 4 arrives i guess...

Why wait for Ext JS 4? As long as the back end is sending JSON, your gonna have to design the front end anyways. It took me 5 1/2 days to make the mobile screens we wanted for data views. No updating on mobile side only desktop side. That was 25 different mobile data layouts with custom css using sass. If you want a good jump on Ext JS get the book "Ext JS in Action" I make all of my dev team get it that will be doing any Ext JS coding. That book jumped a lot of my dev team way ahead so they understood what I was coding. You don't have to wait to get things working. Besides with HTML5 and CSS3 still not finished things can change. So I'd rather have the desktop system complete and have some quick views on the mobile then make an entire mobile system then wait for Ext JS 4.

slisbin
1 Dec 2010, 10:19 AM
We have a complex application using Ext JS (with lot's of drag-and-drop, windows and grids) that has till now been used on desktop browsers. We have client requests to provide this app "as is" for use on iPads. Is there a way that we can add the Sench Touch events to our app to handle the touch events?