mvc5引用ExtJS6

摘要：VisualStuio2015 asp.net mvc如何引用ExtJS6，使用BundleConfig。

首先下载ExtJS6.0 gpl版。ExtJS有自己的程序框架，但我们需要asp.net mvc5，ExtJS只用作界面库。

接下来要把下载好的ExtJS6的核心部分抽取出来，目录结构是这样的：

要引用的东西全在build目录下，这个目录有400多M，对于vs项目引用太大了。先把build目录复制到VS项目目录下重命名为ExtJS60。

1、将目录examples、welcome，文件index.html、release-notes.html删除。

2、删除调试用的文件。这个目录里有许多*debug.js、*debug.scss文件，删除之。用Everything

这样一处理就剩下40多M了。可以直接使用我处理好的 http://pan.baidu.com/s/1qYMtE0W 密码: 1q14。

接下来就是利用@Scripts.Render和@Styles.Render引用ExtJS。MVC提供了BundleConfig.cs文件用于增加js脚本和css样式，View视图统一调用，还能对js和css进行压缩。

\App_Start\BundleConfig.cs

using System.Web;

using System.Web.Optimization;

namespace WebApplication1

{

  public class BundleConfig

  {

    // 有关绑定的详细信息，请访问 http://go.microsoft.com/fwlink/?LinkId=301862

    public static void RegisterBundles(BundleCollection bundles)

    {

      bundles.Add(new ScriptBundle("~/bundles/jquery").Include(

                  "~/Scripts/jquery-{version}.js"));

      bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(

                  "~/Scripts/jquery.validate*"));

      // 使用要用于开发和学习的 Modernizr 的开发版本。然后，当你做好

      // 生产准备时，请使用 http://modernizr.com 上的生成工具来仅选择所需的测试。

      bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(

                  "~/Scripts/modernizr-*"));

      bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(

                "~/Scripts/bootstrap.js",

                "~/Scripts/respond.js"));

      bundles.Add(new StyleBundle("~/Content/css").Include(

                "~/Content/bootstrap.css",

                "~/Content/site.css"));

      //********自己的JavaScript************************

      ScriptBundle Ext_ScriptBL = new ScriptBundle("~/ExtJS");

      Ext_ScriptBL.Include("~/ExtJS60/ext-all.js");

      Ext_ScriptBL.Include("~/ExtJS60/classic/locale/locale-zh_CN.js");                 //中文资源

      ScriptBundle jquery_ScriptBL = new ScriptBundle("~/jquery");

      jquery_ScriptBL.Include("~/Scripts/jquery-2.1.4.min.js");

      Ext_ScriptBL.Transforms.Clear();

      bundles.Add(jquery_ScriptBL);

      bundles.Add(Ext_ScriptBL);

      CssRewriteUrlTransformWrapper crut = new CssRewriteUrlTransformWrapper();

      StyleBundle StyleBL = new StyleBundle("~/ExtJS_CSS_triton");

      StyleBL.Include("~/ExtJS60/classic/theme-triton/resources/theme-triton-all_1.css", crut);

      StyleBL.Include("~/ExtJS60/classic/theme-triton/resources/theme-triton-all_2.css", crut);

      StyleBundle StyleBL2 = new StyleBundle("~/ExtJS_CSS_neptune");

      StyleBL2.Include("~/ExtJS60/classic/theme-neptune/resources/theme-neptune-all_1.css", crut);

      StyleBL2.Include("~/ExtJS60/classic/theme-neptune/resources/theme-neptune-all_2.css", crut);

      StyleBundle StyleBL3 = new StyleBundle("~/ExtJS_CSS_gray");

      StyleBL3.Include("~/ExtJS60/classic/theme-gray/resources/theme-gray-all.css", crut);

      bundles.Add(StyleBL);

      bundles.Add(StyleBL2);

      bundles.Add(StyleBL3);

      //********自己的JavaScript END************************

    }

  }

  public class CssRewriteUrlTransformWrapper : IItemTransform

  {

    public string Process(string includedVirtualPath, string input)

    {

      return new CssRewriteUrlTransform().Process("~" + VirtualPathUtility.ToAbsolute(includedVirtualPath), input);

    }

  }

}

Controllers目录右键→添加→控制器 →mvc5控制器 空。控制器名称ExtTest。增加视图（不要布局页）

\Views\ExtTest\Index.cshtml

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Index</title>

  @Styles.Render("~/ExtJS_CSS_neptune")

  @Scripts.Render("~/ExtJS")

  <script type="text/javascript">

    Ext.onReady(function ()

    {

      Ext.create('Ext.tab.Panel', {

        width: 450,

        height: 400,

        renderTo: document.body,

        items: [{

          title: '页面1',

        },

        {

          title: '页面2',

        }]

      });

      Ext.Msg.alert("Ready", "ExtJS就绪");

    });

  </script>

</head>

<body>

    <div>

    </div>

</body>

</html>

运行看看效果：

 
 
标签: ExtJS

mvc5引用ExtJS6的更多相关文章

  1. Asp.net MVC5引用ExtJS6

    摘要:VisualStuio2015 asp.net mvc如何引用ExtJS6,使用BundleConfig. 首先下载ExtJS6.0 gpl版.ExtJS有自己的程序框架,但我们需要asp.ne ...

  2. Asp.Net MVC简单三层架构（MVC5+EF6）

    三层架构与MVC的关系 三层架构是一个分层式的软件体系架构设计,分为:表现层(UI).业务逻辑层(BLL).数据访问层(DAL).分层的目的是为了实现“高内聚,低耦合”的思想,有利于系统后期的维护.更 ...

  3. 第一个asp.net MVC5+ExtJS6入门案例项目

    最近在学习asp.net MVC,结合前段时间学习的ExtJS,做了一个入门示例.不过还有一个json日期显示的问题没有解决. [思路] 1.先搭建一个asp.net MVC项目. 2.将MVC项目的 ...

  4. VS2013新建MVC5项目，使用nuget更新项目引用后发生Newtonsoft.Json引用冲突的解决办法

    错误信息如下: 错误    3    类型“Newtonsoft.Json.JsonPropertyAttribute”同时存在于“c:\Program Files (x86)\Microsoft V ...

  5. 探索ASP.NET MVC5系列之~~~2.视图篇（上）---包含XSS防御和异步分部视图的处理

    其实任何资料里面的任何知识点都无所谓,都是不重要的,重要的是学习方法,自行摸索的过程(不妥之处欢迎指正) 汇总:http://www.cnblogs.com/dunitian/p/4822808.ht ...

  6. 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  7. VS2013中的MVC5模板部署到mono上的艰辛历程

    部署环境:CentOS7 + Mono 3.10 + Jexus 5.6 在Xamarin.Studio创建的asp.net项目,部署过程非常顺利,没有遇到什么问题:但在VS2013中创建的asp.n ...

  8. MVC5 - ASP.NET Identity登录原理 - Claims-based认证和OWIN

    在Membership系列的最后一篇引入了ASP.NET Identity,看到大家对它还是挺感兴趣的,于是来一篇详解登录原理的文章.本文会涉及到Claims-based(基于声明)的认证,我们会详细 ...

  9. 在ASP.NET MVC5中实现具有服务器端过滤、排序和分页的GridView

    背景 在前一篇文章<[初学者指南]在ASP.NET MVC 5中创建GridView>中,我们学习了如何在 ASP.NET MVC 中实现 GridView,类似于 ASP.NET web ...

随机推荐

  1. SQL表自连接用法

      一个表与自身进行连接,称为自连接 问题的提出:一个网友提出这样一个SQL题目,说自己想了很久没解决,我一看,这不是很简单吗 可是自己在查询分析器调试了半天原来问题并不是那不简单 有一个学生表,里面 ...

  2. Groovy轻松入门——通过与Java的比较，迅速掌握Groovy （更新于2008.10.18）

    摘自: http://www.blogjava.net/BlueSUN/archive/2007/03/10/103014.html Groovy轻松入门--通过与Java的比较,迅速掌握Groovy ...

  3. WEB跨域的实现

    同源策略/SOP(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS.CSFR等攻击(可以参考我的这篇文章). SOP要求 ...

  4. 修改 Ueditor 默认显示的字体大小

    默认字体为16px,有点大,为了美观而且一屏可以显示更多内容,可以修改为12px 打开:ueditor.all.min.js 我用的是压缩版 找到如下代码: body{margin:8px;font- ...

  5. .NET使用ICSharpCode.SharpZipLib压缩/解压文件

    SharpZipLib是国外开源加压解压库,可以方便的对文件进行加压/解压 1.下载ICSharpCode.SharpZipLib.dll,并复制到bin目录下 http://www.icsharpc ...

  6. 由后序遍历结果构造二叉查找树 && 二叉查找树链表化

    二叉查找树通俗说就是左孩子比父亲小,右孩子比父亲大.构造这么一个树,树嘛,递归即可. 例如一棵树后序遍历是这样(下图的树):2 9 8 16 15 10 25 38 45 42 30 20.最后的20 ...

  7. 网络基础知识、ASP.NET 核心知识（1）*

    为什么要写网络? 我原本的计划是这样的,连续两天梳理ASP.NET开发的核心知识.说到这呢,有人问了.“不是说好了做ASP.NET笔记吗?为啥要写网络基础知识?是不是傻?” 原因是这样的.作为网站开发 ...

  8. activiti搭建（五）BPMN介绍

    转载请注明源地址:http://www.cnblogs.com/lighten/p/5931207.html 对于BPMN我也不是十分清楚,目前也只是因为对于Modeler中不熟悉的组件查询,来对这部 ...

  9. Jquery设置select控件指定text的值为选中项

    <select name="streetid" id="streetid"> <option value="4">北 ...

  10. Print a PeopleSoft Page with JavaScript

    1.  You will need a Long character field to hold the HTML string. You can use the delivered field HT ...