This website is no longer actively supported
Written by John DeVight on 11 May 2011 17:54
Download RAZOR Source Code
Download ASPX Source Code
* Note: the extjs folder has all been removed to reduce the zip file size
Overview
Now that I have configured my ASP.NET MVC Project to use ExtJS, it is time to do something with it. The first thing I want to do is layout my page. The prototype that I am going to create has a title at the top of the page, a menu underneath the title, a navigation tree on the left, content in the center and a status bar at the bottom. I am going to use the ExtJS border layout to do this.
What you will end up with in the end is this:
Steps Involved
Writing the HTML for the Border Layout
To setup the border layout, I am going to use the Ext.Viewport class. In the border layout, regions are defined. I create div tags to identify the regions that I want to have in my application. The title and menu are going to be in the "north" region. The navigation tree will be in the "west" region. The content will be in the "center" region and a status bar will be in the "south" region. In the body of my (layout/master) page I am going to define div's for each region. I am going to set the id for each of my div's to the name of the region they will represent (north, west, center and south). The center region is where I will put the (@RenderBody() / ContentPlaceHolder) to render the view. I am also going to set the class for each div to "x-hide-display". According to the ExtJS documentation, this prevents a brief flicker in the content as it is being rendered in the browser.
Here is the HTML:
<body>
<div id="north">
<h1>My Application</h1>
</div>
<div id="west">
<p>My Navigation</p>
</div>
<div id="center">
@RenderBody()
</div>
<div id="south">
<p>My Status Bar</p>
</div>
</body>
Writing the JavaScript for the Border Layout
The javascript that I am going to write is going to take the div's that were defined above and turn them into the nice regions seen in the screenshot. To do this, I am going to write a function that gets executed when the ExtJS framework is ready. I am going to create a new Ext.Viewport that is going to use the border layout. Each item created in the viewport will be a region. I map the regions defined by specifying the id for the div in the contentEl attribute. I want the west region for my navigation to be collapsible to give the users some more room to work with when they need it and also be able to change the width of of the west region in case they need to see more of the content in the navigation region. I do this by setting the collapsible attribute to true and the split attribute to true.
Here is the JavaScript (found in the Scripts -> Shared -> Layout.js):
Ext.onReady(function () {
var viewport = new Ext.Viewport({
layout: 'border',
items: [
new Ext.BoxComponent({
region: 'north',
height: 40,
contentEl: 'north'
}), {
region: 'south',
contentEl: 'south',
height: 24
}, {
region: 'west',
id: 'west-panel',
title: 'Navigation',
contentEl: 'west',
split: true,
width: 200,
minSize: 175,
maxSize: 400,
layout: 'fit',
collapsible: true,
margins: '0 0 0 5'
}, {
region: 'center',
id: 'center-panel',
layout: 'fit',
contentEl: 'center'
}
]
});
});
Conclusion
That's it. We haven't written any C# code yet, but we do have a cool looking layout for our application!
