What is the ExtJS philosophy? Single page application?

Question

I need to write my next project using ExtJs. This is a good Javascript lib, but I do not quite understand its idea. Take the docs page , for example.

Should I write my web applications using extjs? One page that should never be updated, and all that AJAX does?

How to debug such applications, if you get to the right place can take a lot of “clicks” and work with it. You cannot fix the error and click update in the browser to see the Results.

Any suggestions?

Answer 1

Should I write my web apps using ExtJS? One page that should never be updated, and all that AJAX is doing?

You do not need to write your applications as ExtJS documentation. If you look at the sample pages for ExtJS, you will see a lot of HTML mixed with Ext widgets on separate pages. In my work, I have two different applications in which I use ExtJS, one of them is a legacy site where I use widgets to create pages, and the other is a full-featured web application that uses nothing but ExtJS for the interface. I definitely prefer the latter as soon as I hung it, but the learning curve is pretty steep.

How do you debug such applications if getting to the right place can take a lot of “clicks” and work with it.

The key here is modulating your application. Build each component individually and test it in a vacuum. Do not make you think that it must be some kind of giant JavaScript file that contains the entire application. In most web applications, the source had dozens or more JavaScript files that were merged for deployment purposes only.

A for testing and debugging must be firebug . It allows you to check Ajax requests, debug JavaScript live and much more.

Here is a series of articles about building large applications using ExtJS, this is a pretty decent read with lots of good information.

Creating a sample application in ExtJS 4 Part1 Part2 Part3

For ExtJS 3.3 and below Part1 Part2 Part3

I think it's okay to use ExtJS anyway, if you are just starting out, it may make more sense to do what you like best and add some ExtJS “buckle” along the way. However, once you start using it to create single-page applications, and you have output other than JSON, you will probably never look back at the old way you did web applications.

Answer 2

You can do what modern AJAX-based applications do, and use a hash of URLs to deeply bind your application .

Gmail is a great example of how this works. To get to my inbox, I go to:

https://mail.google.com/mail/?shva=1#inbox

To go to my contact manager, I look:

https://mail.google.com/mail/?shva=1#contacts

Both of these “pages” are on one page, and navigation always redirects me to another page while I use the application. The hash is changing.

When the page loads, you need to check window.location.hash and use it to update the state of your application.

Answer 3

Not a one-page but low-download application

I participated in a complex project that was built on:

• Asp.net 3.5
• WCF Web Services
• ExtJS 2.1
• .netTiers (with CodeSmith) for DAL + DAO
• SQL 2005 + OLAP Cubes (some of them did not work around in the application, because we used some third-party controls that partially support UpdatePanels, and this thing in itself is the basic processing of our application)
• custom appearance over existing ExtJS - it was the most difficult part of the ExtJS executive, so I suggest you stick with one of the topics provided

We did not make an actual one-page application, but it is true that the number of pages has been significantly reduced. Each area of ​​work in the application was usually a separate page. All interface processing was either performed on the client using ExtJS, or on the server side in WCF services that provided data to the ExtJS client interface.

It worked great.

I would probably change one thing today: the transition from Asp.net + WCF to Asp.net MVC . It is more suitable for such a scenario.

As for debugging, we used Firebug (Firefox plugin), like any other developer.

But using the ExtJS library was a great success. This made it easy to create a desktop-like heavy web application. This is a great unified library for developing any professional intranet web application. With jQuery and plugins, you are always left alone with the various quirks of those plugins that the community provides. ExtJS is very unified in this regard and provides a truly beautiful look and feel out of the box.

Answer 4

I think the idea is to somehow fit the feel of desktop applications in a web environment, which means that almost everything works with Ajax.

As for debugging, firebug is your friend. But this should not be different from debugging a desktop application, where many clicks can also be involved to get an error.

Answer 5

You can use something on the HasChange listener, along with what I call the “closing” format for loading the extjs screen. I wrote an article on how to create a one-page extjs application .

Answer 6

In terms of testing ExtJs ...

Here is a testing tool that tests ExtJs components (this tool was created using ExtJs!)

Siesta Testing Tool for ExtJs Testing

I personally have not used this myself, but I watched a demo video and it looks really cute!

Perhaps community members can know any alternative tools that specifically test ExtJs?

PS: I am in no way affiliated with Sencha (ExtJs) or Bryntum (Siesta). I use client level ExtJs.

Answer 7

You do not need to write like that. Sometimes it looks beautiful and faster (no updates for new pages).

You can make automatic entries for javascript that do your things with some automated testing tools or write these things yourself. Normally debugging an entire page is not such a good idea. When it is built modularly, it is easier. Isolate the problem and it is easier.

Also consider using firebug for debugging, this may help you.

Suggestion: I depend on what you do. If you are making an interactive page, then it would be nice to do it that way. This is faster, and ajax requests can be a lower server load. On the other hand, this will take more time.

Answer 8

I am using ASP.Net MVC with ExtJS. This is not a one-page application, but it is close, it looks like a one-page application.

as well as a web form application with hundreds of pages, we used some ExtJS UI widgets in this application, using a lot of IFrames, it still works and looks great. But I do not like to use the web form model and try to avoid it as much as possible.

IMHO;

• the asp.net mvc platform will be better than the web form platform.
• Controllers are very well suited for handling actions.
• Particles are useful for generating html content (scaffolding helps a lot here)

Extjs

• for navigation
• ,
• Search,
• content editing
• notification,
• pretty much for everything else ...

overall ExtJS is a great infrastructure.

Answer 9

In our application, we have created our own page class that handles switching between "pages". The whole page consists of an ExtJS container that returns your classes, and we save the history by setting #hash values ​​at the end of our URL.

Using this approach, you download your ExtJS library once, along with all the assets that bring huge dividends for performance and also support your application.