Sencha Architect에서 만든 extJS의 app.js를 ASP.NET MVC 4에 올려보기 위해
이리저리 알아보다가 다음의 방법데로 하니 되었다.
1. ASP.NEET MVC 4 프로젝을 하나 만든다.
2. Sencha Architect의 작업 폴더를 ASP.NEET MVC 4 프로젝 아래로 두고 작업한다.
3. app.js를 생성한다. 물론 Control도 몇개 올려 본다.
4. View/Shared의 _Layout.cshtml의 <head>에 다음을 추가한다.
<script src="http://cdn.sencha.com/ext/gpl/4.2.1/ext-all.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.1/resources/ext-theme-classic/ext-theme-classic-all.css">
물론 Local에 깔려 있다면 Local것을 쓰면 된다. 나는 로컬에 깔아서 번들을 지정했다.
bundles.Add(new ScriptBundle("~/bundles/extjs").Include(
"~/Scripts/ext-4.2.1.883/ext-all.js"
));
bundles.Add(new StyleBundle("~/Content/extjs/css").Include(
"~/Scripts/ext-4.2.1.883/resources/ext-theme-classic/ext-theme-classic-all.css"
));
페이지에서는 다음과 같이 했다,
@Styles.Render("~/Content/extjs/css")
@Scripts.Render("~/bundles/extjs")
5. App_Start의 BundleConfig.cs에 다음을 추가한다.
bundles.Add(new ScriptBundle("~/bundles/appmain").Include( // 가상 경로 이름 지정
// 실제 모든 경로를 포함해야 한다. 아마 서브 폴더도 패턴지정 가능 할 것이다.
"~/<Sencha Architect 프로젝트 작업폴더>/app/model/*.js",
"~/<Sencha Architect 프로젝트 작업폴더>/app/store/*.js",
"~/<Sencha Architect 프로젝트 작업폴더>/app/view/*.js",
"~/<Sencha Architect 프로젝트 작업폴더>/app.js"
));
6. View에서 현재 Default로 지정된 View의 cshtml을 열고 다음을 추가한다. (Index.cshtml)
@Scripts.Render("~/bundles/appmain")
7. Scripts 폴더에 보면 _references.js가 있다. 여기에 다음을 추가한다. (슬래쉬 3개는 반드시 있어야 한다.)
/// <reference path="app.js" />
그러면 녹차를 볼수 있다.
참고로 extJS에서 ajax로 WCF Call 할때 일부 브라우저에서 Access-Control-Allow-Origin 에러가 날때가 있는데 Web.config에서 다음과 같이 해주어야 한다.
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers"
value ="Origin, X-Requested-With, Content-Type, Accept"/>
</customHeaders>
</httpProtocol>
</system.webServer>
하다보니 "~/bundles/appmain" 번들 폴더 지정은 약간의 생각이 필요했다.
폴더가 없으면 Exception이 나는 것이다. 그래서 간단히 다음의 함수를 하나더 만들어서
이용해본다.
static string[] GetExtJSExtJSFileNames(
string strAbsoluteWorkingPath,
string strRelativeExtJSProjectWorkingFolder)
{
// Sencha Architect가 생성하는 모든 폴더를 넣어 줘야할거 같음.
string[] strFoldersToBeChecked = {
strRelativeExtJSProjectWorkingFolder + "/app/model",
strRelativeExtJSProjectWorkingFolder + "/app/store",
strRelativeExtJSProjectWorkingFolder + "/app/view",
strRelativeExtJSProjectWorkingFolder + "/app/override",
};
List<string> strListRet = new List<string>();
foreach (string s in strFoldersToBeChecked)
{
if (Directory.Exists(strAbsoluteWorkingPath + @"\" + s) == true)
{
strListRet.Add("~/" + s + "/*.js");
}
}
strListRet.Add("~/" + strRelativeExtJSProjectWorkingFolder + "/app.js");
return strListRet.ToArray();
}
번들 추가는 ...
string[] strFiles = GetExtJSExtJSFileNames(
<Web 프로젝트 루트 절대 경로>,
<Web 프로젝트 루트 경로 아래의 Sencha Architect 프로젝트 상대 경로>);
bundles.Add(new ScriptBundle("~/bundles/appmain").Include(strFiles));
이렇게 해서 Exception을 최대한 방지해본다.
'Programming' 카테고리의 다른 글
| VC++ 2010/2012/2013로 Compile시 SDKDDKVer.h/winsdkver.h 화일 없음 에러 처리 (0) | 2013.11.20 |
|---|---|
| 윈도우 상에서 Jenkins + Visual SVN + Visual C++/C# 사용 (0) | 2013.11.19 |
| Window7에서 VS2012로 MFC 프로젝트를 위저드로 만들때 컴파일 에러 (0) | 2013.02.26 |
| 세상 원리를 계산 하는것에 대한 TED 강연 (0) | 2012.06.14 |
| 드디어 C++0x를 지원하는 Compiler가 나왔다. (0) | 2010.04.20 |