ExtJs - page design with common header and footer section

0
votes

I am currently using ExtJs 4.2 for developing my web pages. I would like to know whether we can define a template and can reuse the template across the pages..To be little more clear, the page header and footer remains the same across pages and only body component changes. I mean something similar to tiles in jsp.

My scenario is like this:

I have defined a border layout in which the region="north" contains the header part, region ="south" contains the footer part and region="west" and region="center" have the body content.

All my pages have a similar layout...ie..the content at west/center is only changing across pages...so do we have solution to simplify this without defining the entire layout in all the pages...

Please let me know if further clarifications are required

~Ragesh Ak

2
extjsextjs4.2
you know you can make a single page application with extjs right? – Neil McGuigan

2 Answers

1
votes

I think you will want to use Ext.define, and extend the viewport component, giving it a border layout. See the ExtJS tutorial on creating custom components for how to do that. You will want to give it a border layout, and have static panels/containers/menus/toolbars for you north and south objects.

How you model your content/center and navigation/west components depends on the style of application you are building. If you are following the single page application concept with the Model/Store/View/Controller pattern that ExtJS gives you using Ext.app.Application, then you will want to drop empty containers in those slots since you can't swap out a border layout component. Putting in empty containers will allow you to call the removeAll function and then add your new items when changing views. If you are building a regular site that reloads the page whenever you move between views, you can extend the viewport that you created, and put your content directly into the viewport since it won't ever need to change.

0
votes

Use define to configure a class that extends container and has the border layout you just described, so you can reuse this new class as you need.