Home/ Questions/Q 8327605
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T01:10:10+00:00

I am having a fundamental problem while trying to implement my app using Ext

  • 0

I am having a fundamental problem while trying to implement my app using Ext JS 4.1, JSPs and Spring MVC 3.1. My problem resides in Ext JS 4.1 as I am pretty good at Spring.

I have a single app.js type file which according to other posts seems to be the convention. I have multiple JSPs which will all have a different layout of widgets. Is it correct to say that I should have 1 Ext JS Controller per 1 JSP? If so how do I do this? If not, what am I missing.

In my JSP file I reference the app.js file which currently has a single controller. I don’t understand how I would have a 2nd JSP reference the same app.js file and ask/tell it to use a different Ext JS controller. Can anybody help me understand this?

And yes, I have read the documentation from Ext JS but I have not seen anything but using 1 controller.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Quick answer:

    You probably want to include all script tags in one page. Then use a panel with a card layout as your main container with child items such as your admin and user panel. Then you can toggle the card layout to set the item you want displayed to be the active card at any given time. Each of those child components can have any combination of layouts and other components needed.

    Combining all files into a single app.js can be done when you go to staging or production. It is often not ideal for the development environment to have a single app.js file for development since it can slow you down and make debugging more difficult. Combining files into single app.js is ideal for production for browser performance gains at that point.

    Longer answer:

    You can have multiple jsp view pages is that is what you want but likely you want to move to the “Sencha way” and use a single view for the main app.

    With Ext JS a common use is single-page-applications which means you have a single jsp view for the main app. Often the only other page you may use is a login form on another jsp.

    It often takes some getting used to when switching from requesting each page view from the server via jsp view to using a single page app but once the transition is made, working within a single-page-app is a great experience for users and for development, too.

    In a single-page-app, the main jsp page will have all scripts of all Ext JS views and all Ext JS controllers included in it via script tags. In production you will want to use JAWR or jsbuilder3 but in early dev stage you may likely just include each script tag to minimize effort.

    A very large app that I am working in now is a Spring MVC app with a login.jsp and a home.jsp. Login.jsp uses spring security with zero Ext JS in it. A successful login takes the user to home.jsp which has all of the scripts included in it.

    Here is a configuration that you may want to try to setup. This is similar to what I often setup. Some of this info is probably already familiar but included just in case.

    Ext JS views.
    You can use a viewport with a border layout. The viewport component uses the full browser area. Border layout gives you five regions to place components in, north, east, south, west and center. You only have to use a center regions and then any other regions that want. You can include navigation panels and buttons in the east and north regions as is common. You can include a panel with a card layout in the center region. The card layout should have your admin view, your user view, etc. as items which are children of that panel. Only one of those items are visible at any time due to the use of the card layout.

    Each of these views can then be configured using any combination of layouts and components.

    Ext JS Controllers
    With the views configured, include a navigation controller that is bound to the navigation items such as buttons. When a navigation button is clicked the card layout activeItem must be toggled so the admin, user or other panel item is set to be active. To the user it will appear that the ‘page’ has changed.

    From here you can create a controller for each of the main views in that main card layout – a user controller, admin controller, etc.

    If you have not already read these, they are worthwhile reads:

    http://docs.sencha.com/ext-js/4-1/#!/guide/application_architecture
    http://docs.sencha.com/ext-js/4-1/#!/guide/mvc_pt1

    • 0