PDA

View Full Version : [CLOSED] MVC 3 [Razor] and Ext.Net Tabstrip



dheeraj_us
Sep 11, 2012, 9:17 PM
Can anybody share a sample to create the Ext.Net Tabstrip in a MVC [Razor] architecture?

Thanks - Dheeraj

Daniil
Sep 12, 2012, 5:48 AM
Hi Dheeraj,

Here your are.

Example

<!DOCTYPE html>

<html>
<head>
<title>Ext.Net.MVC v2 Example</title>
</head>
<body>
@Html.X().ResourceManager()

<h1>TabStrip with ActionContainerID</h1>

@(Html.X().Panel()
.ID("Panel1")
.Height(100)
.Width(350)
.Layout("card")
.ActiveIndex(0)
.TopBar(Html.X().Toolbar()
.Items(Html.X().TabStrip()
.ActionContainerID("Panel1")
.Items(tabs =>
{
tabs.Add(Html.X().Tab().Text("Summary"));
tabs.Add(Html.X().Tab().Text("Data"));
})
)
)
.Items(
Html.X().Panel().Html("Summary").Header(false),
Html.X().Panel().Html("Data").Header(false)
)
)
</body>
</html>

dheeraj_us
Sep 12, 2012, 5:19 PM
Thanks Daniil,

Do you have a MVC 3 [Razor] example of Tabstrip. The one you posted is for MVC 2 and throws Invalid Arguments for the line:
.Items(Html.X().TabStrip()

Also, I need to be able to set the URL, Style and the Controller for each Tabitem.

Daniil
Sep 12, 2012, 6:09 PM
Ext.NET v2 requires MVC 3.

Unfortunately, it won't work with MVC 2.

Please clarify what Ext.NET version do you use?

dheeraj_us
Sep 12, 2012, 6:35 PM
I am using Ext.Net V2 and MVC 3

Do I need to do some other settings also like Web.Config etc in order to use Ext.Net V2 in a MVC 3 app?

If you can provide a sample code that shows how to use the Scrollable Tabs in MVC 3 w/ EXT.Net v2, that also will be sufficient for my research.

Thanks - Dheeraj

Daniil
Sep 12, 2012, 6:46 PM
Please following this guide:
http://forums.ext.net/showthread.php?16920&p=72510&viewfull=1#post72510

dheeraj_us
Sep 12, 2012, 7:27 PM
Daniil,

I followed the instructions as mentioned and now getting JS errors:

Microsoft JScript runtime error: 'Ext' is undefined

Is there something that I need to do and is not there in the guide?

Daniil
Sep 12, 2012, 7:34 PM
Please post the Web.config and Global.asax.

dheeraj_us
Sep 12, 2012, 7:49 PM
Please see attached web.config and the global.asax files.

dheeraj_us
Sep 12, 2012, 9:00 PM
Daniil,

Checking to see if you can provide a working sample that shows how to use the Scrollable Tabs in MVC 3 Razor.

I think updating your Examples with some MVC 3 Razor samples will be a great help to the Ext JS Dev community.

Thanks - Dheeraj

Vladimir
Sep 13, 2012, 12:16 AM
I followed the instructions as mentioned and now getting JS errors:
Microsoft JScript runtime error: 'Ext' is undefined
Is there something that I need to do and is not there in the guide?


Do you work under IIS7? If yes then you have to define Ext.Net http module and handler in the system.webSection (see item III in http://examples2.ext.net/#/Getting_Started/Release_Documents/README/)

If monitor requests in Fiddler or Firebug then what a response for ext.axd requests (status code and response text)?



Checking to see if you can provide a working sample that shows how to use the Scrollable Tabs in MVC 3 Razor.

TabPanel automatically shows scroll trigger buttons if tabs headers are exceeded TabPanel width


@(
Html.X().TabPanel()
.Width(200)
.Items(
Html.X().Panel().Title("Long title for panel 1"),
Html.X().Panel().Title("Long title for panel 2"),
Html.X().Panel().Title("Long title for panel 3")
)
)




I think updating your Examples with some MVC 3 Razor samples will be a great help to the Ext JS Dev community.

First, I recommend to update Ext.Net from http://svn.ext.net/premium/branches/2.1
Many MVC bugs were fixed and many MVC improvements are added
After update you will find new MVC Examples Explorer project with few example. Project is under development still, we are adding examples but you can use it already and investigate existing examples

dheeraj_us
Sep 13, 2012, 7:37 PM
Thanks Vladimir,

I updated the SVN and have tried everything as Daniil and you suggested:
1. Changed the web.config
2. Changed the Global.asax.cs
3. Added a reference to the Ext.Net dll from my project

BUT no success, I am still getting the same 'Ext' id undefined JS error, attached is the screenshot of the error. Can anybody help me get past this issue?

Vladimir
Sep 13, 2012, 7:40 PM
If monitor requests in Fiddler or Firebug then what a response for ext.axd requests (status code and response text)?

Please provide this information

dheeraj_us
Sep 14, 2012, 4:25 PM
Finally, I was able to see the TabPanel on the UI.
The problem was that along with the Views/Web.config the DirectRequestModule is needed in the Project/Web.config also.

Now the problem is the Tab Scroll is not the default behaviour of the TabPanel, how do I add the TabScrollerMenu to the TabPanel.
Screen shot attached.

dheeraj_us
Sep 14, 2012, 5:58 PM
I got the scroll also on the UI: set the width of the TabPanel and the Scroll will show.

Next issue: How do I load the content from the Controller?
Is there a method that will accept the ActionName, ControllerName and the RouteValues (like the LoadContentFrom from Telerik)? (I need to replace the existing Telerik control with the Ext.Net TabPanel)

Thanks

geoffrey.mcgill
Sep 14, 2012, 6:30 PM
Next issue: How do I load the content from the Controller?
Is there a method that will accept the ActionName, ControllerName and the RouteValues (like the LoadContentFrom from Telerik)? (I need to replace the existing Telerik control with the Ext.Net TabPanel)

This question appears unrelated to the topic of the original thread. Please start a new thread.

We'll mark this thread as [CLOSED].