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. Windows phone 8 学习笔记(7) 设备（转）

    本节主要涉及到 Windows phone 8 手机支持的各类设备,包括相机.设备状态,振动装置等.还有各类感应器,包括磁力计.加速度器和陀螺仪.通过设备状态可以获取内存.硬件.电源.键盘等状态:通过 ...

  2. Windows 2003 + IIS6.0 相关 401.1 或 401.2 等问题解决

    我自己处理的过程: 1. 问题场景: 1.1 我本身有一个虚拟机为 win2003 + iis6.0 的环境 c:\ 为NTFS 格式 D:\为Fat32 格式 1.2 我需要部署一个 asp.net ...

  3. c programming language ___ 5_2.c

    #include <stdio.h> #include <ctype.h> #define BUG printf("here!bug!\n"); int g ...

  4. javascript之for-in循环(for-in Loops)

    for-in循环应该用在非数组对象的遍历上,使用for-in进行循环也被称为“枚举”. 从技术上将,你可以使用for-in循环数组(因为JavaScript中数组也是对象),但这是不推荐的.因为如果数 ...

  5. javaSE第十九天

    第十九天    227 1:异常(理解)    227 (1) 定义    227 a)异常的引入    227 (2)异常的体系    228 (3)异常的处理:    229 A:JVM的默认处理 ...

  6. JqueryMobile动态生成listView并实现刷新的两种方法

    本篇文章主要是对JqueryMobile动态生成listView并实现刷新的两种方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 JqueryMobile动态生成listView并实现刷新 ...

  7. 官网下载Spring dist

    新版Spring官网下载Spring的dist可真是麻烦 跟着下面的贴图走吧,有些在网页的下面,需要打开相应页面后往下拉拉. 下载完后解压lib里面就是各种jar包了 真是麻烦啊,不好找,不过Spri ...

  8. Resources are low on NN. Please add or free up more resources then turn off safe mode manually.

    提交spark应用到yarn集群上的时候在跑一段时间就会出现这个报错: 根据上面的报错原因分析是因为集群资源不够,集群的自我保护机制使hdfs处于安全模式,然后我用"hdfs dfsadmi ...

  9. css下拉菜单效果

    <style> *{padding: 0; margin: 0;} .menu {} li { list-style-type: none; } .menu li {float: left ...

  10. 怎样用foreach去修改数组之中的数据

    $table_exchange=array(1,2,3,4,5,6,7,8); foreach ($table_exchange as $b=>$c){ $table_exchange[$b]= ...