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. Redis+php-resque实现消息队列

      服务器硬件配置 Dell PowerEdge R310英特尔单路机架式服务器 Intel Xeon Processor X3430 2.4GHz, 8MB Cache 8GB内存(2 x 4GB) ...

  2. CSS3 图片悬浮缩放效果

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  3. POJ C程序设计进阶 编程题＃2：角谷猜想

    编程题#2:角谷猜想 来源: POJ(Coursera声明:在POJ上完成的习题将不会计入Coursera的最后成绩.) 注意: 总时间限制: 1000ms 内存限制: 65536kB 描述 所谓角谷 ...

  4. AppSetting ，connectionStrings配置节

    <appSettings> <!-- 当前使用的学校代码 --> <add key="DefaultCompanyID" value="cs ...

  5. js原型链接(二)和object类的create方法

    原型链的内部执行方式 <script> function Myclass(){ this.x=" x in Myclass"; } var obj=new Myclas ...

  6. 网站瓶颈分析—MYSQL性能分析

    一.关于慢查询设置和分析 查找慢查询参数 mysql> show variables like 'long%'; +-----------------+----------+ | Variabl ...

  7. C++排列对称串

    题目内容:字符串有些是对称的,有些是不对称的,请将那些对称的字符串按从小到大的顺序输出.字符串先以长度论大小,如果长度相同,再以ASCII码值为排序标准. 输入描述:输入数据中含有一些字符串(1< ...

  8. ViewPager使用 -------滑动图片

    package com.zzw.viewpage; import java.util.ArrayList; import java.util.List; import android.app.Acti ...

  9. JavaScrip拖动动画中的常见BUG

    经常我们在用JS辛苦写完一个拖动效果之后 ,发现有各种无法用JS解决的BUG.比如拖动时DOM元素中的内容会变蓝,鼠标的指示会变为一个小+号,或disable的样式,通常这种情况一发生,我们的拖动效果 ...

  10. wpf的datepicker处理

    如果有2个datepicker,控制时间起和止的话,可以把第二个datepicker加一个属性,DisplayDateStart = "{Binding SelectedDate,Eleme ...